1

I am new to Ajax, and to make things worse, also a Javascript noob, and I have posted the bellow code of a chat script, to retrieve text from db, in real time, and the code is working, but I need to understand what certain requests are all about. 

<script>

function retrieve(){

    var xmlhttp;

    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest(); }
        else if(window.ActiveXObject) {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
        else {
            alert('Please update your browser to start chatting');
    }

Simply, I understand the above is (I created it) just a function with global variable declared to be assigned whether XMLHttpRequest/ActiveXObject Object is declared depending if browser is IE6,7 and others if not throw in alert...

xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            document.getElementById("canvas").innerHTML = xmlhttp.responseText;
        }
    }

Similarly, the above I assume takes the onreadystatechange property of the Ajax API and checks for it's state, readyState & status which, if only they match 4 and 200 means, Ajax is working as wanted

t = setTimeout("retrieve()", 2000);

I know the setTimeout() is a bit like setInterval() function, which runs the function inside it, every 2 seconds, to check for new messages.

xmlhttp.open("GET", "getajax.php", true);
    xmlhttp.send();

Now, the problem is with the above, I can almost understand that the .open method is supposed to get data from getajax.php even though, I have no idea of what true means in this instance, but as far as the xmlhttp.send(); I have absolutely no clue,

So, All I need is for you to explain to me what I have missed during my illaboration, and what the last queries mean, just in brief.

  }
    retrieve();

</script>

<div id="canvas"></div>
4

2 に答える 2

2 
xmlhttp.open("GET", "getajax.php", true);
xmlhttp.send();

trueリクエストを実行するように指示するものですA同期的に、これはAJAXのAです。そして最後.send()に実際にリクエストを送信します。

非同期リクエストはノンブロッキングです。つまり、コードの残りの部分は、リクエストが終了して戻るのを待たずに続行します。を介してリクエストを開始する前に、イベント ハンドラを送信したのはそのためですxmlhttp.onreadystatechange。そうすれば、リクエストが完了すると、返された情報をどう処理するかをスクリプトに指示したことになります。

お役に立てれば。

編集さらに、 jQueryのような javascript 用の何らかのフレームワークまたはライブラリを使用することをお勧めします。JavaScript コアの一部を学ぶのは良いことですが、jQuery のようなものを使用すると、作業がずっと楽になります。

于 2013-05-17T00:10:54.207 に答える
2

簡単に言えば、上記は（私が作成した）代入が宣言されたグローバル変数を持つ単なる関数であることを理解しています

xmlhttpグローバルではありません。グローバル関数のローカル変数ですretrieve。

同様に、上記は Ajax API の onreadystatechange プロパティを取得し、その状態をチェックすると仮定します

onreadystatechange関数を受け入れるプロパティです。その関数は、 の値がreadyState変化したときに実行されます。この関数は通常、リクエストのステータスを確認するために使用されます。

setTimeout() が setInterval() 関数に少し似ていることは知っています。この関数は、その内部で関数を 2 秒ごとに実行して、新しいメッセージをチェックします。

setTimeoutsetInterval後で関数を実行するという意味で似ています。とは異なりsetInterval、コードを 1 回だけ実行します。また、それはタイマーを実行する適切な方法ではありません。タイマーを適切に使用する方法を説明する投稿を次に示します。

.open メソッドは getajax.php からデータを取得することになっていますが、このインスタンスで true が何を意味するのかわかりませんが、xmlhttp.send(); まったく手がかりがない

は、以下openを受け入れてリクエストをビルドします。

  • リクエストのタイプ (GET/POST)

  • リクエストを送信する URL

  • 3 番目の引数は、要求が非同期かどうかを決定します。

    • に設定するとfalse、リクエストが同期化されます。ブラウザがフリーズして応答を待ちます。

    • の場合true、リクエストは非同期です。ブラウザは待機中にフリーズしません。

    デフォルト値はtrueであるため、省略できます。

send最終的にリクエストをサーバーに送信する実際の関数です。

さらに読むには、 AJAX に関する MDN のセクションを読むことをお勧めします。

于 2013-05-17T00:17:13.167 に答える