ホームページ > 記事 > ウェブフロントエンド > Ajax の原理、長所、短所の簡単な分析

Ajax の原理、長所、短所の簡単な分析

韦小宝オリジナル: 2018-01-10 09:56:221505ブラウズ

この記事では、ajax技術の背景と原理、ajaxの名前、ajaxに含まれる技術などから始まり、ajaxの原理、メリット、デメリットを紹介します。この記事では、ajax の原理、メリット、デメリットを詳しく紹介しますので、興味のある方はぜひ一緒に勉強してください

1. ajax テクノロジーの背景

ajax テクノロジーの人気が、 Google。Ajax の人気が生まれたのは、まさに Google Earth、Google サジェスト、Gmail などの ajax テクノロジーの広範な応用のおかげです。これは Microsoft にとっても非常に当惑することになります。なぜなら、Microsoft は 1997 年の時点で ajax の主要なテクノロジを発明しており、1999 年に IE5 がリリースされたとき、XmlHttpRequest オブジェクトのサポートを開始しており、Microsoft はすでに Ajax を使用し始めていたからです。 MSDN Web サイトメニューの一部のアプリケーションなど、一部の製品で使用されています。残念ながら、何らかの理由で、Microsoft は ajax の中核技術を発明した後、その可能性を認識せず、開発、推進することなく、棚上げしてしまいました。私は個人的にこれを非常に奇妙に感じています。なぜなら、Microsoft のリソースと戦略的ビジョンがあれば、Ajax テクノロジの見通しが見えないはずがないからです。唯一の説明は、当時の主要な競合相手である Netscape の消滅により、Microsoft が麻痺して遅くなったということかもしれません。結局のところ、マイクロソフトに対するIBMの戦略的ミスなど、巨人も昼寝をしているのです。現在の競合他社である Google が Ajax において主導的地位を確立したのはこの間違いでした。実際、Ajax テクノロジにおける Google の現在のリーダーシップは、後で Ajax の欠陥について説明するときに説明されます。 Microsoft もこの問題を認識しており、たとえば、独自の ajax フレームワークアトラスを立ち上げ、.NET 2.0 で非同期コールバックを実装するためのインターフェイス、つまり ICallBack も提供しています。インターフェース。。では、なぜ Microsoft は、ajax における遅れについてこれほど神経質になっているのでしょうか?ここで、ajax テクノロジーの背後にある深い意味を分析してみましょう。

2. ajax テクノロジーの重要性

私たちは日常の開発において多かれ少なかれ ajax にさらされたり、適用されたりしていますが、ajax テクノロジーの重要性に関して最も注目しているのは間違いなくユーザーエクスペリエンスの向上。しかし、コンピュータとインターネットの将来の発展傾向を組み合わせると、ajax テクノロジがいくつかの面でこの傾向を代表していることがわかります。なぜこのように言うのですか？コンピューターの出現以来、デスクトップソフトウェアが常に絶対的な支配的な地位を占めてきたことはわかっていますが、インターネットの出現と成功により、これらすべてに微妙な変化が生じています。かなりの数の人が、遅かれ早かれ、データとコンピュータソフトウェアはデスクトップからインターネットに移行すると信じています。言い換えれば、将来のコンピューターは、かさばるハードドライブを放棄し、インターネットから直接データやサービスを取得するようになるかもしれません。私が大学にいたとき、ある教授が授業をしていたときに、そのようなシナリオを想像していたのを覚えています。コンピュータのデスクトップには冗長なソフトウェアやプログラムはなくなり、IE は 1 つだけになります。この日はまだ遠いようで、解決すべき問題はまだたくさんありますが、これは解決策ではないと思います。夢ですが、遅かれ早かれ実現する現実です。そうですね、主な問題は、インターネット接続が不安定であるということです。では、ajax は、あまり問題を解決しません。問題を解決するだけで、問題を隠しているだけで、サーバーとクライアントの間のバッファとして機能し、サービスが中断されていないとユーザーを騙します。正確に言うと、ajax はサーバーからのデータのダウンロード速度を向上させるのではなく、待ち時間のイライラを軽減するだけです。しかし、これだけでも大きな影響と衝撃を与えるのに十分であり、実際にデスクトップソフトウェアに大きな影響を与えました。この点を説明するために例を使用します。Outlook Express と Gmail は典型的なデスクトップソフトウェアであり、後者は ajax によって実装された B/S モードです。実際、後者は徐々に前者を置き換えています。 Gmail は、メールの送受信に関して Outlook Express とほぼ同じ機能を備えており、クライアントプログラムのインストールは必要ありません。これが、Microsoft が Ajax の影響を非常に懸念している主な理由の 1 つであり、つい最近実施した調査では、Microsoft は今後 10 年間の主要な競争相手として Google をみなしていました。もちろん、この変更によってすべてのデスクトップソフトウェアが排除されるわけではありません。既存のブラウザーは、PhotoShop などのデスクトッププログラムのように複雑な画像を処理できません。しかし、その衝撃と影響を無視することはできません。

