今回は、JS で Ajax を使用するスキルの詳細な分析と、JS で Ajax を使用する際の 注意事項 についての詳細な分析をお届けします。実際の事例を見てみましょう。
Ajax は新しいXMLHttpRequest オブジェクト
Ajax の中核は XMLHttpRequest オブジェクト (XHR) です。 XHR は、サーバーにリクエストを送信し、サーバーの応答を解析するためのインターフェイスを提供します。サーバーから新しいデータを非同期的に取得する機能。 ブラウザでオブジェクトを作成する(IE7以降のバージョンのみ対応): var xhr = new XMLHttpRequest();
XHRの使い方 最初に紹介するのは、open()メソッドです。 3 つのパラメータを受け取ります:
• 送信するリクエストのタイプ (POST、GET など)
• リクエストの URL
• リクエストを非同期に送信するかどうかを示すブール値
open の呼び出しの例():xhr.open("get", "index.jsp", false);
index.jsp の GET リクエスト。 URL は、コードが実行されている現在のページに対する相対的なものです。open() メソッドの呼び出しは実際にリクエストを送信するのではなく、リクエストの送信を開始するだけです。xhr.send(null);
send() はリクエスト本体として送信されるデータであるパラメータを受け取ります。リクエスト本文を通じてデータを送信する必要がない場合は、null を渡す必要があります。
対応するデータは、XHR オブジェクトの関連する属性に入力されます:
•responseText: 応答本文として返されるテキスト
•responseXML: 応答のコンテンツ タイプは、「text/xml」または「application/」です。 xml"
• status: レスポンスの HTTP ステータス
• statusText: HTTP ステータスの説明
レスポンスを受信したら、まず status 属性をチェックして、レスポンスが返されたことを確認します。一般的に、レスポンスとして 200 が使用されます。成功の兆し。ステータス コード 304 は、リソースが変更されておらず、ブラウザにキャッシュされたバージョンを直接使用できることを示します。
適切な応答を受信するには、両方のステータス コードを次のように検出する必要があります:
xhr.open("get", "index.jsp", false); xhr.send(null); if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); }
readyState 属性を検出することにより、要求/応答プロセスの現在アクティブなステージを判断できます。
•0: 初期化されていません。 open()メソッドが呼び出されませんでした
•1:開始。 open()メソッドは呼び出されていますが、send()メソッドは呼び出されていません
•2:送信。 send() メソッドが呼び出されていますが、応答が受信されていません
•3: 受信しました。部分的なデータを受信しました
•4:完了。すべてのデータが受信されており、readyState 属性の値が変更されるたびに、readystatechange イベントがトリガーされます。 open() を呼び出す前に onreadystatechange
イベント ハンドラー