Ajax+jsで非同期対話を実現

この記事では、ネイティブ javascript と ajax を組み合わせて実装された非同期対話メソッドとコードを共有します。必要な友人は参照してください。

非同期対話のことになると、まるで ajax テクノロジーが非同期対話と同義になっているかのように、誰もが ajax と言うでしょう。それでは、ajax のコア オブジェクトについて学習します!

ajax を使用して非同期対話を実装することは、4 にすぎません。手順:

1. Ajaxコアオブジェクトを作成する

2. サーバーとの接続を確立する

3. サーバーにリクエストを送信する

4. サーバーの応答データを受信する

一見謎めいた非同期対話の後。これらの 4 つのステップを明確にすると、おそらく誰もが理解してくれるでしょう。私の頭の中にはすでに予備的なアイデアがあります

まず、ブラウザーの互換性の問題のため、コアの ajax オブジェクトを作成するときにその互換性の問題を考慮する必要はありません。非同期対話を実現するための後続の手順は、ajax コア オブジェクトが正常に作成されたかどうかに基づいています。

 function getXhr(){
      // 声明XMLHttpRequest对象
      var xhr = null;
      // 根据浏览器的不同情况进行创建
       if(window.XMLHttpRequest){
      // 表示除IE外的其他浏览器
           xhr = new XMLHttpRequest();
       }else{
         // 表示IE浏览器
         xhr = new ActiveXObject('Microsoft.XMLHttp');
       }
       return xhr;
 }
 // 创建核心对象
 var xhr = getXhr();

上記のコードにより、ajax コア オブジェクトが正常に作成されました。それを変数 xhr に保存します。次に説明する ajax コア オブジェクトはすべて xhr になります。

2 番目のステップは、サーバーとの接続を確立し、ajax コア オブジェクトを通じて open(method, url, async) メソッドを呼び出すことです。 open メソッドのパラメーター:

method はリクエスト メソッド (get または post) を表します

url はリクエストされた php のアドレスを表します (

リクエスト タイプ

が get の場合、リクエストされたデータは URL アドレスの後に続きます。疑問符があり、null 値が以下の send メソッドに渡されます) async は非同期かどうかを示すブール値で、デフォルトは true です。最新の仕様では、この項目を入力する必要はなくなりました。公式は、ajax を使用することで非同期を実現できると考えています

xhr.open("get","01.php?user=xianfeng");//这是get方式请求数据
xhr.open("post","01.php");//这是以post方式请求数据

3 番目のステップでは、サーバーにリクエストを送信し、ajax コア オブジェクトを使用して send メソッドを呼び出します

post メソッドの場合、リクエストされたデータは、name=value の形式で send メソッドに入れられ、サーバーに送信されます。get メソッドは null 値を直接渡します

xhr.send("user=xianfeng");//这是以post方式发送请求数据
xhr.send(null);//这是以get方式

4 番目のステップは、サーバーの応答によって返されたデータを受信することです。 onreadystatechange イベントは、サーバーの通信ステータスを監視します。status は、

ステータス コード

を介してサーバーの現在の通信ステータスを取得し、responseText 属性を使用して、サーバーの応答によって返されたデータを受け取ります (ここで参照) 形式のデータをテキスト型に変換します。後はXML形式のデータと有名なjson形式のデータを書きます

xhr.onreadystatechange = function(){
   　　　　　　　　　　　　　　　// 保证服务器端响应的数据发送完毕,保证这次请求必须是成功的
             　　　if(xhr.readyState == 4&&xhr.status == 200){
          　　　　　　// 接收服务器端的数据
          　　　　　　var data = xhr.responseText;
          　　　　　　 // 测试
          　　　　　　 console.log(data);
              　　 } 
             };

以上がAjax+jsで非同期対話を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。