ホームページ >ウェブフロントエンド >jsチュートリアル >JSでのAjax利用スキルの詳細な分析

JSでのAjax利用スキルの詳細な分析

php中世界最好的语言オリジナル: 2018-04-24 15:57:401845ブラウズ

今回は、JS で Ajax を使用するスキルの詳細な分析と、JS で Ajax を使用する際の注意事項についての詳細な分析をお届けします。実際の事例を見てみましょう。

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() メソッドの呼び出しは実際にリクエストを送信するのではなく、リクエストの送信を開始するだけです。

send() を呼び出してリクエストを送信します。

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

イベントハンドラー

プログラムを指定すると、ブラウザーの互換性を確保できます。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("请求成功：" + xhr.status);
}
}
};
xhr.open("get", "index.jsp", true);
xhr.send(null);

応答を受信する前に非同期リクエストをキャンセルできます:

xhr.abort(); HTTP ヘッダー情報

XHR オブジェクトは、リクエストヘッダーと応答ヘッダー情報を操作するためのメソッドを提供します。

デフォルトでは、XHRリクエストを送信する際に、以下のヘッダー情報も送信されます。

•Accept: ブラウザが処理できるコンテンツタイプ

•Accept-Charset: ブラウザが表示できる文字セット

•Accept-Encoding: ブラウザが処理できる圧縮エンコーディング

•Accept-Language:ブラウザの現在の設定言語

•接続: ブラウザとサーバー間の接続のタイプ

•Cookie: 現在のページに設定されているすべての Cookie

•ホスト: リクエストを行っているページが配置されているドメイン

• Referer: リクエストが行われたページの URL

•User-Aent: ブラウザのユーザーエージェント文字列

使用setRequestHeader()可以设置自定义的请求头部信息。必须在调用open()方法之后，且在调用send()之前，调用

setRequestHeader()：

xhr.open("get", "index.jsp", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);

调用getResponseHeader()并传入字段名称，可以取得相应的响应头部信息。getAllResponseHeader()取得包含所有头部信息的长字符串。

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeader();

GET请求

GET用于向服务器查询某些信息。可以将查询字符串参数追加到URL的末尾，查询字符串中的每个参数的名称和值都必须使用encodeURIComponent()编码：

xhr.open("get", "login.jsp?name1=value1&name2=value2", false); 
addURLParam()接收三个参数：要添加参数的URL、参数的名称和参数的值。
var url = "login.jsp";
// 添加参数
url = addURLParam(url, "username", "xxyh");
url = addURLParam(url, "password", "xxyh123");
// 初始化请求
xhr.open("get", url, false);

POST请求

POST请求用于向服务器发送应该被保存的数据。POST请求的主体可以包含非常多的数据，而且格式不限。

初始化请求：

xhr.open("post", "login.jsp", true); 
首先将Content-Type头部信息设置为application/x-www-form-urlencoded,然后建立一个字符串格式。如果需要将页面中的表单数据进行序列化，然后再通过XHR发送到服务器，可以使用serialize()函数来创建这个字符串：
xhr.open("get", "login.jsp", false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));

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

JSでのAjax利用スキルの詳細な分析

関連記事