3. ajaxの名前について

ajaxの正式名称はAsynchronous JavaScript and XMLで、Asynchronousは非同期を意味し、従来のWeb開発で使用される同期方式とは異なります。

同期と非同期について

非同期伝送は文字指向の伝送であり、その単位は文字ですが、同期伝送はビット指向の伝送であり、伝送の際には受信側と送信側のクロックが必要です。一貫性を保つこと。

具体的には、非同期送信ではビットを小さなグループに分割して送信します。一般に、各グループは 8 ビットの文字であり、送信プロセス中に、受信側と送信側のクロックが一致している必要はありません。つまり、送信側は、受信側がいつ到着するかを知らなくても、いつでもこれらのグループを送信できます。最も明白な例の 1 つは、コンピューターのキーボードとホスト間の通信です。キーが押されると、キーボードはユーザーの入力に応じていつでもコードをホストに送信できます。内部ハードウェアは、入力された文字をいつでも受信できる必要があります。これは典型的な非同期送信プロセスです。非同期送信の潜在的な問題は、受信側がデータがいつ到着するかわからないことです。データを検出して応答する前に、最初のビットが通過します。それは、誰かが突然後ろから近づいてきて話しかけてきたときに、反応する時間がなく、最初の数語を聞き逃すようなものです。したがって、情報の各非同期送信は、データが到着したことを受信者に通知するスタートビットで始まり、送信の最後に受信者に応答、受信、データのキャッシュを行う時間を与えます。は、この情報の送信の終了を示します。慣例により、アイドル状態の (データを送信していない) ラインは実際には 2 進数の 1 を表す信号を伝送します。ステップ送信のスタートビットは信号を0にし、それ以外のビットは送信データの情報に応じて信号を変化させます。最後に、ストップビットにより信号が 1 に戻り、次のスタートビットが到着するまで信号が維持されます。たとえば、キーボードの数字「1」は、8 ビット拡張 ASCII エンコードに従って「00110001」を送信します。同時に、8 ビットビットの前にスタートビットとストップビットを追加する必要があります。が続きます。

同時に送信されるビットパケットははるかに大きくなります。各文字を独自のスタートビットとストップビットとともに個別に送信するのではなく、それらを結合して一緒に送信します。これらの組み合わせをデータフレーム、または単にフレームと呼びます。

データフレームの最初の部分には、一連の同期文字が含まれています。これは、前述の開始ビットと同様のビットの一意の組み合わせであり、フレームが到着したことを受信機に通知するために使用されますが、同時に受信機がサンプリング速度はビットの到着速度と一致するため、送信側と受信側は同期します。

フレームの最後の部分はフレーム終了マーカーです。同期文字と同様に、これも前述のストップビットと同様の固有のビット文字列で、次のフレームが始まる前に他に次のデータがないことを示すために使用されます。

同期転送は通常、非同期転送よりもはるかに高速です。受信側は各文字を開始および停止する必要はありません。フレーム同期文字が検出されると、次のデータの到着と同時にそれを受信します。また、同期送信のオーバーヘッドも比較的小さいです。たとえば、一般的なフレームには 500 バイト (つまり 4000 ビット) のデータがあり、その中には 100 ビットのオーバーヘッドしか含まれていない可能性があります。このとき、追加されたビットにより総送信ビット数は 2.5% 増加しますが、これは非同期送信の 25% 増加に比べてはるかに小さいです。データフレーム内の実際のデータビットの数が増加すると、それに応じてオーバーヘッドビットの割合も減少します。ただし、データビットが長くなるほど、データをキャッシュするために必要なバッファが大きくなり、フレームのサイズが制限されます。また、フレームが大きくなるほど、伝送媒体を占有する連続時間が長くなります。極端な場合、これにより他のユーザーが長時間待たされることになります。

この 10 時間の間、水は完全に遮断されませんでしたが、流量は 10 時間後に通常に戻りました。どうやら後者のようです。

4. ajax に含まれるテクノロジー

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

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

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

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

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

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

5. Ajax の原理と XmlHttpRequest オブジェクト

Ajax の原理は、単に XmlHttpRequest オブジェクトを通じてサーバーに非同期リクエストを送信し、サーバーからデータを取得し、JavaScript を使用して DOM を操作し、ページを更新することです。この中で最も重要なステップは、サーバーからリクエストデータを取得することです。このプロセスと原理を理解するには、XMLHttpRequest について理解しておく必要があります。

