この記事では主に 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 簡単なデモの例:
rreee3.0 欠点:
1.ブラウザの「戻る」ボタンの通常の動作 ページを動的に更新した後は、前のページの状態に戻ることはできません。
2. Ajax の基本エンジンとして Javascript を使用しているため、Javascript の互換性はあまり良くありません。 (もちろん、Jquery などの一般的な JavaScript ライブラリにより、これらの問題は大幅に改善され、Ajax の呼び出しもはるかに便利になりました。この記事では、Ajax の基本的な実装原理について簡単に説明するだけです)。
上記は私があなたのためにまとめたものです。
関連記事:
AJAX 初心者向けチュートリアル: 初めて AJAX を知る
以上がAjaxの技術原則3点まとめ_AJAX関連の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。