ajax シリーズの最初の部分で XHR オブジェクトを深く理解する

ajax は、asynchronous javascript and XML の略語で、中国語訳は非同期 javascript と XML であり、ページをアンロードせずにサーバーに追加のデータを要求できます。これにより、ajax に興味のある友人に試してみましょう。 ajax シリーズの最初の記事、XHR オブジェクトについて見てみましょう

Ajax は、非同期 JavaScript と XML の略語で、このテクノロジは追加のリクエストを行うことができます。ページをアンロードせずにサーバーから情報を取得できるため、ユーザー エクスペリエンスが向上します。名前にXMLとありますが、ajax通信はデータ形式とは関係ありません。 ajaxの内容については以下で詳しく紹介します

作成

ajax技術の中核となるのはXMLHttpRequestオブジェクト（略してXHR）で、これはMicrosoftが最初に導入した機能であり、その後他のブラウザプロバイダも提供しました同じ成果です。 XHR は、サーバーにリクエストを送信し、サーバーの応答を解析するためのスムーズなインターフェイスを提供します。サーバーからより多くの情報を非同期的に取得できます。つまり、ユーザーがクリックした後、ページを更新せずに新しいデータを取得できます IE5 が最初です。 XHR オブジェクトを導入するブラウザ。 IE5 では、XHR オブジェクトは MSXML ライブラリの ActiveX オブジェクトを通じて実装されますが、IE7+ およびその他の標準ブラウザーはネイティブ XHR オブジェクトをサポートしています

XMLHTTPRequest() はコンストラクターであるため、XHR オブジェクトの作成は XHR オブジェクトのインスタンス化とも呼ばれます。 XHR オブジェクトを作成する互換性のある方法は次のとおりです

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

リクエストを送信する

open()

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

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

[注意] URLは相対的です コードが実行される現在のページに固有であり、同じポートとプロトコルを使用する同じドメイン内の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 属性をチェックして、応答が正常に返されたことを確認することです。一般に、HTTP ステータス コード 200 は成功の兆候として使用できます。この時点で、responseText 属性のコンテンツが準備できており、コンテンツ タイプが正しければ、responseXML にもアクセスできます。さらに、ステータス コード 304 は、要求されたリソースが変更されていないことを意味し、ブラウザーにキャッシュされたバージョンを直接使用できることを意味します

コンテンツ タイプに関係なく、応答が有効であることも意味します。の場合、応答本文の内容は responseText 属性に保存され、非 XML データの場合、responseXML 属性の値は、要求/応答プロセスの現在アクティブなフェーズを表すプロパティになります。この属性の可能な値は次のとおりです:

0 (UNSENT): 未初期化。 open() メソッドはまだ呼び出されていません

1(OPENED): 開始。 open() メソッドは呼び出されていますが、send() メソッドは呼び出されていません

2 (HEADERS_RECEIVED): 送信。 send() メソッドが呼び出され、ヘッダー情報が受信されました

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

4 (DONE): 完了。すべての応答データが受信され、クライアントで使用できるようになります。readyState 属性値がある値から別の値に変更されると、readystatechange イベントがトリガーされます。このイベントを使用して、状態が変化するたびに readState の値を検出できます。通常、readyState の値が 4 である段階に興味があります。この時点ではすべてのデータが準備できているためです

[注] ブラウザ間の互換性を確保するには、open() を呼び出す前に onreadystatechange イベント ハンドラーを指定する必要があります。 readyState 属性が 0 と 1 の場合は受信されません

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

Example

以下は、ajax での xhr オブジェクトの適用を示す簡単な例です

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

/ /message.xml

<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(&#39;Microsoft.XMLHTTP&#39;);
  }
  //异步接受响应
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //实际操作
        result.innerHTML += xhr.responseText;
      }
    }
  }
  //发送请求
  xhr.open(&#39;get&#39;,&#39;message.xml&#39;,true);
  xhr.send();
}
</script>

サンプルのデモを通じて、ajax フロントエンド自体の内容は難しくないことがわかりました。ただし、ajax はバックエンドとネットワークの知識が必要なため、習得するのは簡単ではありません。今後のブログ投稿では、ajax の主要な内容を徐々に詳しく紹介していきます

上記は、編集者が XHR オブジェクトについて紹介した ajax の詳細シリーズの最初の記事です。皆様のお役に立てれば幸いです。

関連する推奨事項:

AJAX ページング効果の簡単な実装の詳細な説明

Ajax 送信フォームと受信用 JSON メソッド

パーセント進行状況バーを使用した簡単な Ajax 実装の説明

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