ajax にはどのようなテクノロジーが含まれていますか? ajax テクノロジーの重要性の概要 (例を含む)

この記事では主に ajax の原因と結果、そして ajax の利点と欠点をいくつか紹介します

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 の現在のリーダーシップは Microsoft の手の届かないところにあります。これについては、後で Ajax の欠陥について説明するときに説明します。現在、Microsoft はこの問題を認識しているため、ajax 分野でも追いつき始めています。たとえば、独自の ajax フレームワーク アトラスを立ち上げ、.NET 2.0 で非同期コールバックを実装するためのインターフェイス、つまり ICallBack インターフェイスも提供しました。 。では、なぜ Microsoft は ajax における遅れについてこれほど神経質になっているのでしょうか?ここで、ajax テクノロジーの背後にある深い意味を分析してみましょう。

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

私たちは日常の開発において、多かれ少なかれ ajax にさらされたり、適用されたりしていますが、ajax テクノロジーの重要性に関して最も注目しているのは間違いありません。ユーザーエクスペリエンスの向上。しかし、コンピューターとインターネットの将来の発展傾向を組み合わせると、ajax テクノロジーがいくつかの面でこの傾向を代表していることがわかります。なぜこのように言うのですか？コンピューターの出現以来、デスクトップ ソフトウェアが常に絶対的な支配的な地位を占めてきたことはわかっていますが、インターネットの出現と成功により、これらすべてに微妙な変化が生じています。かなりの数の人が、遅かれ早かれ、データとコンピュータ ソフトウェアはデスクトップからインターネットに移行すると信じています。言い換えれば、将来のコンピューターは、かさばるハードドライブを放棄し、インターネットから直接データやサービスを取得するようになるかもしれません。私が大学にいたとき、ある教授が授業をしていたときに、そのようなシナリオを想像していたのを覚えています。コンピュータのデスクトップには冗長なソフトウェアやプログラムはなくなりますが、IE は 1 つだけになります。この日はまだ遠いようで、解決すべき問題はまだたくさんありますが、これは解決策ではないと思います。夢ですが、遅かれ早かれ実現する現実です。そうですね、主な問題は、インターネット接続が不安定であるということです。では、ajax は、あまり問題を解決しません。問題を解決するだけで、問題を隠しているだけで、サーバーとクライアントの間のバッファとして機能し、サービスが中断されていないとユーザーを騙します。正確に言うと、ajax はサーバーからのデータのダウンロード速度を向上させるのではなく、待ち時間のイライラを軽減するだけです。しかし、これだけでも大きな影響と衝撃を与えるのに十分であり、実際にデスクトップソフトウェアに大きな影響を与えました。 Outlook を例にして説明してみましょう。 Express と Gmail ですが、前者は典型的なデスクトップ ソフトウェアであり、後者は ajax によって実装された B/S モードです。実際、後者は電子メールの送受信において 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 時間の間、水は完全に遮断されませんでしたが、流量は以前よりも大幅に減少しました。 では、あなたであれば、どの方法を選択しますか?どうやら後者のようです。

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 は、IE5 で初めて導入された、ajax のコアメカニズムであり、非同期リクエストをサポートするテクノロジーです。簡単に言うと、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 によって引き起こされる欠点は無視されています。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト

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 アプリケーションの例

上記の内容は、専門家によって作成された資料の再版です。以下に、プロジェクトでの実際のアプリケーションの例を示します。私が参加したのは、担当者を選択すると、連絡先ツリーのツリービュー構造図が表示され、どの部門をクリックすると、その部門の下の連絡先が展開されるようになっていました。昼夜問わず夜勤者は「リトルA、リトルB」の形式でしたが、現在は「リトルA（部門1）、リトルB（部門2）」の形式であることが求められていますリトル A は部門 1 に属し、リトル B は部門 2 に所属すると想定されます。連絡先の選択は純粋にフロントエンドの JavaScript 操作であるため、ここでは連絡先ユーザーリスト テーブルの部門 ID を通じて部門名を取得する必要があります。つまり、フロントエンドを通じてバックエンド データを取得することも説明しました。これはシリーズ 5 の以下のコードを入力してください:

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为一文本控件,将显示值班人员新格式
}
}

本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。

以上がajax にはどのようなテクノロジーが含まれていますか? ajax テクノロジーの重要性の概要 (例を含む)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。