Ajax プログラミングの概要

1. Ajax を使用する主な理由

1. 適切な Ajax アプリケーションを通じて、より良いユーザー エクスペリエンスを実現します。これにより、クライアントのアイドル処理能力が向上します。 、サーバーと帯域幅の負担を軽減し、それによって ISP のスペースと帯域幅のレンタルコストを節約するという目的を達成します。

2. 引用

Ajax の概念の最初の提案者である Jesse James Garrett は、次のように考えています。Ajax は、Asynchronous JavaScript と xml の略称です。 Ajax は新しい言語やテクノロジではありません。実際には、共通のコラボレーションでそれぞれの役割を果たすためにいくつかのテクノロジが組み合わされています。

· プレゼンテーションを標準化するために DOM を使用します。動的表示と対話;

· データの交換と処理には XML と XSLT を使用します。

· 最後に、JavaScript を使用してすべてのデータをバインドし、処理します。ユーザーとサーバーの間に中間層を追加し、ユーザーの操作とサーバーの応答を非同期にします。すべてのユーザー リクエストがサーバーに送信されるわけではありません。一部のデータ検証とデータ処理は、サーバーから新しいデータを読み取る必要があると判断された場合にのみ、Ajax エンジンによってサーバーに送信されます。その代わりに。

3. 概要

Garrent は 7 つの Ajax 構成技術を挙げていますが、個人的には、いわゆる Ajax の核となるのは JavaScript、XMLHTTPRequest、DOM だけであると考えています。 (サーバーから Ajax によって返されるデータは、XML 形式またはテキストなどの他の形式にすることができます)。

古い対話方法では、ユーザーがサーバーへの HTTP リクエストをトリガーし、サーバーがそれを処理して、クライアントに送信されたリクエストをサーバーが処理するたびに、クライアントは待機することしかできません。アイドル状態であり、たとえそれが小規模なインタラクションであり、サーバーから単純なデータを取得するだけでよい場合でも、完全な HTML ページが返されるため、ユーザーは毎回ページ全体を再読するために時間と帯域幅を無駄にすることになります。 。

Ajax を使用した後、ユーザーは、ほとんどすべての操作がページのリロード (白い画面) を待たずにすぐに応答するように感じます。

1. XMLHTTPRequest

Ajax の最大の特徴の 1 つは、ページを更新せずにサーバーにデータを送信または読み書きできることです (更新せずにページを更新することとも呼ばれます)。この機能は主に XMLHTTP コンポーネントの恩恵を受けます。 XMLHTTPRequest オブジェクト。このように、デスクトップ アプリケーションは、毎回インターフェイスを更新したり、データ処理作業をサーバーに送信したりすることなく、サーバーとデータを交換するだけで済みます。これにより、サーバーの負担が軽減されるだけでなく、プロセスが高速化されます。応答速度が速くなり、ユーザーの待ち時間が短縮されます。 XMLHTTP の最も初期のアプリケーションは Microsoft であり、IE (IE5 以降) は、開発者が Web ページ内で XMLHTTP ActiveX コンポーネントを使用できるようにすることで、現在の Web から移動せずに、サーバーにデータを直接転送できるようにすることで、その機能を拡張しました。ページ。サーバーがデータを取得します。この機能は、ステートレス接続の苦痛を軽減するのに役立ち、また、冗長な HTML をダウンロードする必要がなくなるため、プロセスの速度が向上するため、重要です。 Mozilla (Mozilla 1.0 以降および NetScape 7 以降) は、独自の継承 XML プロキシ クラスである XMLHttpRequest クラスを作成することで対応しました。 Konqueror (および同じく KHTML ベースのブラウザである Safari v1.2) も XMLHttpRequest オブジェクトをサポートしており、Opera も v7.6x 以降のバージョンで XMLHttpRequest オブジェクトをサポートします。ほとんどの場合、XMLHttpRequest オブジェクトは XMLHTTP コンポーネントと非常によく似ており、少数のプロパティがサポートされていないことを除いて、メソッドとプロパティも同様です。

