ajaxの仕組みを詳しく解説-jsチュートリアル-php.cn

ajaxの仕組みを詳しく解説

php中世界最好的语言

リリース： 2018-04-03 10:06:28

オリジナル

1438 人が閲覧しました

今回は、ajax の動作原理について詳しく説明します。ajax を使用する際の注意事項は何ですか?実際の事例を見てみましょう。

AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。 AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

1. ajax に含まれる技術

ajax が新しい技術ではなく、いくつかの独自の技術を組み合わせたものであることは誰もが知っています。以下の技術で構成されています。

CSSとXHTMLを使用して表現されます。

インタラクションと動的な表示には DOM モデルを使用します。

XMLHttpRequestを使用してサーバーと非同期通信します。

JavaScriptを使用してバインドして呼び出します。

上記のテクノロジーのうち、XmlHttpRequest オブジェクトを除く他のテクノロジーはすべて Web 標準に基づいており、XMLHttpRequest はまだ W3C に採用されていませんが、ほぼすべての主要なブラウザーですでに事実上の標準になっています。現在それをサポートしています。

2. ajaxの作り方

Ajaxの原理は単純に、XmlHttpRequestオブジェクトを通じてサーバーに非同期リクエストを送信し、サーバーからデータを取得し、JavaScriptを使用してDOMを操作して更新するだけです。ページ。この中で最も重要なステップは、サーバーからリクエストデータを取得することです。 ajax をネイティブに作成するには、次の 4 つの手順に分けることができます。

1. XMLHttpRequest オブジェクトを作成します

最新のブラウザ (IE7 以降、Firefox、Chrome、Safari、Opera) にはすべて XMLHttpRequest オブジェクトが組み込まれています。

XMLHttpRequest オブジェクトを作成するための構文:

var xhr = new XMLHttpRequest();

ログイン後にコピー

Internet Explorer の古いバージョン (IE5 および IE6) は ActiveX オブジェクトを使用します:

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

ログイン後にコピー

IE5 および IE6 を含むすべての最新のブラウザーで動作するには、ブラウザーが XMLHttpRequest オブジェクトをサポートしているかどうかを確認してください。サポートされている場合は、XMLHttpRequest オブジェクトを作成します。サポートされていない場合は、ActiveXObject を作成します:

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

ログイン後にコピー

2. リクエストを準備します

3 つのパラメータを受け入れて XMLHttpRequest オブジェクトを初期化します:

xhr.open(method,url,async);

ログイン後にコピー

最初のパラメータは

リクエストタイプの文字列を表し、その値はGET または POST になります。

GET request:

xhr.open("GET",demo.php?name=tsrot&age=24,true);

ログイン後にコピー

POST request:

xhr.open("POST",demo.php,true);

ログイン後にコピー

2 番目のパラメータは、リクエストの送信先となる URL です。

3 番目のパラメーターは true または false で、リクエストが非同期モードで発行されるか同期モードで発行されるかを示します。 (デフォルトは true ですが、一般に false は推奨されません)

false: 同期モードで発行されたリクエストは、サーバーが応答を受け取るまですべての JavaScript コードの実行を一時停止します。ネットワークへの接続時またはファイルのダウンロード時にブラウザーが失敗した場合、ページは常にハングします。

true: リクエストオブジェクトがデータを送受信している間、ブラウザはページの読み込みを続けて他の JavaScript コードを実行できます

3. リクエストを送信します

xhr.send();

通常、Ajax によって送信されるパラメーターのほとんどは単純な文字列です。GET メソッドを使用して、送信するパラメーターを open メソッドの url パラメーターに直接書き込むことができます。このとき、send メソッドのパラメーターは次のとおりです。 null または空。

GET リクエスト:

xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);

ログイン後にコピー

POST リクエスト:

HTML フォームのようにデータを POST する必要がある場合は、setRequestHeader() を使用して HTTP ヘッダーを追加してください。次に、send() メソッドで送信するデータを指定します:

xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("name="+userName+"&age="+userAge);

ログイン後にコピー

4. 応答

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}

ログイン後にコピー

onreadystatechange イベントの処理:

リクエストがサーバーに送信されるとき、応答ベースの処理を実行する必要があります。タスク。 readyState が変化するたびに、onreadystatechange イベントがトリガーされます。

readyState プロパティ:

0: オブジェクトは

作成されましたが、open() メソッドはまだ呼び出されていません。 1: open() メソッドが呼び出されていますが、リクエストはまだ送信されていません。

2：请求已经发送，标题和状态已经收到，并可用。

3：接收到来自服务器的响应。

4：接收完请求数据，表示已经完成请求。

status属性：

200:”OK”

404: 未找到页面

responseText：获得字符串形式的响应数据

responseXML：获得 XML 形式的响应数据

返回值一般为json字符串，可以用JSON.parse(xhr.responseText)转化为JSON对象。

5、完整例子

demo.html

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
};
xhr.open("GET","./data.json",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText).name);
}
}

ログイン後にコピー

data.json