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

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

{
"name":"tsrot",
"age":24
}

3. Ajax アプリケーションシナリオ

シナリオ 1. データ検証

シナリオ2. オンデマンドでデータを取得

シナリオ 3. ページを自動的に更新します

4. ajax の長所と短所

利点:

1. ページを更新しない、優れたユーザー エクスペリエンス。

2. 非同期通信、より高速な応答機能。

3. 冗長なリクエストを削減し、サーバーの負担を軽減します

4. 標準化され広くサポートされているテクノロジーに基づいているため、プラグインやアプレットをダウンロードする必要はありません。

欠点:

1. Ajax は「戻る」ボタンを無効にし、ブラウザーの「戻る」メカニズムを破壊します。

2. 安全上の問題があります。

3. 検索エンジンのサポートは比較的弱いです。

4. プログラムの例外メカニズムを破壊しました。

5. URLから直接アクセスすることはできません。