Ajaxの技術原則3点まとめ_AJAX関連

この記事では主に Ajax の技術原則を 3 つのポイントにまとめて紹介します。必要な方は

ajax: 非同期 JavaScript と XML 非同期 JavaScript と XML を参照してください。

は、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジーです。

1.0 の利点:
1.1 非同期モードによりユーザー エクスペリエンスが向上します。
1.2 ブラウザとサーバー間の送信を最適化し、不必要なデータの往復と帯域幅の使用量を削減します。
Ajax エンジンはクライアント上で実行されます。側では、本来サーバーが負担していた共有の一部を引き受けることで、ユーザー数が多い場合のサーバーの負荷を軽減します。

2.0 動作原理

Ajax の中核は Javascript オブジェクト XmlHttpRequest です。このオブジェクトは IE5 で初めて参照され、非同期リクエストをサポートするテクノロジです。 XmlHttpRequest を使用すると、ユーザーをブロックするのではなく、JavaScript を使用してサーバーにリクエストを送信し、応答を処理して、更新不要の効果を実現できます。
ブラウザー間の違いにより、XmlHttpRequest オブジェクトの作成方法にも違いがあります (主に IE と他のブラウザーの違い)。
2.1 非同期リクエストを作成するより一般的な方法:

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) 
            { }
        }
    }
}

2.2 XmlHttpRequest 関連の属性:

onreadystatechange 状態が変化するたびにトリガーされるイベントのイベント ハンドラー。

responseText サーバープロセスから返されたデータの文字列形式。

responseXML サーバープロセスから返されるDOM互換のドキュメントデータオブジェクト。サーバーから返される一般的な 404 (見つからない) や 200 (準備完了) などの数値コード

ステータス コードの文字列情報を伴う

ステータス テキスト

ReadyState オブジェクト ステータス

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

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

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

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

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

2.3 簡単なデモの例:

3.0 欠点:

1.ブラウザの「戻る」ボタンの通常の動作 ページを動的に更新した後は、前のページの状態に戻ることはできません。
2. Ajax の基本エンジンとして Javascript を使用しているため、Javascript の互換性はあまり良くありません。 (もちろん、Jquery などの一般的な JavaScript ライブラリにより、これらの問題は大幅に改善され、Ajax の呼び出しもはるかに便利になりました。この記事では、Ajax の基本的な実装原理について簡単に説明するだけです)。

上記は私があなたのためにまとめたものです。

関連記事:

AJAX カプセル化クラスの使用ガイド

AJAX 初心者向けチュートリアル: 初めて AJAX を知る

Ajax におけるブラウザとサーバーの対話の詳細な説明

以上がAjaxの技術原則3点まとめ_AJAX関連の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。