XMLHttpRequest は ajax のコアメカニズムであり、IE5 で初めて導入され、非同期リクエストをサポートするテクノロジーです。簡単に言うと、JavaScript はユーザーをブロックすることなく、サーバーにリクエストを送信し、応答をタイムリーに処理できます。リフレッシュ効果は得られません。

それでは、XMLHttpRequest から始めて、それがどのように機能するかを見てみましょう。

まず、XMLHttpRequest オブジェクトのプロパティを見てみましょう。

そのプロパティは次のとおりです:

onreadystatechange イベントハンドラー各状態変化によってトリガーされるイベントのプログラム。

responseText は、サーバープロセスから文字列形式のデータを返します。

responseXML サーバープロセスから返された DOM 互換のドキュメントデータオブジェクト。

status サーバーから返される一般的な 404 (見つからない) や 200 (準備完了) などの数値コード

status ステータスコードに付随するテキスト文字列情報

readyState オブジェクトのステータス値

0 (初期化されていない) オブジェクト確立されていますが、まだ初期化されていません (open メソッドがまだ呼び出されていません)

1 (初期化) オブジェクトは作成されましたが、send メソッドが呼び出されていません

2 (データの送信) send メソッドが呼び出されています呼び出しましたが、現在のステータスとhttpヘッダーが不明です

3 (データ送信中) レスポンスとhttpヘッダーが不完全なため、responseBodyとresponseTextでデータの一部を取得する際にエラーが発生します。

4 (完了) この時点で、完全な応答は、responseXml と responseText を通じて取得できます。

ただし、ブラウザー間の違いにより、XMLHttpRequest オブジェクトの作成には異なるメソッドが必要になる場合があります。この違いは主に IE と他のブラウザーの間に反映されます。以下は、XMLHttpRequest オブジェクトを作成する比較的標準的な方法です。

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

上に示すように、この関数はまず XMLHttpRequest の全体的なステータスをチェックし、それが完了している (readyStatus=4)、つまりデータが送信されたことを確認します。次に、サーバーの設定に従ってリクエストのステータスをクエリし、すべての準備ができている場合 (ステータス = 200)、次の必要な操作を実行します。

XmlHttpRequest の 2 つのメソッド、open と send について、open メソッドは次を指定します。

a サーバーに送信されるデータのタイプ、つまり post または get。

b、URL アドレスを要求し、パラメータを渡しました。

c. 送信モード。false は同期を意味し、true は非同期を意味します。デフォルトは true です。非同期通信モード (true) の場合、クライアントはサーバーの応答を待ちません。同期モード (false) の場合、クライアントは他の操作を実行する前にサーバーがメッセージを返すまで待つ必要があります。実際のニーズに応じて同期方法を指定する必要があります。一部のページでは、複数のリクエストが発行されたり、組織化、計画、形成された大規模で高強度のリクエストが発行され、後者のリクエストが前のリクエストを上書きすることがあります。もちろん、同期方法を指定する必要があります。

Sendメソッドはリクエストの送信に使用されます。

XMLHttpRequest のワークフローを理解すると、XMLHttpRequest はサーバーにリクエストを発行するために完全に使用され、その役割はこれに限定されていることがわかりますが、ajax は単なる実装にすぎないため、その役割は ajax 実装全体の鍵となります。 2 リクエストを作成し、リクエストに応答するプロセス。そしてそれは完全にクライアント側のテクノロジーです。 XMLHttpRequest はサーバーとクライアント間の通信の問題を処理するため、非常に重要です。

これで、おそらく ajax の原理を理解できるでしょう。サーバーはプレーンテキストストリームを返すデータインターフェイスと考えることができます。もちろん、このテキストストリームは XML 形式、HTML、JavaScript コード、または単なる文字列にすることができます。このとき、XMLHttpRequest はサーバーにこのページをリクエストし、サーバーはテキスト結果をページに書き込みます。これは通常の Web 開発プロセスと同じですが、違いは、クライアントが結果を直接取得した後ではないことです。ページに表示されますが、最初に JavaScript によって処理されてからページに表示されます。 magicajax など、現在よく使われている多くの ajax コントロールは、DataSet と他のデータ型を返すことができます。本質的には、それらの間に大きな違いはありません。

6. ajax の利点

基本的に、誰もが Ajax がもたらす利点を深く理解しています。ここでいくつかの点について簡単に説明します。

1.更新されず、ページ内でサーバーと通信するため、ユーザーに非常に優れたエクスペリエンスを提供します。

2. 非同期モードを使用して、ユーザーの操作を中断することなくサーバーと通信し、より高速な応答機能を実現します。

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

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

