Ajax 非同期リクエストの 5 つのステップを深く理解する (詳細なコード)

フロントエンドの仕事では、ajax がよく使われますが、ajax が非同期リクエストであることだけを知っていて、その基本的な手順や ajax リクエストのプロセスについては知りません。次に、この記事では、Ajax リクエストの手順と、Ajax リクエスト ステップの詳細なコードを紹介します。興味のあるお友達は覗いてみてはいかがでしょうか。

AJAX (Asynchronous JavaScript and XML): インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。AJAX は、バックグラウンドでサーバーと少量のデータを交換することで、Web ページの非同期更新を可能にします。これは、Web ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

1. xmlHttpRequest オブジェクトの作成

すべての最新ブラウザ (IE7、Firefox、Chrome、Safari、Opera) は XMLHttpRequest オブジェクトをサポートしますが、IE5 と IE6 は ActiveXObject を使用します。

    if(window.XMLHttpRequest){
       xmlHttp = new XMLHttpRequest(); 
      if(xmlHttp.overrideMimeType){
        xmlHttp.overrideMimeType("text/xml");
      }
   }else if(window.ActiveXobject){
       var activeName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
       for(var i=0; i<activeName.length; i++){
          try{
              xmlHttp = new ActiveXobject(activeName[i]);
             break;
          }catch(e){
          }
       }     
   }
   if(!xmlHttp){
      alert("创建xmlhttprequest对象失败");
   }else{    
   }

2. コールバック関数を設定します

   xmlHttp.onreadystatechange= callback;
   function callback(){}

3. OPEN メソッドを使用してサーバーとの接続を確立します xmlHttp.open(" get","ajax ?name=" name,true)

このステップでは、HTTP リクエスト メソッド (post/get) の設定に注意してください。POST メソッドの場合は、リクエスト ヘッダーの設定に注意してください。 information xmlHttp.setRequestHeader("Content-Type","application /x-www-form-urlencoded")

4. サーバーにデータを送信します

  xmlHttp.send(null);

これは POST です。空にはなりません。

5. コールバック関数でさまざまな応答状態を処理します。

 if(xmlHttp.readyState == 4){
      //判断交互是否成功
      if(xmlHttp.status == 200){
        //获取服务器返回的数据
        //获取纯文本数据
        var responseText =xmlHttp.responseText;
       document.getElementById("info").innerHTML = responseText;
      }
  }

readyState 属性: 要求/応答プロセスの現在の段階を示します

0: 初期化されていません。 open() メソッドはまだ呼び出されていません。 ＃＃＃１：始めます。 open() メソッドは呼び出されていますが、send() メソッドはまだ呼び出されていません。 ＃＃＃２：送信します。 send() メソッドが呼び出されていますが、応答はまだ受信されていません。 ＃＃＃３：受け取ります。部分的な応答データを受信しました。 ＃＃＃４：完了です。すべての応答データが受信され、クライアントで使用できるようになりました。

XMLHttpRequest オブジェクトが上記の 5 つの手順を完了した後でのみ、サーバーから返されたデータを取得できます。

status 属性: レスポンス HTTP ステータスコード

200: レスポンス成功

301: 永続リダイレクト/永続転送

302: 一時リダイレクト/一時転送

304: 今回はコンテンツの取得キャッシュ内のデータを読み取ることです
400: リクエスト パラメーター エラー
401: アクセス権限がありません
404: アクセスされたリソースが存在しません



## 要約: 上記は Ajax リクエストの 5 つのステップと詳細なコードを紹介しています。これを読んだことがない人には難しく感じるかもしれませんが、読んだ後は試してみることができます。徐々に理解できるようになりますので、お役に立てれば幸いです。

以上がAjax 非同期リクエストの 5 つのステップを深く理解する (詳細なコード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。