ajax の XHR オブジェクトについての深い理解

今回は ajax の XHR オブジェクトについて詳しく解説します。 ajax の XHR オブジェクトを使用する際の注意点を以下に挙げます。

前の言葉 Ajaxは非同期

とXMLの略語で、中国語訳では非同期JavaScriptとXMLであり、ページをアンロードせずにサーバーに追加データを要求できます。ユーザーエクスペリエンスを向上させます。名前にXMLとありますが、ajax通信はデータ形式とは関係ありません。 ajax の内容については、以下で詳しく紹介します

作成 ajax テクノロジーの中核は、Microsoft によって最初に導入された機能である XMLHttpRequest オブジェクト (略して XHR) であり、その後他のブラウザー プロバイダーによって提供されました。同じ実装です。 XHR は、サーバーにリクエストを送信し、サーバーの応答を解析するためのスムーズなインターフェイスを提供します。サーバーからより多くの情報を非同期的に取得できます。つまり、ユーザーがクリックした後、ページを更新せずに新しいデータを取得できます

IE5 が最初です。 XHR オブジェクトを導入するブラウザ。 IE5 では、XHR オブジェクトは MSXML ライブラリの ActiveX オブジェクトを通じて実装されますが、IE7+ およびその他の標準ブラウザーはネイティブ XHR オブジェクトをサポートしています

XHR オブジェクトの作成は、XHR オブジェクトのインスタンス化とも呼ばれます。これは、XMLHTTPRequest() が

であるためです。 。以下は、XHR オブジェクトを作成する互換性のある方法です

var xhr;
if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest();
}else{
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

リクエストを送信します

XHR オブジェクトを使用する場合、最初に呼び出されるメソッドは open() で、これは 3 を受け入れますパラメータ: 送信するリクエストのタイプ ("get"、"post" など)、リクエストの URL、およびリクエストを非同期に送信するかどうかを示すブール値

xhr.open("get","example.php", false);

【注意】 URL は、コードが実行される現在のページ。ドメイン内の同じポートとプロトコルを使用して、同じページにのみリクエストを送信できます。 URL がリクエストを開始したページと異なる場合、send() メソッドはリクエストの本文として送信されるデータであるパラメータを受け取ります。 send() メソッドを呼び出した後、リクエストはサーバー

xhr.open("get", "example.txt", false);
xhr.send(null);

にディスパッチされ、レスポンスを受信します

レスポンスを受信した後、レスポンスデータには、主にXHRオブジェクトの属性が自動的に入力されます。次の 4 つの属性

responseText: 応答本文として返されるテキストresponseXML: 応答のコンテンツ タイプが 'text/xml' または 'application/xml' の場合、この属性は応答データの XML DOM ドキュメントを保持しますstatus: 応答の HTTP ステータス

statusText: HTTP ステータスの説明

応答を受信した後の最初のステップは、status 属性をチェックして、応答が正常に返されたことを確認することです。一般的に、

200 は成功の兆候とみなされます。この時点で、responseText 属性のコンテンツが準備できており、コンテンツ タイプが正しければ、responseXML にもアクセスできます。さらに、ステータス コード 304 は、要求されたリソースが変更されていないことを意味し、ブラウザーにキャッシュされたバージョンを直接使用できることを意味します

コンテンツ タイプに関係なく、応答が有効であることも意味します。 、レスポンス本文の内容はresponseText属性に保存され、非XMLデータの場合、responseXML属性の値はnullになります

if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
  alert(xhr.responseText);
}else{
  alert(&#39;request was unsuccessful:&#39; + xhr.status);
}

asynchronous

非同期レスポンスを受信する必要がある場合は、 /応答プロセスの現在アクティブなフェーズのreadyState属性を検出する必要があります。この属性の可能な値は次のとおりです:

0 (UNSENT): 未初期化。 open() メソッドはまだ呼び出されていません1(OPENED): 開始。 open() メソッドは呼び出されていますが、send() メソッドは呼び出されていません 2 (HEADERS_RECEIVED): 送信。 send() メソッドが呼び出され、ヘッダー情報が受信されました

3 (LOADING): 受信しました。レスポンスボディ情報の一部を受信しました

4 (DONE): 完了。すべての応答データが受信され、

　　只要readyState属性值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常，我们对readyState值为4的阶段感兴趣，因为这时所有数据都已就绪

　　[注意]必须在调用open()之前指定onreadystatechange 事件处理程序才能确保跨浏览器兼容性，否则将无法接收readyState属性为0和1的情况

xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    if(xhr.status == 200){
      alert(xhr.responseText);
    }
  }
}

实例

　　下面以一个小实例来演示ajax中xhr对象的应用

<button id="btn">获取信息</button>
<p id="result"></p>
<script>
btn.onclick = function(){
  //创建xhr对象
  var xhr;
  if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
  }else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
  //异步接受响应
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //实际操作
        result.innerHTML += xhr.responseText;
      }
    }
  }
  //发送请求
  xhr.open('get','message.xml',true);
  xhr.send();
}
</script>

//message.xml

<p>hello world</p>

最后

　　通过实例的演示发现，ajax前端本身的内容并不难。但是，由于ajax涉及到一些后端及网络的知识，使得学起来不是很容易。以后的博文将逐步深入地介绍ajax的重点内容

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

AJAX的队列请求如何实现（附代码）

pushState+Ajax实现无刷新的页面切换

以上がajax の XHR オブジェクトについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。