English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

XMLHttpRequest（一）同期リクエストと非同期リクエストの詳細

XMLHttpRequestを使用してHTTPリクエストを送信することは非常に簡単です。単にリクエストオブジェクトのインスタンスを作成し、URLを開き、そのリクエストを送信するだけで良いです。転送が完了すると、リクエストオブジェクトから結果のHTTPステータスや返信された応答内容も取得できます。　

XMLHttpRequestから生成されたリクエストは、データを取得するために2つの方法があります：非同期モードまたは同期モード。リクエストのタイプは、このXMLHttpRequestオブジェクトのopen()メソッドの第3引数asyncの値によって決定されます。このパラメータの値がfalseの場合、XMLHttpRequestリクエストは同期モードで実行されます；それ以外の場合、プロセスは非同期モードで完了します。

2つの通信モード：同期および非同期リクエスト：　

同期リクエスト
　メインスレッドでの同期リクエストはページをブロックし、ユーザーエクスペリエンスに悪い影響を与えるため、最新の一部のブラウザではメインスレッドでの同期リクエストは廃止されています。非常に稀な場合、同期モードのXMLHttpRequestを使用することは、非同期モードを使用するよりも適しています。

　1Worker内でXMLHttpRequestを使用する場合、同期リクエストは非同期リクエストよりも適しています。
　ホームページ中のコード:

 <script type="text/javascript">
 var oMyWorker = new Worker("myTask.js"); 
 oMyWorker.onmessage = function(oEvent) { 
  alert("Worker said: "); + oEvent.data);
 });
 oMyWorker.postMessage("Hello");
</script>
myFile.txt (XMLHttpRequestオブジェクトの同期リクエストのファイル):
Hello World!!

Workerコード：myTask.jsを含んでいます

 self.onmessage = function (oEvent) {
 if (oEvent.data === "Hello") {
var oReq = new XMLHttpRequest();
oReq.open("GET", "myFile.txt", false); // 同期リクエスト
oReq.send(null);
self.postMessage(oReq.responseText);
 }
});

注意: Workerを使用しているため、このリクエストは実際には非同期です。
　同様の方法を使用して、スクリプトがバックグラウンドでサーバーとインタラクションし、特定のコンテンツを事前に読み込むことができます。web workersの使用方法についてもっと詳しくはこちらを参照してください。

　2.同期リクエストを使用しなければならない場合
　少数の状況では、XMLHttpRequestの同期モードを使用する必要があります。例えば、window.onunloadやwindow.onbeforeunloadのイベントハンドラで。ページのunloadイベントハンドラで非同期のXMLHttpRequestを使用すると、ページが存在しなくなった後に応答が返ってくるため、すべての変数やコールバック関数が破壊されるという問題が発生します。結果として、「関数未定義」というエラーが発生します。解決策として、ここで同期モードのリクエストを使用すると、リクエストが完了する前にページが閉じられません。

 window.onbeforeunload = function () {
 var oReq = new XMLHttpRequest();
 oReq.open("GET", "logout.php"63;nick=" + escape(myName), false); // 同期リクエスト
 oReq.send(null);
 if (oReq.responseText.trim() !== "已退出"); { // 「已退出」が返信データです
「退出失敗、手動で退出を行いたいですか」63;";
 }
});

非同期リクエスト
　非同期モードを使用すると、データが完全にリクエストされた後に指定されたコールバック関数が実行されます。リクエストの実行中に、ブラウザは他の処理を正常に実行できます。　

3.例: 外部ファイルを読み取るための標準的な方法を生成する
　ある要件状況では、複数の外部ファイルを読み取る必要があります。これは標準の関数であり、XMLHttpRequestオブジェクトを使用して非同期リクエストを行います。また、各ファイルの読み取り完了後に異なるコールバック関数を指定することができます。

 function loadFile (sURL, timeout, fCallback /*、パラメータを渡す1、パラメータを渡す2、など */) {
 var aPassArgs = Array.prototype.slice.call(arguments, 3), oReq = new XMLHttpRequest();}}
 oReq.ontimeout = function() {
console.log("リクエストタイムアウト.");
 }
 oReq.onreadystatechange = function() {
if (oReq.readyState === 4) { 
 if (oReq.status === 200) {
  fCallback.apply(oReq, aPassArgs);
 } else {
  console.log("Error", oReq.statusText);
 }
}
 });
 oReq.open("GET", sURL, true);
 oReq.timeout = timeout;
 oReq.send(null);
}