XMLHttpRequestのアプリケーション:

・JSでのXMLHttpRequestオブジェクトのアプリケーション

var xmlhttp = new XMLHttpRequest();

・JSでのMicrosoftのXMLHTTPコンポーネントのアプリケーション

var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP) ;

var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);

XMLHttpRequest オブジェクトのメソッド

/**

* クロスブラウザー XMLHttpRequest インスタンス化。

*/

if (typeof XMLHttpRequest == '未定義') {

XMLHttpRequest = function () {

var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']

for (var i=0; i < msxmls.length; i++) {

try {

return new ActiveXObject(msxmls[i ] + ' .

// 「Mozilla の方法」で作成してみます

if (window.ActiveXObject) {

Return new ActiveXObject(getXMLPrefix() + ".XmlHttp");

}

}

catch (ex ) {}

false を返します。

メソッドの説明
abort() 現在のリクエストを停止します
getAllResponseHeaders() 完全なヘッダーを文字列として返します
getResponseHeader("headerLabel") 単一のヘッダー ラベルを文字列として返します
open("method","URL"[, asyncFlag [,"userName"[, "passWord"]]]) 保留中のリクエストのターゲット URL、メソッド、その他のパラメーターを設定します
send(content) リクエストを送信します
setRequestHeader("label", "value") ヘッダーを設定しますリクエストと一緒に送信されます

XMLHttpRequest オブジェクトのプロパティ

プロパティの説明
onreadystatechange 状態変更のイベントトリガー
readyState オブジェクトの状態 (整数):

0 = 初期化されていません

1 = 読み取り中

2 = 読み取り

3 = 対話中

4 = 完了
responseText サーバー プロセスから返されるデータのテキスト バージョン
responseXML サーバー プロセスから返されるデータの DOM 互換 XML ドキュメント オブジェクト
status サーバーから返されるステータス コード (次のような) 404 = "ファイルが見つかりません" 、200 = "成功"
statusText サーバーによって返されたステータスのテキスト情報

2. JavaScript

JavaScript は、ブラウザーで広く使用されているプログラミング言語です。過去 (確かに、これは使用すると比較的退屈です) であり、ガジェットの誇示やいたずら、または単調でつまらないフォームの検証によく使用されます。しかし実際には、これは本物のプログラミング言語であり、独自の標準があり、さまざまなブラウザーで広くサポートされています。

3. DOM

ドキュメントオブジェクトモデル。

DOM は、HTML および XML ファイル用の API のセットです。ファイルの構造表現を提供し、その内容と表示/非表示を変更できるようにします。その本質は、Web ページとスクリプトまたはプログラミング言語の間に橋渡しを確立することです。

WEB 開発者が操作してファイルを作成できるすべてのプロパティ、メソッド、イベントはオブジェクトによって表されます (たとえば、 document はオブジェクト「ファイル自体」を表し、 table オブジェクトは HTML テーブル オブジェクトを表します)。これらのオブジェクトは、現在、ほとんどのブラウザーでスクリプトからアクセスできます。

HTML または XHTML で構築された Web ページは、一連の構造化データと見なすこともできます。このデータは DOM (ドキュメント オブジェクト モデル) に封入されており、Web ページ内のさまざまなオブジェクトの読み取りと書き込みをサポートします。

4. XML

拡張マークアップ言語 (Extensible Markup Language) は、オープンで拡張可能な自己記述型の言語構造を持ち、オンライン データおよびドキュメント送信の標準となっています。その名の通り、データ構造を記述するための言語です。これにより、特定の構造化データの定義や他のアプリケーションとのデータ交換が容易になります。
5. 包括的 5. Ajax の利点

Jesse James Garrett が言及した Ajax エンジンは、実際には、ユーザーのリクエストの処理、サーバーの読み取りと書き込み、DOM コンテンツの変更に使用される比較的複雑な JavaScript アプリケーションです。

JavaScript の Ajax エンジンは、情報を読み取り、DOM を対話的に書き換えます。これにより、Web ページがシームレスに再構築されます。つまり、ページがダウンロードされた後に、これが JavaScript と DOM を使用して広範に行われてきました。 , しかし、Web ページを真に動的にするには、内部の対話だけでなく、外部からデータを取得する必要もあります。これまでは、ユーザーに DOM を介してデータを入力させ、Web ページのコンテンツを変更させていました。 XMLHTTPRequest により、ページをリロードせずにサーバー上のデータを読み書きできるようになり、ユーザー入力を最小限に抑えることができます。

XML ベースのネットワーク通信は新しいものではありません。実際、Flash と JAVA アプレットは両方ともうまく機能しており、標準化され広くサポートされているテクノロジに基づいており、プラグを必要としません。 -アプレットまたはダウンロード。

Ajax は、従来の WEB アプリケーションを変革したものです。以前は、サーバーは毎回 HTML ページを生成し、それをクライアント (ブラウザー) に返していました。ほとんどの Web サイトでは、構造、形式、ヘッダー、フッター、広告など、多くのページの少なくとも 90% が同じです。唯一の違いはコンテンツのごく一部ですが、サーバーは毎回、すべての戻り値を生成します。クライアントへのページは、ユーザーの時間、帯域幅、CPU 消費量、または ISP が高額でレンタルする帯域幅とスペースのいずれであっても、目に見えない無駄です。ページ単位で計算すると、わずか数 K または数十 K では大したことはないかもしれませんが、毎日数百万ページを生成する SINA のような大規模な ISP にとって、これは大きな損失であると言えます。 AJAX は、クライアントとサーバーの間の中間層として機能し、クライアントのリクエストを処理し、必要に応じてサーバーにリクエストを送信します。使用した内容と使用量を取得できるため、データの冗長性や無駄がなくなります。 . により、ダウンロードされるデータの総量が削減され、ページを更新するときにコンテンツ全体をリロードする必要がなく、純粋なバックグラウンド処理とリロード方法に比べて、ユーザーを待たせることができます。 Ajax は、標準化され広くサポートされているテクノロジに基づいており、プラグインやアプレットのダウンロードを必要としないため、時間が短縮され、リソースの無駄が最小限に抑えられ、ユーザーと ISP の両方にとって有利になります。

Ajax は WEB のインターフェイスとアプリケーションを分離します (データとプレゼンテーションを分離するとも言えます)。以前は、データとプレゼンテーションの分離は分業に役立ちます。ページへの変更により WEB アプリケーションのエラーが発生し、効率が向上し、現在の出版システムにより適しています。また、サーバーが負担していた以前の作業の一部をクライアントに転送することもでき、これはクライアントのアイドル処理能力に有益です。

4. アプリケーション

Ajax の概念の出現により、ページを更新せずに更新する時代への序章が開かれ、Web ページを更新するために従来の Web 開発におけるフォーム (フォーム) 送信の使用が置き換えられる傾向になりました。マイルストーンとして捉えることができます。ただし、Ajax はどこにでも適用できるわけではなく、その適用範囲はその特性によって決まります。

アプリケーションの例は、カスケード メニュー用の Ajax アプリケーションです。

以前のカスケード メニューの処理は次のとおりです:

メニューの各操作によるページの再読み込みを避けるために、毎回バックグラウンドを呼び出す方法は使用しませんでしたが、すべてのカスケード メニューが 1 回の時点で処理されました。すべてのデータが一度読み取られて配列に書き込まれ、その後 JavaScript を使用してユーザーの操作に応じて項目のサブセットの表示が制御されます。これにより、操作の応答速度、ページの再読み込みの問題、および回避の問題が解決されます。サーバーへのリクエストは頻繁に行われますが、ユーザーがメニューを操作しなかったり、メニューの一部のみを操作したりすると、特にメニュー構造が複雑でデータ量が多い場合、読み取ったデータの一部が冗長データとなりユーザーのリソースを無駄に消費します。が大きい場合 (たとえば、メニューには多くのレベルがあり、各レベルには数百の項目があります)、この欠点はさらに顕著になります。

この場合に Ajax を適用すると、結果が改善されます。

ページを初期化するとき、ユーザーが第 1 レベルのメニュー項目の 1 つを操作したときにのみ、その最初のレベルのすべてのデータが読み取られて表示されます。 , 現在の第 1 レベルの項目が属する第 2 レベルのサブメニューのすべてのデータは、Ajax を通じてバックグラウンドに要求されます。すでに表示されている第 2 レベルのメニュー内の項目を要求し続けると、操作された項目に対応する 3 つのデータすべてがバックグラウンドに要求されます。 2 番目のレベルのメニュー項目は、そのレベルのメニューのすべてのデータを要求されます。このようにして、必要なものを必要なだけ取得できます。冗長性や無駄はありません。データの総ダウンロード量を削減し、ページ更新時にリロードする必要がなく、バックグラウンド処理やリロードに比べて更新が必要な部分のみを更新できます。時間が短縮され、資源の無駄が最小限に抑えられます。

さらに、Ajax は外部データを呼び出すことができるため、Microsoft が 3 月 15 日にリリースしたばかりのオンライン RSS リーダーのベータ版などのデータ集約機能も実現できます。オープン データの恩恵を受け、Amazon データを使用した新しい書籍検索アプリケーションなどの独自のアプリケーションを開発します。

つまり、Ajax は、対話が多く、頻繁にデータを読み取り、データを適切に分類する WEB アプリケーションに適しています。

1. サーバーの負荷を軽減します。 Ajax の基本的な概念は「オンデマンドでデータを取得する」ことであるため、冗長なリクエストやサーバーへの影響による負担が最小限に抑えられます

2. ページの更新がなく、ユーザーの実際の待ち時間と心理的な待ち時間が軽減されます。とりわけ、「データ オン デマンド」モデルにより、実際に読み取られるデータ量が削減されます。非常に鮮明な例えで言えば、オーバーロードの方法が 1 つのエンド ポイントから原点に戻ってから別のエンド ポイントに戻ることである場合、Ajax は次のようになります。一方の終点は、もう一方の終点に到達するための基点に基づきます;

次に、比較的大きなデータを読み込む場合でも、RELOADのような白い画面を表示する必要はありません。AjaxはXMLHTTPを使用してリクエストを送信し、サーバーの応答データを取得するため、Javascriptを使用してDOMをリロードせずに操作できます。ページ全体が最終的に更新されるため、データの読み取りプロセス中、ユーザーには白い画面が表示されませんが、元のページのステータスが表示されます (または、ユーザーがデータのステータスを理解できるように LOADING プロンプト ボックスを追加できます)。読み出し）、のみ 全てのデータを受信して​​初めて該当部分の内容が更新されますが、この更新も瞬間的であり、ユーザーにはほとんど感じられません。つまり、ユーザーはあなたの気遣いを敏感に感じ取ることができ、すぐには結果は出ませんが、ユーザーの心の中に少しずつWebサイトへの依存が蓄積されていきます。

3. より良いユーザーエクスペリエンス;

4. サーバーの負担となっていた以前の作業の一部をクライアントに転送することもできるため、サーバーと帯域幅の負担が軽減され、スペースが節約されます。

5. Ajax は外部データを呼び出すことができます。

6. Ajax は、プラグインやダウンロードされたアプレットを必要としません。 WEB (データとプレゼンテーションの分離とも言えます);

8. これはユーザーと ISP にとって双方にとって有利です。

6. Ajax に関する問題

1. 一部の携帯端末 (携帯電話、PDA など) は現在、Ajax を十分にサポートしていません。

2. JavaScript の互換性とデバッグにはすべて問題があります。

3. Ajax の非更新リロードは、更新リロードほど明らかではないため、ユーザーにトラブルを引き起こしやすいです。ユーザーは現在のデータが正しいかどうかわかりません。 ; 既存のソリューションには、関連する場所でのプロンプト、データ更新領域のデザイン、データ更新後のプロンプトなどが含まれます。

4. ストリーミング メディアのサポートは FLASH ほど優れていません。および Java アプレット

上記は Ajax プログラムの設計です、

その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。