Ajax がどのように動作するかを詳細に分析-jsチュートリアル-php.cn

この記事は主に Ajax の詳細な構造の動作原理を紹介するもので、編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう

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

ajax テクノロジーの人気が Google の精力的なプロモーションの恩恵を受けていることは否定できません。それはまさに、ajax テクノロジーの強力なプロモーションのおかげです。 Google Earth、Google Suggest、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 フレームワークアトラスを立ち上げ、.NET2.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 ステータスコードに付随するテキスト文字列情報
readyState オブジェクトのステータス値

0 (未初期化) オブジェクトは作成されましたが、初期化されていません(openメソッドはまだ呼び出されていません)
1 (初期化済み) オブジェクトは作成されましたが、sendメソッドはまだ呼び出されていません
2 (データ送信）sendメソッドを呼び出しましたが、現在のステータスとhttpヘッダーが不明です
3（データ転送中）データの一部を受信しましたレスポンスとhttpヘッダーが不完全なため、取得時にエラーが発生します。

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 によって引き起こされる非常に深刻な問題です。

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. 設定の問題

pageloadでページを設定するとき

11.この部分はバックグラウンドで呼び出されるメソッドで呼び出されます...

以上がAjax がどのように動作するかを詳細に分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。