7. ajaxの欠点

ここでは、ajax の欠点に焦点を当てます。なぜなら、私たちのほとんどは、ユーザーエクスペリエンスの向上など、ajax がもたらす利点に通常注目しているからです。 ajax によって引き起こされる欠点は無視されています。

以下で説明する ajax の欠陥はすべて、その固有性によって引き起こされます。

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

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

2. セキュリティの問題

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

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

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

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

6. 一部のハンドヘルドデバイス (携帯電話、PDA など) は現在、ajax を十分にサポートしていません。たとえば、モバイルブラウザーで ajax テクノロジを使用して Web サイトを開く場合、現時点ではサポートされていません。もちろん、この問題は私たちとは何の関係もありません。

8. ajax のいくつかのフレームワーク

現在、私たちが主に使用している ajax フレームワークには、ajax.dll、ajaxpro.dll、magicajax.dll、および Microsoft の atlas フレームワークが含まれます。 Ajax.dll と Ajaxpro.dll の 2 つのフレームワークには大きな違いはありませんが、magicajax.dll はカプセル化においてより強力であるだけです。たとえば、前に述べたように、ajax はすべての文字列を返します。 .magicajax はそれをカプセル化するだけです。しかし、この機能は非常に便利です。たとえば、ページにリストがあり、リスト内のデータが常に変化する場合、magicajax を追加した後の操作は非常に簡単です。更新されたリストコントロールは、magicajax コントロール内に配置され、更新間隔はページロードで定義されます。atlas の原理は、magicajax の原理と似ています。ただし、注意が必要な点は、これらのフレームワークは IE のみをサポートしており、ブラウザの互換性には対応していないことです。これは、逆コンパイルツールでコードを確認することでわかります。

これらのフレームワークに加えて、最も一般的に使用される方法は、xmlHttpRequest オブジェクトを自分で作成することです。この方法は、以前のフレームワークよりも柔軟です。さらに、ここで aspnet2.0 に付属する非同期コールバックインターフェイスについても触れておきたいと思います。ajax と同様に、ローカルの非リフレッシュも実現できますが、その実装は実際には xmlhttprequest オブジェクトのみをサポートしています。もちろん、これはマイクロソフトの競争戦略です。

9.ajaxアプリケーション例

以上内容是转载高人写的资料，下面我将我在项目中实际应用给出个例子，这个例子是这样的：我参与的一个项目的值班安排模块里，选择值班人时，弹出的是个联系人树型TreeView结构图，点开哪个部门，然后部门下的联系人就展开了，原先是这样的，选择好某些联系人后，哪天白天或晚上的值班人就是这样的格式”小A，小B”，但是现在要求这样的格式”小A(部门一)，小B（部门二）”这里假设小A属于部门一，小B属于部门二。由于选择联系人是纯前台javascript的操作的，这里要通过联系人userlist表中的部门id，来取得部门的名称，也就是通过前台取后台的数据，这个在系列五里我也阐述过，下面给出代码：

var param= "date=<%=stryear%>/<%=strmonth%>/" + x <%=stryear%><%=strmonth%>
+"&Type=" + type
+"&Other=" + eval_r("formData.RBOTHER"+x+".value")
+"&ZBRY=" + eval_r("formData.RBZBRY"+x+".value")
+"&ZBRYID=" + eval_r("formData.RBZBRYID"+x+".value")
+"&Demo=" + eval_r("formData.RBDEMO"+x+".value")
+"&id=" + eval_r("formData.RBZBID"+x+".value");//传递的参数
var retVal = window.showModalDialog( "chooseUsers.asp?"+param,this, "dialogWidth=280px; dialogHeight=500px; help=no; status=no; scroll=no; resizable=yes; ");
//弹出对话框取得联系人
//ajax调用服务器端方法取到部门名称
if(retVal [&#39;userIds&#39;]!=""&& retVal [&#39;userIds&#39;]!=null)//联系人id集合格式1，2，3，4
{
var PostUrl=" ../../../Application/CallBoard/GetDepartMentByUid.aspx?userIDs="+objRetVal[&#39;userIds&#39;]+"";//后台处理页面url
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//新建一个xmlhttprequest对象
xmlHttp.open("POST", PostUrl, false);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("");
var builder= xmlHttp.responseText; //将值传递回来,拼成了新格式
eval_r("formData.RBZBRY"+x+".value = &#39;" +builder+"&#39;");// formData.RBZBRY为一文本控件,将显示值班人员新格式
}
}

以上所述是小编给大家介绍的Ajax的原理及优缺点，希望对大家有所帮助！

Ajax の原理、長所、短所の簡単な分析

関連記事