loadFile関数の使用方法:

 function showMessage (sMsg) {
 alert(sMsg + this.responseText);
}
loadFile("message.txt", 200, showMessage, "新しいメッセージ！\n");

第1行で関数を定義し、ファイル読み取りが完了した後、fCallback関数が第3引数の後のすべての引数を自分の引数として呼び出されるようにします。
第3行でタイムアウト設定を使用して、コードがリクエストの返信データを読み取るのを待ち過ぎないようにします。XMLHttpRequestオブジェクトのtimeout属性に値を設定して指定します。
　第6行でonreadystatechangeイベントハンドラにコールバック関数を指定しています。関数は毎回実行され、リクエストが終了したかどうかを確認します（リクエストステータスが4), それがそうなら、リクエストが成功したかどうかを判断します（HTTPステータスコードが200)の場合、ページのソースコードを出力します。リクエストにエラーが発生した場合、エラーメッセージを出力します。
　第15行で第3引数をtrueに指定すると、リクエストが非同期モードで実行されることを示します。

　4例: 非同期リクエストを使用し、クロージャーを利用しない。

 function switchXHRState() {
 switch (this.readyState) {
case 0: console.log("open()メソッドがまだ呼び出されていません。"); break;
case 1: console.log("send()メソッドがまだ呼び出されていません。"); break;
case 2: console.log("send()メソッドが呼び出されました、応答ヘッダと応答ステータスが返されました。"); break;
case 3: console.log("ダウンロード中、部分応答エンティティを受け取りました。"); break;
case 4: console.log("リクエスト完了!"); this.callback.apply(this, this.arguments);
 }
});
function loadFile (sURL, fCallback /*、パラメータを渡す1、パラメータを渡す2、など */) {
 var oReq = new XMLHttpRequest();
 oReq.callback = fCallback;
 oReq.arguments = Array.prototype.slice.call(arguments, 2);
 oReq.onreadystatechange = switchXHRState;
 oReq.open("GET", sURL, true);
 oReq.send(null);
}

bind: を使用して　

function switchXHRState(fCallback, aArguments) {}}
 switch (this.readyState) {
case 0: console.log("open()メソッドがまだ呼び出されていません。"); break;
case 1: console.log("send()メソッドがまだ呼び出されていません。"); break;
case 2: console.log("send()メソッドが呼び出されました、応答ヘッダと応答ステータスが返されました。"); break;
case 3: console.log("ダウンロード中、部分応答エンティティを受け取りました。"); break;
case 4: console.log("リクエストが完了しました!"); fCallback.apply(this, aArguments);
 }
});
function loadFile (sURL, fCallback /*、パラメータを渡す1、パラメータを渡す2、など */) {
 var oReq = new XMLHttpRequest();
 oReq.onreadystatechange = switchXHRState.bind(oReq, fCallback, Array.prototype.slice.call(arguments, 2));
 oReq.open("GET", sURL, true);
 oReq.send(null);
}

これでこの記事のすべての内容が終わります。皆様の学習に役立つことを願っています。また、ナイアラチュートリアルを多くご支援いただけますようにお願いします。

声明：この記事の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものです。このサイトは所有権を持ちません。人間のエディタによる編集は行われていません。また、関連する法的責任を負いません。著作権侵害を疑う内容がある場合は、メールを送信してください：notice#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。届け出を提出し、関連する証拠を提供してください。一旦確認がついたら、このサイトは即座に侵害を疑われるコンテンツを削除します。）

基本チュートリアル
おすすめ