ajax要求プロセス

9378 ワード

もとの生態Ajaxの使う措置、最後に面接官に教えて、私達は仕事の中でjQueryを使ってAjaxの要求と処理を実現しにきたのです。回答する時できるだけ詳しくして、方法のパラメーターの個数を含んで、順序と作用
Ajaxとは何ですか
Ajaxは非同期要求データの技術であり、ユーザーの体験とプログラムの性能を改善するのに役立つと理解しています。
Ajaxの使用
(1)  `XMLHttpRequest`  ,             .

(2)      `HTTP`  ,    `HTTP`     、`URL`     .

(3)    `HTTP`         .

(4)  `HTTP`  .

(5)           .

(6)  JavaScript DOM      .
    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open('GET','demo.php','true');

    xmlHttp.send()

    xmlHttp.onreadystatechange = function(){

        if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

        }

    }
以下のステップは、理解できないなら、丸暗記してもいいです。答えられないよりいいです。
1.AjaxコアオブジェクトXMLttpRequestを作成する
var xmlhttp;
if(window.XMLHttpRequest){ 
//IE7+,Chrome,Firefox,Safari,Opera      xmlhttp=new XMLHttpRequest;
}else{
   //IE5,IE6     
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.要求をサーバに送信する
xmlhttp.open(method,url,async);
xmlhttp.send();
例は以下の通りです
 xmlhttp.open("GET","http://www.runoob.com/try/ajax/demo_get.php",true);
 xmlhttp.send();
注意する1:openのパラメータはしっかり覚えて、多くの面接官はよくこのような細い点のmethodを聞きます:要求のタイプ;GETまたはPOST url:ファイルはサーバー上の位置、相対位置または絶対位置async:true(非同期)またはfalse(同期)
なぜAsync=trueを使うのですか?
私たちの例は、open()の3番目のパラメータに「true」を使用しています。
このパラメータは要求が非同期であるかどうかを規定しています。
Trueは、サーバからの応答を待つことなく、send()メソッドの後にスクリプトが実行されることを示しています。
オンreadystatechangeイベントはコードを複雑にしました。しかし、これはサーバの応答が得られない場合に、コード停止を防ぐための最も安全な方法です。
このパラメータを「false」に設定することにより、追加のオンレドステージコードを省くことができます。要求に失敗したときに残りのコードを実行するかどうかは関係がない場合、このパラメータを使用しても良いです。
注意2:POST要求はget要求とは異なる。
send(string)メソッドpost要求時に文字列パラメータを使用します。そうでないとパラメータはありません。
注意3:postリクエストは必ずリクエストヘッダのフォーマット内容を設定してください。
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Herry&lname=Ford");
3.サーバ応答処理
レスポンスTextは文字列形式の応答データを得る。レスポンスXMLはXML形式の応答データを得た。
3.1同期処理
xmlhttp.open("GET","http://www.runoob.com/try/ajax/demo_get.php",false);
xmlhttp.send();
document.getElementById("mydiv").innerHTML=xmlhttp.responseText;
折り返したデータは、send()の後で直接処理します。
3.2非同期処理
非同期処理は相対的に面倒です。要求状態変更イベントで処理します。
 xmlhttp.onreadystatechange=function () {//           
      if(xmlhttp.readyState==4&&xmlhttp.status==200){
            document.getElementById("mydiv").innerHTML=xmlhttp.responseText;
       }
 }
全部で5つの要求状態があります。0から4まで変化があります。
0:要求が初期化されていません。
1:サーバ接続が確立されました。
2:要求は受信されました
3:要求処理中
4:要求が完了し、応答が完了しました。
xmlhttp.status:応答状態コード。これも面接のほうが好きです。これは四つ以上知っていなければなりません。
200:「OK」
304:このリソースは、前回の要求の後には何も変更されていません(これは通常、ブラウザのキャッシュメカニズムのために使用され、GET要求を使用する場合は特に注意が必要です)。
403(禁止)サーバは要求を拒否します。
404(見つかりませんでした)サーバは要求されたウェブページが見つかりませんでした。
408(タイムアウト要求)サーバが要求を待っている間にタイムアウトが発生します。
500(サーバ内部エラー)サーバにエラーが発生し、要求を完了できませんでした。