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

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

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

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

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

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

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

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

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

4. AJAX の利点

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

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

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

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

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

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

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

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

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

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

5. ajax の欠点

<1>.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 アドレスの下に表示される内容と異なる可能性があります。これは、リソースの配置の本来の目的に反します。

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

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

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

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

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

(1). 注意点

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

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

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

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

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

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

(3)。 Ajax はシナリオ

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

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

7.ajaxに含まれる技術

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

上記のテクノロジーのうち、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();
}

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

JavaScript DOM の要素の完全な概要

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

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