xmlhttprequestにより、HTTPリクエストを送信することは非常に簡単になります。リクエストオブジェクトのインスタンスを作成し、URLを開き、リクエストを送信するだけです。送信が完了すると、結果のHTTPステータスと返された応答コンテンツもリクエストオブジェクトから取得できます。
XMLHTTPREQUESTによって生成された要求は、非同期モードまたは同期モードの2つの方法で取得できます。リクエストのタイプは、このXMLHTTPREQUESTオブジェクトのOpen()メソッドの3番目のパラメーターであるASYNCの値によって決定されます。このパラメーターの値がfalseの場合、xmlhttprequestリクエストは同期モードで実行されます。そうしないと、プロセスは非同期モードで完了します。
2つの通信モード:同期および非同期リクエスト:
リクエストを同期します
メインスレッドの同期リクエストはページをブロックし、ユーザーエクスペリエンスが低いため、いくつかの最新ブラウザーのメインスレッドでの同期リクエストが非推奨になりました。まれに、同期モードを使用したxmlhttprequestsは、非同期モードを使用するよりも適しています。
1.ワーカーで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 !!ワーカーコードを含む:mytask.js
self.onmessage = function(oevent){if(oevent.data === "hello"){var oreq = new xmlhttprequest(); oreq.open( "get"、 "myfile.txt"、false); // synchronous request oreq.send(null); self.postmessage(oreq.responsetext); }};注:労働者が使用されるため、リクエストは実際には非同期です。
同様の方法を使用して、スクリプトがバックグラウンドでサーバーと対話し、特定のコンテンツをプリロードできるようにすることができます。詳細については、Webワーカーの使用をご覧ください
2。同期リクエストを使用する必要がある状況
まれに、同期モードxmlhttprequestリクエストのみを使用できます。たとえば、window.onunloadとwindow.onbeforeunloadイベント処理機能。ページのアンロードイベントハンドラー関数で非同期xmlhttprequestを使用すると、問題が発生します。応答が返されると、ページが存在しなくなり、すべての変数とコールバック関数が破壊されます。結果は、「関数は定義されていない」というエラーのみを引き起こす可能性があります。解決策は、ここで同期モードでリクエストを使用して、リクエストが完了するまでページが閉じられないようにすることです。
window.onbeforeunload = function(){var oreq = new xmlhttprequest(); oreq.open( "get"、 "logout.php?nick =" + escase(myname)、false); //同期要求oreq.send(null); if(oreq.responsetext.trim()!== "exited"); {// "exited"返されたデータリターン "出口は失敗しましたか?出口を手動で実行しますか?"; }};非同期リクエスト
非同期モードを使用する場合、データが完全に要求された場合、指定されたコールバック関数が実行されます。リクエストを実行している間、ブラウザは通常、他のトランザクションを実行できます。
3。例:外部ファイルを読み取る標準メソッドを作成する
一部の要件では、複数の外部ファイルを読み取る必要があります。これは標準関数です。この関数は、非同期リクエストにxmlhttprequestオブジェクトを使用します。また、各ファイルの読み取りが完了した後、異なるコールバック関数を指定することもできます。
関数loadfile(surl、timeout、fcallback / *、パラメーター1でパス1、パラメーター2などの渡されます。 oreq.ontimeout = function(){console.log( "request timeout。"); } 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);}ロードファイル関数の使用:
function showmessage(smsg){alert(smsg + this.responsetext);} loadfile( "message.txt"、200、showmessage、 "new message!// n");行1は関数を定義します。ファイルが読み取られた後、Fcallback関数は、3番目のパラメーターの後にすべてのパラメーターで独自のパラメーターとして呼び出されます。
行3では、タイムアウト設定を使用して、コードが読み取りリクエストの返品データの長期的な実行が実行されないようにします。 xmlhttprequestオブジェクトのタイムアウトプロパティに値をタイムアウトプロパティに割り当てることにより
6番目の動作oneadystatechangeイベントハンドルは、コールバック関数を指定します。関数が実行されるたびに、要求が終了するかどうかをチェックします(要求ステータスは4)。その場合、リクエストが成功しているかどうかを判断します(HTTPステータスは200)。その場合、ページソースコードを出力します。エラーが発生した場合、エラーメッセージが出力されます。
15行目は、3番目のパラメーターがtrueであることを指定し、リクエストを非同期モードで実行する必要があることを示します。
4。例:非同期リクエストを使用して、閉鎖は使用されません。
function switchxhrstate(){switch(this.readystate){case 0:console.log( "open()メソッドはまだ呼び出されていません。");ブレーク;ケース1:Console.log( "send()メソッドはまだ呼び出されていません。");ブレーク;ケース2:console.log( "send()メソッドが呼び出され、応答ヘッダーと応答ステータスが返されました。");ブレーク;ケース3:console.log( "ダウンロード、応答エンティティの一部が取得されました。");ブレーク;ケース4:console.log( "要求が完了!"); this.callback.apply(this、this.arguments); }}; function loadfile(surl、fcallback / *、パラメーター1でパス1、パラメーター2などで渡す。 * /){var oreq = new xmlhttprequest(); oreq.callback = fcallback; oreq.arguments = array.prototype.slice.call(arguments、2); oreq.onedeadystatechange = switchxhrstate; oreq.open( "get"、surl、true); oreq.send(null);}バインドを使用してください:
関数switchxhrstate(fcallback、aarguments){switch(this.readystate){case 0:console.log( "open()メソッドは呼び出されていません。"); break; case 1:console.log( "send()メソッドは呼び出されていません。");ブレーク;ケース2:console.log( "send()メソッドが呼び出され、応答ヘッダーと応答ステータスが返されました。");ブレーク;ケース3:console.log( "部分的な応答エンティティはダウンロード中に取得されました。");ブレーク;ケース4:console.log( "要求が完了!"); fcallback.apply(this、aarguments); }}; function loadfile(surl、fcallback / *、パラメーター1でパス1、パラメーター2などで渡す。 * /){var oreq = new xmlhttprequest(); oreq.onededystatechange = switchxhrstate.bind(oreq、fcallback、array.prototype.slice.call(arguments、2)); oreq.open( "get"、surl、true); oreq.send(null);}上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。