基本的なAjaxロジック

htmlページでAjaxを使用することを提案したら、それがどのように動作するかを調べることにしました。私の例では、PHPファイル（単純な文字列をテストとしてエコーします）から応答を取得しようとしていますが、実際には何も起こりません。基本的なAjaxロジック

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title> Incident Center </title> 
    <!--<link rel="stylesheet" href="http://web.njit.edu/~swp5/assignment/style/style.css">--> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <script type="text/javascript"> 
    function onsubmit() 
    { 
     var sender; 
     if (window.XMLHttpRequest) 
     { 
      sender=new XMLHttpRequest(); 
     } 
     else 
     { 
      sender=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     sender.onreadystatechange=function() 
     { 
      if (sender.readyState==4 && sender.status==200) 
      { 
       document.getElementById("myDiv").innerHTML=sender.responseText; 
      } 
     } 
     sender.open("GET","proz.php",true); 
     sender.send(); 
    } 
    </script> 
</head> 
<body> 
    <div class="header"> 
     Incident Center 
    </div> 

      <p> 
       <button onclick="onsubmit()">Test</button> 
      </p> 


    <div id="myDiv"></div> 
</body> 
</html>

出典

2011-10-26 Sam

1つ：HTMLが不正です。 '

申し訳ありませんが、コードを元の状態から少し変更して、単純化して、可能性を絞り込めました。他のタグを削除するのを忘れてしまった。 – Sam

リクエスト後にレスポンスコードを確認しましたか？ responseTextは、sender.status == 200の場合にのみ設定されます。 –

を助けること、それは実際にあなたが関数名としてonsubmit()を使用しているという事実が好きではありません。恐らくonsubmit()は実際にはすでに<button>要素のイベントハンドラフックであるからです。他のブラウザもこの関数名が気に入らないと思います。

まず、関数の名前を変更します。 dosubmit()としましょう。

さらに、<form>要素にボタンをラップする必要があります。また、デフォルトのボタンが送信ボタンとして機能するため、フォームが送信され、ページがリロードされます。

これを防ぐには、機能return false;をさせてください、あなたはこのようにインラインでそれを呼び出す、またはボタンをタイプbuttonのボタンを作成し、そのようにしようとしている場合は、そのonclick="return dosubmit()"のような関数を呼び出す：<button type="button" onclick="dosubmit()">

出典

2011-10-26 17:04:21

なぜjQueryを使用しないのですか？ http://www.jquery.com/

出典

2011-10-26 16:53:09

彼の質問では、彼はそれがすべての仕組みを学ぶことを試みていると述べています。このシナリオでは、実際のAJAXのすべての作業をバックグラウンドで行うjQueryを使用する代わりに、このように試してみる方がよいでしょう。 –

あなたは正しいです、申し訳ありません。 –

送信には実際に何も表示されません。 Sendはページを呼び出し、2つの異なる変数に値を設定します。 sendが行うのは、送信側の "responseXML"および "responseText"プロパティを設定することです。あなたの送信後に試してみてください。

alert(sender.responseText);

は、それはそれは、AJAX機能に組み込まれているようにこれを行うにはjQueryを使用する方がはるかに簡単だhttp://en.wikipedia.org/wiki/XMLHttpRequest

出典

2011-10-26 16:53:59 Tom

申し訳ありませんが、私はonreadystatechangeの関数呼び出しを見逃しました – Tom

を参照してください。あなたのコードは次のようになります。

jQuery.ajax({ 
    type: 'get', 
    url: 'proz.php', 
     error: function(r) { 
      alert("Something went wrong - "+r); 
     } 
    success: function(response) { 
     alert(response); 
    } 
});

・ホープここオペラ11.51を使用して

出典

2011-10-26 17:02:54 hollandben

Davidsと同じコメント：彼の質問では、彼はそれがすべての仕組みを学ぶことを試みていると言います。このシナリオでは、実際のAJAXのすべての作業をバックグラウンドで行うjQueryを使用する代わりに、このように試してみる方がよいでしょう。 –

私のコメントで既に述べたように、あなたのリクエストの応答コードをチェックして何か問題がないかどうかを確認する必要があります。あなたのonreadystatechanged関数の先頭に次の行を追加します。この出力に基づいて

alert(sender.readyState + ', ' + sender.status + ', ' + sender.responseText);

あなたはおそらくあなたのエラーを決定することができます。

出典

2011-10-26 17:09:34

基本的なAjaxロジック

答えて

関連する問題