この記事では、主に ajax の概要と、ajax の応用原理などを紹介します。それでは、この記事を一緒に見ていきましょう
この記事を書いているときに、以前に AJAX テクノロジに関するエッセイを書きましたが、関係する側面は非常に狭く、AJAX テクノロジの背景、原理、長所と短所については、null についてはほとんど触れられませんでした。この記事を書いた背景には、企業が社内プログラマー向けのトレーニングを提供する必要があるということがあります。プロジェクトマネージャーが私を見つけて、トレーニングのテーマについて尋ねました。Javascript、CSS、その他の WEB 開発テクノロジーについては以前に説明したことを考慮して、AJAX についてより体系的なトレーニングを行うことにしたため、この記事は実際にはトレーニング資料です。
この記事では、AJAX テクノロジーを 10 の側面から体系的に説明します。
1. ajax 技術の背景
ajax 技術の普及は、まさに google Earth、google サジェスト、gmail などの ajax 技術の普及によるものであることは否定できません。 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 モードです。実際、後者は徐々に前者を置き換えています。 Gmail は、メールの送受信に関して Outlook Express とほぼ同じ機能を備えており、クライアント プログラムのインストールは必要ありません。これが、Microsoft が Ajax の影響を非常に懸念している主な理由の 1 つであり、つい最近実施した調査では、Microsoft は今後 10 年間の主要な競争相手として Google をみなしていました。もちろん、この変更によってすべてのデスクトップ ソフトウェアが排除されるわけではありません。既存のブラウザーは、PhotoShop などのデスクトップ プログラムのように複雑な画像を処理できません。しかし、その影響と影響を無視することはできません。
3. ajaxの名前について
ajaxの正式名称はAsynchronous JavaScript and XMLであり、このうちAsynchronousとは非同期という意味で、従来のWeb開発で使われる同期方式とは異なります。
4. 同期と非同期について
非同期送信はキャラクタ指向の送信であり、同期送信はビット指向の送信であり、その単位はフレームです。送信側の時計は一貫した状態に保たれます。
具体的には、非同期送信ではビットを小さなグループに分割して送信します。一般に、各グループは 8 ビットの文字であり、送信プロセス中に、受信側と送信側のクロックが一致している必要はありません。つまり、送信側は、受信側がいつ到着するかを知らなくても、いつでもこれらのグループを送信できます。最も明白な例の 1 つは、コンピューターのキーボードとホスト間の通信です。キーが押されると、キーボードはユーザーの入力に応じていつでもコードをホストに送信できます。内部ハードウェアは、入力された文字をいつでも受信できる必要があります。これは典型的な非同期送信プロセスです。非同期送信の潜在的な問題は、受信側がデータがいつ到着するかわからないことです。データを検出して応答する前に、最初のビットが通過します。それは、誰かが突然後ろから近づいてきて話しかけてきたときに、反応する時間がなく、最初の数語を聞き逃すようなものです。したがって、情報の各非同期送信は、データが到着したことを受信者に通知するスタート ビットで始まり、送信の最後に受信者に応答、受信、キャッシュする時間を与えます。ストップ ビットは終了を示します。この情報伝達のこと。慣例により、アイドル状態の (データを送信していない) ラインは実際には 2 進数の 1 を表す信号を伝送します。ステップ送信のスタートビットは信号を0にし、それ以外のビットは送信データの情報に応じて信号を変化させます。最後に、ストップ ビットにより信号が 1 に戻り、次のスタート ビットが到着するまで信号が維持されます。たとえば、キーボードの数字「1」は、8 ビット拡張 ASCII エンコードに従って「00110001」を送信します。同時に、8 ビット ビットの前にスタート ビットとストップ ビットを追加する必要があります。が続きます。
同時に送信されるビットパケットははるかに大きくなります。各文字を独自のスタート ビットとストップ ビットとともに個別に送信するのではなく、それらを結合して一緒に送信します。これらの組み合わせをデータ フレーム、または単にフレームと呼びます。
データフレームの最初の部分には、一連の同期文字が含まれています。これは、前述の開始ビットと同様のビットの一意の組み合わせであり、フレームが到着したことを受信機に通知するために使用されますが、受信機のサンプリングも保証します。速度はビットの到着速度と一致しており、送信側と受信側の両方を同期させることができます。
フレームの最後の部分はフレーム終了マーカーです。同期文字と同様に、これも前述のストップ ビットと同様の固有のビット文字列で、次のフレームが始まる前に他に次のデータがないことを示すために使用されます。
同期送信は通常、非同期送信よりもはるかに高速です。受信側は各文字を開始および停止する必要はありません。フレーム同期文字が検出されると、次のデータの到着と同時にそれを受信します。また、同期送信のオーバーヘッドも比較的小さいです。たとえば、一般的なフレームには 500 バイト (つまり 4000 ビット) のデータがあり、その中には 100 ビットのオーバーヘッドしか含まれていない可能性があります。このとき、追加されたビットにより総送信ビット数は 2.5% 増加しますが、これは非同期送信の 25% 増加に比べてはるかに小さいです。データ フレーム内の実際のデータ ビットの数が増加すると、それに応じてオーバーヘッド ビットの割合も減少します。ただし、データ ビットが長くなるほど、データをキャッシュするために必要なバッファが大きくなり、フレームのサイズが制限されます。また、フレームが大きくなるほど、伝送媒体を占有する連続時間が長くなります。極端な場合、これにより他のユーザーが長時間待たされることになります。
同期と非同期の概念を理解すると、ajax が非同期リクエスト メソッドを使用する理由をより明確に理解できるようになります。たとえば、あなたの家がある地域が何らかの事情で断水に直面している場合、関連部門は 2 つの計画を発表します。1 つは、8 時間完全に断水することです。 2番目は、10時間完全に水を遮断しないことです。この10時間の間、水は完全に遮断されませんが、10時間後には通常の流量に戻ります。 、あなただったらどの方法を選びますか？どうやら後者のようです。
5. ajax に含まれるテクノロジー
ajax が新しいテクノロジーではなく、いくつかの独自のテクノロジーを組み合わせたものであることは誰もが知っています。以下の技術で構成されています。
1. CSSとXHTMLを使って表現します。
2. インタラクションと動的な表示には DOM モデルを使用します。
3. XMLHttpRequest を使用してサーバーと非同期通信します。
4. JavaScript を使用してバインドして呼び出します。
上記のテクノロジーのうち、XmlHttpRequest オブジェクトを除く他のテクノロジーはすべて Web 標準に基づいており、XMLHttpRequest はまだ W3C に採用されていませんが、ほぼすべての主要なブラウザーですでに事実上の標準になっています。現在それをサポートしています。
6. Ajax の原理と XmlHttpRequest オブジェクト
Ajax の原理は、XmlHttpRequest オブジェクトを通じてサーバーに非同期リクエストを送信し、サーバーからデータを取得し、JavaScript を使用して DOM を操作し、ページを更新することです。 。この中で最も重要なステップは、サーバーからリクエスト データを取得することです。このプロセスと原理を理解するには、XMLHttpRequest について理解しておく必要があります。
XMLHttpRequestはajaxの中核となる仕組みで、IE5で初めて導入された非同期リクエストをサポートする技術です。簡単に言うと、JavaScript はユーザーをブロックすることなく、サーバーにリクエストを送信し、応答をタイムリーに処理できます。リフレッシュ効果は得られません。
それでは、XMLHttpRequest から始めて、それがどのように機能するかを見てみましょう。
まず、XMLHttpRequest オブジェクトのプロパティを見てみましょう。
その属性は次のとおりです:
onreadystatechange 状態が変化するたびにトリガーされるイベントのイベントハンドラー。
responseText サーバープロセスから返されたデータの文字列形式。
responseXML サーバープロセスから返されるDOM互換のドキュメントデータオブジェクト。
status 一般的な404（見つかりません）や200（準備完了）など、サーバーから返される数値コード
status Text ステータスコードに付随する文字列情報
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 Ustbwuyi() { var data = document.getElementById("username").value;
CreateXmlHttp(); if (!xmlhttp) {
alert("创建xmlhttp对象异常！"); return false;
}
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();
}上に示したように、この関数はまず XMLHttpRequest の全体的なステータスをチェックし、それが完了している (readyStatus=4)、つまりデータが送信されたことを確認します。次に、サーバーの設定に従ってリクエストのステータスをクエリし、すべての準備ができている場合 (ステータス = 200)、次の必要な操作を実行します。
XmlHttpRequest の 2 つのメソッド、open と send について、open メソッドは次を指定します。
a サーバーに送信されるデータのタイプ、つまり post または get。
b、URL アドレスを要求し、パラメータを渡しました。
c. 送信方法、false は同期を意味し、true は非同期を意味します。デフォルトは true です。非同期通信モード (true) の場合、クライアントはサーバーの応答を待ちません。同期モード (false) の場合、クライアントは他の操作を実行する前にサーバーがメッセージを返すまで待つ必要があります。実際のニーズに応じて同期方法を指定する必要があります。一部のページでは、複数のリクエストが発行されたり、組織化、計画、形成された大規模で高強度のリクエストが発行され、後者のリクエストが前のリクエストを上書きすることがあります。もちろん、同期方法を指定する必要があります。
Send メソッドはリクエストの送信に使用されます。
XMLHttpRequest のワークフローを理解すると、XMLHttpRequest はサーバーにリクエストを発行するために完全に使用され、その役割はこれに限定されていることがわかりますが、その役割は ajax 実装全体の鍵です。 2 リクエストを作成し、リクエストに応答するプロセス。そしてそれは完全にクライアント側のテクノロジーです。 XMLHttpRequest はサーバーとクライアント間の通信の問題を処理するため、非常に重要です。
これで、おそらく ajax の原理を理解できるでしょう。サーバーはプレーン テキスト ストリームを返すデータ インターフェイスと考えることができます。もちろん、このテキスト ストリームは XML 形式、HTML、JavaScript コード、または単なる文字列にすることができます。このとき、XMLHttpRequest はサーバーにこのページをリクエストし、サーバーはテキスト結果をページに書き込みます。これは通常の Web 開発プロセスと同じですが、違いは、クライアントが結果を直接取得した後ではないことです。ページに表示されますが、最初に JavaScript によって処理されてからページに表示されます。 magicajax など、現在一般的な多くの ajax コントロールは、DataSet などの他のデータ型を返すことができますが、本質的には、それらの間に大きな違いはありません。
7. ajax の利点
基本的に、Ajax がもたらす利点については誰もが深く理解しています。ここでいくつかの点について簡単に説明します。
1. 最大のポイントは、ページがページはサーバーと通信し、ユーザーに非常に優れたエクスペリエンスを提供します。
2. 非同期モードを使用して、ユーザーの操作を中断することなくサーバーと通信し、より高速な応答機能を備えます。
3. これまでサーバーに負担がかかっていた作業の一部をクライアントに転送することで、クライアントの空き容量を利用して処理できるため、サーバーと帯域幅の負担が軽減され、スペースとブロードバンドのレンタルコストが節約されます。また、サーバーの負担を軽減するために、ajax の原則は「オンデマンドでデータを取得する」ことで、冗長なリクエストと応答によるサーバーの負担を最小限に抑えることができます。
4. 標準化され広くサポートされているテクノロジーに基づいているため、プラグインや小さなプログラムをダウンロードする必要はありません。
8. ajax の欠点
ここでは、ajax の欠点に焦点を当てます。なぜなら、私たちのほとんどは、ユーザーエクスペリエンスの向上など、ajax がもたらす利点に注目しているからです。 ajax によって引き起こされる欠点は無視されています。
以下で説明する ajax の欠陥はすべて ajax が原因です。
1. Ajax は「戻る」ボタンを無効にし、ブラウザーの「戻る」メカニズムを破壊します。 「戻る」ボタンは標準的な Web サイトの重要な機能ですが、JavaScript ではうまく機能しません。ユーザーは前に戻って前の操作をキャンセルしたい場合が多いため、これは ajax によって引き起こされる深刻な問題です。では、この問題に対する解決策はあるのでしょうか?答えは「はい」です。Gmail で使用されている ajax テクノロジーがこの問題を解決することは知っていますが、これは単なる愚かな方法です。これを行うには、非表示の IFRAME を作成または使用して、ユーザーが履歴にアクセスするために戻るボタンをクリックしたときにページ上の変更を再現します。 (たとえば、ユーザーが Google マップでクリックして戻ると、非表示の IFRAME が検索され、検索結果が Ajax 要素に反映され、アプリケーションの状態がその時点の状態に復元されます。)
ただし、この問題は解決できますが、開発コストが非常に高くつくため、ajax フレームワークに必要な迅速な開発とは相反します。これは、ajax によって引き起こされる非常に深刻な問題です。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト AJAX 開発マニュアル のコラムにアクセスして学習してください)
2. セキュリティの問題
テクノロジーは IT 企業に新たなセキュリティ脅威ももたらします Ajax テクノロジーは、新たなセキュリティ脅威を確立するようなものです。企業データへの直接チャネル。これにより、開発者は以前よりも多くのデータとサーバー ロジックを誤って公開してしまう可能性があります。 Ajax ロジックはクライアント側のセキュリティ スキャン テクノロジから隠蔽できるため、ハッカーがリモート サーバーから新たな攻撃を作成できるようになります。 Ajax は、クロスサイト スクリプティング攻撃、SQL インジェクション攻撃、資格情報ベースのセキュリティの脆弱性など、いくつかの既知のセキュリティの弱点を回避することも困難です。
3. 検索エンジンのサポートは比較的弱いです。
4. プログラムの例外メカニズムを破壊しました。少なくとも現在の観点からは、ajax.dll や ajaxpro.dll などの ajax フレームワークはプログラムの例外メカニズムを破壊します。この問題に関しては、私も開発過程で遭遇したことがありますが、調べてみるとネット上には関連する紹介がほとんどありません。その後、私は自分自身で実験を行い、ajax と従来のフォーム送信モードを使用してデータの一部を削除しました...これはデバッグに大きな困難をもたらしました。
5. さらに、URL やリソースの配置の本来の意図に反するなど、他にもいくつかの問題があります。たとえば、URL アドレスを指定した場合、Ajax テクノロジーが使用されている場合、その URL アドレスの下に表示される内容は、この URL アドレスの下に表示される内容と異なる可能性があります。これは、リソースの配置の本来の目的に反します。
6. 一部のハンドヘルド デバイス (携帯電話、PDA など) は現在、ajax をあまりサポートしていません。たとえば、モバイル ブラウザーで ajax テクノロジを使用する Web サイトを開くと、現在それがサポートされていません。もちろん、この問題は私たちとはほとんど関係がありません。
9. いくつかの 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 オブジェクトのみをサポートしています。もちろん、これはマイクロソフトの競争戦略です。
10. Ajax の例
ユーザー名が登録されているかどうかを確認します。
2つのメソッド
1 ajax.dll
2 xmlhttprequestオブジェクトを自分で書く
10. ajaxでよくあるエラー
1 構成の問題
ページロードでページを構成するとき
バックグラウンドで呼び出しメソッドが呼び出しますフロントエンド部分...
この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAJAX ユーザーマニュアル の列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。 。
以上がajaxがどのように機能するか知っていますか? ajax の概要とその原理の詳細な概要 (クラシック)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
