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

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

php中世界最好的语言
リリース: 2018-04-24 15:57:40
オリジナル
1841 人が閲覧しました

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

Ajax は新しい

プログラミング言語 ではなく、既存の標準を使用する新しい方法です。 AJAX は、ページ全体をリロードせずにサーバーとデータを交換できます。この非同期対話方式により、ユーザーはクリック後にページを更新せずに新しいデータを取得できます。

XMLHttpRequest オブジェクト

Ajax の中核は XMLHttpRequest オブジェクト (XHR) です。 XHR は、サーバーにリクエストを送信し、サーバーの応答を解析するためのインターフェイスを提供します。サーバーから新しいデータを非同期的に取得する機能。

ブラウザでオブジェクトを作成する

(IE7以降のバージョンのみ対応):

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

イベント ハンドラー

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

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

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中文网其它相关文章!

推荐阅读:

jQuery+AJAX实现调用后台步骤详解

JQuery调用Ajax加载图片

以上がJSでのAjax利用スキルの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート