AJAXの仕組みとメリット・デメリットを詳しく解説

この記事では、ajax の動作原理とその関連内容について説明します。

1.AJAX は「Asynchronous JavaScript and XML」(Asynchronous JavaScript and XML) の略で、インタラクティブな Web アプリケーションを作成するための Web 開発技術です。

XHTML+CSSを使用してプレゼンテーションを標準化します。

XMLとXSLTを使用してWebサーバーとの非同期データ通信を行います。

JavaScriptを使用してドキュメントを操作します。オブジェクト モデル 動的な表示と対話を実行します。

JavaScript を使用してすべてのデータをバインドし、処理します。

2. 従来の Web アプリケーションの対話では、ユーザーがサーバーに対して HTTP リクエストをトリガーし、サーバーがクライアントから送信されたリクエストを処理するたびに、クライアントは待機することしかできません。アイドル状態であり、たとえそれが小規模なインタラクションであり、サーバーから単純なデータを取得するだけでよい場合でも、完全な HTML ページが返されるため、ユーザーは毎回ページ全体を再読するために時間と帯域幅を無駄にすることになります。 。このアプローチでは、多くの帯域幅が無駄になります。アプリケーションの対話ごとにサーバーにリクエストを送信する必要があるため、アプリケーションの応答時間はサーバーの応答時間に依存します。その結果、ユーザー インターフェイスの応答性はネイティブ アプリよりもはるかに低くなります。

これとは異なり、AJAX アプリケーションは、SOAP またはその他の XML ベースの Web サービス インターフェイスを使用し、サーバーからの応答を処理するために、必要なデータのみをサーバーに送信および取得することができます。サーバーとブラウザーの間で交換されるデータが大幅に減少するため、結果としてアプリケーションの応答性が向上します。同時に、リクエストを発行したクライアント マシン上で多くの処理作業を完了できるため、Web サーバーの処理時間も短縮されます。

3. AJAX の動作原理: Ajax の動作原理は、ユーザーとサーバーの間に中間層 (AJAX エンジン) を追加し、ユーザーの操作とサーバーの応答を非同期にすることと同じです。すべてのユーザー リクエストがサーバーに送信されるわけではありません。一部のデータ検証とデータ処理は、サーバーから新しいデータを読み取る必要があると判断された場合にのみ、Ajax エンジンによってサーバーに送信されます。その代わりに。

Ajax のコアは、JavaScript、XMLHTTPRequest、および DOM オブジェクトで構成され、XmlHttpRequest オブジェクトを通じてサーバーに非同期リクエストを送信し、サーバーからデータを取得し、JavaScript を使用して DOM を操作し、ページを更新します。この中で最も重要なステップは、サーバーからリクエスト データを取得することです。これらのオブジェクトについて学びましょう。

(1).XMLHTTPRequest オブジェクト

Ajax の最大の特徴の 1 つは、ページを更新せずにサーバーにデータを送信または読み書きできることです (更新せずにページを更新することとも呼ばれます)。この機能は主に次のような利点があります。 XMLHTTP コンポーネント XMLHTTPRequest オブジェクト。

XMLHttpRequest オブジェクトのメソッドの説明:

abort(): 現在のリクエストを停止します

getAllResponseHeaders(): HTTP リクエストのすべての応答ヘッダーをキー/値のペアとして返します

getResponseHeader("header"): の文字列を返します指定されたヘッダーの値

open("method","URL",[asyncFlag],["userName"],["password"]): サーバーへの呼び出しを確立します。メソッド パラメータには GET、POST、または PUT を指定できます。 url パラメータには、相対 URL または絶対 URL を指定できます。このメソッドには、非同期かどうか、ユーザー名、パスワードの 3 つのオプションのパラメーターも含まれています

send(content): サーバーにリクエストを送信します

setRequestHeader("header", "value"): 指定されたヘッダーを指定された値に設定します。 open() はヘッダーを設定する前に呼び出す必要があります。ヘッダーを設定し、リクエストとともに送信します ('post' メソッドが必要です)

XMLHttpRequest オブジェクト属性の説明:

onreadystatechange: 状態変更のイベント トリガー 通常、このイベント ハンドラーは状態が変化するたびにトリガーされます。 JavaScript 関数

readyState: リクエストのステータス。可能な値は 5 つあります: 0 = 未初期化、オブジェクトは作成されましたが、初期化されていません (open メソッドが呼び出されていません)、1 = ロード中、オブジェクトは作成されており、send メソッドが呼び出されていません。 、2 = ロードされ、send メソッドが呼び出されました。ただし、現在のステータスと http ヘッダーは不明です。3 = 対話中に一部のデータが受信されました。応答と http ヘッダーが不完全であるため、一部のデータを取得するときにエラーが発生します。 4 = Completed、データの受信が完了し、responseXml と responseText を通じて完全な応答データを取得できます。

responseText: サーバーの応答、返されたデータのテキスト。

responseXML: サーバーの応答は、DOM 互換の XML ドキュメント オブジェクトのデータを返します。このオブジェクトは DOM オブジェクトに解析できます。

responseBody: サーバーから返された件名 (非テキスト形式)

responseStream: サーバーから返されたデータ ストリーム

status: サーバーの HTTP ステータス コード (例: 404 = "ファイルが見つかりません") 、200 = "成功" など)

statusText: サーバーから返されたステータス テキスト情報、HTTP ステータス コードの対応するテキスト (OK または Not Found (見つからない) など)

Ajax エンジンは実際には、ユーザーリクエストの処理、サーバーの読み取りと書き込み、DOM コンテンツの変更に使用される比較的複雑な JavaScript アプリケーションです。 JavaScript の Ajax エンジンは情報を読み取り、DOM を対話的に書き換えます。これにより、Web ページをシームレスに再構築できます。これは、JavaScript と DOM メソッドで広く使用されているものです。しかし、Web ページを真に動的にするには、内部の対話だけでなく、外部からのデータ取得も必要になります。以前は、ユーザーが DOM を通じてデータを入力したり、Web ページのコンテンツを変更したりできましたが、現在は XMLHTTPRequest によって許可されています。ページをリロードせずにサーバー上のデータを読み書きできるため、ユーザー入力が最小限に抑えられます。

Ajax は WEB のインターフェイスとアプリケーションを分離します (データとプレゼンテーションを分離するとも言えます)。以前は、データとプレゼンテーションの分離は分業に役立ちました。担当者によるページの変更による WEB アプリケーションのエラーがなくなり、効率が向上し、現在の出版システムにより適しています。また、サーバーが負担していた以前の作業の一部をクライアントに転送することもでき、これはクライアントのアイドル処理能力に有益です。

4. AJAX の利点

。データを更新する必要がありません。

AJAX の最大の利点は、ページ全体を更新せずにサーバーと通信してデータを維持できることです。これにより、Web アプリケーションはユーザーの操作により迅速に応答できるようになり、変更されていない情報がネットワーク上に送信されることがなくなり、ユーザーの待ち時間が短縮され、非常に優れたユーザー エクスペリエンスが実現されます。

2cc198a1d5eb0d3eb508d858c9f5cbdb。サーバーと非同期で通信します。

AJAX は、ユーザーの操作を中断することなく、非同期方式を使用してサーバーと通信し、より高速な応答機能を備えています。ブラウザとサーバー間の通信を最適化し、ネットワーク上の不要なデータ送信、時間、データ トラフィックを削減します。

。フロントエンドとバックエンドの負荷分散。

AJAX は、クライアントのアイドル容量を処理に使用して、これまでサーバーに負担がかかっていた作業の一部をクライアントに転送し、サーバーと帯域幅の負担を軽減し、スペースとブロードバンドのレンタルコストを節約できます。また、サーバーの負荷を軽減するために、AJAX の原則は「オンデマンドでデータを取得する」ことで、冗長なリクエストと応答によるサーバーの負荷を最小限に抑え、サイトのパフォーマンスを向上させることができます。

。標準に基づいて広くサポートされています。

AJAX は、標準化され広くサポートされているテクノロジーに基づいています。ブラウザーのプラグインやアプレットをダウンロードする必要はありませんが、お客様がブラウザーで JavaScript を実行できるようにする必要があります。 Ajax が成熟するにつれて、Ajax の使用を簡素化するいくつかのプログラム ライブラリも登場しました。同様に、JavaScript をサポートしていないユーザーに代替機能を提供する別の支援プログラミング テクノロジが登場しました。

. インターフェースとアプリケーションを分離します。

AjaxはWEB上のインターフェースとアプリケーションを分離（データとプレゼンテーションの分離とも言えます）し、分業と連携を促進し、非技術者によるページ変更によるWEBアプリケーションのエラーを軽減し、Webアプリケーションの改善を図ります。効率が高く、今日の出版システムにより適しています。

5. ajax の欠点

f35d6e602fd7d0f0edfa6f7d103c1b57.AJAX は、ブラウザのメカニズムを破壊する、戻る機能と履歴機能を無効にします。

動的に更新されるページの場合、ブラウザーは履歴に静的なページしか記憶できないため、ユーザーは前のページの状態に戻ることができません。完全に読み取られたページと動的に変更されたページの違いは非常に微妙です。ユーザーは多くの場合、「戻る」ボタンをクリックすると前の操作がキャンセルされると期待しますが、Ajax アプリケーションではこれは不可能です。

「戻る」ボタンは標準的な Web サイトの重要な機能ですが、js ではうまく機能しません。ユーザーは前に戻って前の操作をキャンセルしたいことが多いため、これは Ajax によって引き起こされる深刻な問題です。では、この問題に対する解決策はあるのでしょうか?答えは「はい」です。Gmail で使用されている Ajax テクノロジーがこの問題を解決することは知っていますが、これは Ajax のメカニズムを変更するものではありません。これを行うには、非表示の IFRAME を作成または使用して、ユーザーが履歴にアクセスするために戻るボタンをクリックしたときにページ上の変更を再現します。 (たとえば、ユーザーが Google マップでクリックして戻ると、非表示の IFRAME が検索され、検索結果が Ajax 要素に反映され、アプリケーションの状態がその時点の状態に復元されます。)

ただし、この問題は発生しますが、解決できるとしても、開発コストは非常に高くつき、Ajax フレームワークで必要とされる迅速な開発とは相反します。これは Ajax が原因で発生する非常に深刻な問題です。

これに関連する点は、動的なページ更新を使用すると、ユーザーが特定の状態をお気に入りに保存することが難しくなるということです。この問題に対する解決策も登場しており、そのほとんどは URL フラグメント識別子 (URL の # の後の部分、アンカーと呼ばれることが多い) を使用して追跡し、ユーザーが指定されたアプリケーションの状態に戻ることを可能にします。 (多くのブラウザでは、JavaScript でアンカーを動的に更新できるため、Ajax アプリケーションは表示されたコンテンツと同時にアンカーを更新できます。) これらのソリューションは、「戻る」ボタンをサポートしていないことに関する多くの議論も解決します。

.AJAX セキュリティの問題。

AJAX テクノロジーは、ユーザーに優れたユーザー エクスペリエンスをもたらすだけでなく、IT 企業に新たなセキュリティの脅威ももたらします。これは、企業データの直接チャネルを確立するようなものです。これにより、開発者は以前よりも多くのデータとサーバー ロジックを誤って公開してしまう可能性があります。 Ajax ロジックはクライアント側のセキュリティ スキャン テクノロジから隠蔽できるため、ハッカーがリモート サーバーから新たな攻撃を作成できるようになります。 Ajax は、クロスサイト スクリプティング攻撃、SQL インジェクション攻撃、資格情報ベースのセキュリティ脆弱性など、いくつかの既知のセキュリティ上の弱点を回避することも困難です。

。検索エンジンのサポートが弱い。

検索エンジンのサポートは比較的弱いです。 AJAX を不適切に使用すると、ネットワーク データ トラフィックが増加し、システム全体のパフォーマンスが低下します。

. プログラムの例外処理メカニズムを破棄します。

少なくとも現在の観点からすると、Ajax.dll や Ajaxpro.dll などの Ajax フレームワークは、プログラムの例外メカニズムを破壊します。この問題に関しては、私も開発過程で遭遇したことがありますが、調べてみるとネット上には関連する紹介がほとんどありません。その後、実験を行い、Ajax と従来のフォーム送信モードを使用してデータの一部を削除しました...これにより、デバッグに大きな困難が生じました。

。URL とリソースの配置の本来の意図に違反します。

たとえば、URL アドレスを指定した場合、Ajax テクノロジーが使用されている場合、その URL アドレスの下に表示される内容は、この URL アドレスの下に表示される内容と異なる可能性があります。これは、リソースの配置の本来の目的に反します。

efbfa0de8737dc86eae413541a49df20.AJAX はモバイル デバイスを十分にサポートしていません。

一部のハンドヘルド デバイス (携帯電話、PDA など) は現在、Ajax をあまりサポートしていません。たとえば、モバイル ブラウザーで Ajax テクノロジを使用している Web サイトを開いた場合、現時点では Ajax をサポートしていません。

40107655ec554331c1c6222ab67a141c。クライアントが太すぎるため、クライアント コードが多すぎると開発コストが発生します。

記述が複雑でエラーが発生しやすい; 冗長なコードが多い (レイヤーに js ファイルを含めるのは AJAX の一般的な問題であり、これまでの多くのサーバー側コードが現在クライアントに配置されています)。 Web の本来の標準を破壊します。

6. AJAX の注意点と適用できるシナリオと適用できないシナリオ

(1). 注意点

Ajax を開発する場合、ユーザーがリクエストを行ってからサーバーが応答を送信するまでの間隔が必要になります。慎重に検討してください。ユーザーに明確な応答を与えなかったり、データを適切に事前に読み取っていなかったり、XMLHttpRequest を不適切に処理したりすると、ユーザーは見たくない、理解できない遅延を経験することになります。一般的な解決策は、視覚的なコンポーネントを使用して、システムがバックグラウンド操作を実行し、データとコンテンツを読み取っていることをユーザーに伝えることです。

(2). Ajax に適用できるシナリオ

。ディープ ツリー ナビゲーション

。 ;. 投票、はい/いいえなどの重要でないシナリオ

。関連データのフィルタリングと操作のシナリオ

。通常のテキスト入力プロンプトおよび自動補完シナリオ

(3)。 Ajax はシナリオ

には適していません。一部の単純なフォーム

。大量のテキストを置換します。 5>.プレゼンテーションの操作

7.ajaxに含まれる技術

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

1. CSSとXHTMLを使用して表現します。

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

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

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

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

例:

function    CreateXmlHttp() {
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest) {
xmlhttp =newXmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject) {
try{
xmlhttp =newActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
try{
xmlhttp =newActiveXObject("msxml2.XMLHTTP");
}
catch(ex) { }
}
}
}
functionUstbwuyi() {
vardata = document.getElementById("username").value;
CreateXmlHttp();
if(!xmlhttp) {
alert("创建xmlhttp对象异常！");
returnfalse;
}
xmlhttp.open("POST", url,false);
xmlhttp.onreadystatechange =function() {
if(xmlhttp.readyState == 4) {
document.getElementById("user1").innerHTML = "数据正在加载...";
if(xmlhttp.status == 200) {
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}

この記事では、ajax の動作原理とその関連使用法について説明します。さらに関連する知識については、PHP 中国語 Web サイトを参照してください。

関連する推奨事項:

JS で要素を取得するためのさまざまな方法とその動的および静的ディスカッション

JavaScript DOM の要素の完全な概要

jquery の遅延読み込みと先頭に戻る

以上がAJAXの仕組みとメリット・デメリットを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。