AJAXの動作原理、メリット、デメリットを詳しく解説-PHP开发-php.cn

AJAXの動作原理、メリット、デメリットを詳しく解説

高洛峰

リリース： 2016-12-10 09:34:29

オリジナル

1041 人が閲覧しました

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 リクエスト:

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

ログイン後にコピー

POST リクエスト:

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

ログイン後にコピー

2 番目のパラメータは、リクエストのターゲットとして送信される URL です。

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

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

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: リクエストデータを受信したら、リクエストが完了したことを意味します。

ステータス属性:

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