1. Ajax を使用する主な理由
1. 適切な Ajax アプリケーションを通じて、より良いユーザー エクスペリエンスを実現するため。
2. サーバーが負担していた以前の作業の一部をクライアントに転送するため。これにより、クライアントのアイドル処理能力が向上し、サーバーの負荷が軽減されます。帯域幅の負担を軽減し、ISP のスペースと帯域幅のレンタルコストを節約するという目的を達成します。
2. 引用
Ajax の概念を最初に提案した Jesse James Garrett は、Ajax が Asynchronous JavaScript and XML の略語であると考えています。
Ajax は新しい言語やテクノロジではありません。実際には、共通のコラボレーション
においてそれぞれの役割を果たすためにいくつかのテクノロジが組み合わされています。
· XHTML と CSS を使用してプレゼンテーションを標準化します。
· データの交換と処理には XML と XSLT を使用します。
· 非同期データの読み取りには XMLHttpRequest を使用します。
·最後
に JavaScript を使用してすべてのデータをバインドし、処理します。
サーバー応答は非同期です。すべてのユーザー リクエストがサーバーに送信されるわけではありません。一部のデータ検証とデータ処理は、サーバーから新しいデータを読み取る必要があると判断された場合にのみ、Ajax エンジンによってサーバーに送信されます。その代わりに。
3. 概要
Garrent氏はAjaxの構成技術を7つ挙げていますが、いわゆるAjaxの核となるのはJavaScript、XMLHTTPRequest、DOMだけだと個人的には考えています。使用するデータ形式がXMLであれば、XMLを追加することも可能です(Ajaxはサーバー側から起動します)。データは XML 形式またはテキストなどの他の形式にすることができます)。
古い対話方法では、ユーザーがサーバーへの HTTP リクエストをトリガーし、サーバーがそれを処理して、クライアントから送信されたリクエストをサーバーが処理するたびに、クライアントはアイドル状態で待機することしかできません。たとえそれが小規模なインタラクションであり、サーバーから単純なデータを取得するだけでよい場合でも、完全な HTML ページを返す必要があり、ユーザーは毎回ページ全体を再読み込みするために時間と帯域幅を無駄にする必要があります。 。
Ajax を使用した後、ユーザーは、ページのリロード (白い画面) を待たずに、ほとんどすべての操作が迅速に応答するように感じます。
1. XMLHTTPRequest
Ajax の最大の特徴の 1 つは、ページを更新せずにサーバーにデータを送信または読み書きできることです (更新せずにページを更新することとも呼ばれます)。この機能は主に XMLHTTP コンポーネント XMLHTTPRequest オブジェクトの恩恵を受けます。このように、デスクトップ アプリケーションは、毎回インターフェイスを更新したり、データ処理作業をサーバーに送信したりする必要がなく、サーバーとデータを交換するだけで済みます。これにより、サーバーの負荷が軽減されるだけでなく、処理時間が短縮されます。 . 応答速度が向上し、ユーザーの待ち時間が短縮されます。
Microsoft は最初に XMLHTTP を適用しました。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)
= new ActiveXObject(Msxml2.XMLHTTP) );
XMLHttpRequest オブジェクトのメソッド
/**
* クロスブラウザー XMLHttpRequest のインスタンス化。
*/
if (typeof XMLHttpRequest == 'unknown') {
XMLHttpRequest = function () {
var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']
for ( var i=0; i < msxmls.length; i++) {
try {
return new ActiveXObject(msxmls[i]+'.XMLHTTP')
} catch (e) { }
}
throw new Error("XML コンポーネントがインストールされていません! ")
}
}
function createXMLHttpRequest() {
try {
// 「Mozilla の方法」で作成してみます
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
// そうではないでしょう - 今は IE の方法です
if (window.ActiveXObject ) {
return new ActiveXObject(getXMLPrefix() + ".XmlHttp")
}
}
catch (ex) {}
return false
};
XMLHttpRequest オブジェクト メソッド
メソッドの | 説明 |
abort() | 現在のリクエストを中止します |
getAllResponseHeaders() | 完全なヘッダーを文字列として返します |
getResponseHeader("headerLabel") | 単一のヘッダー ラベルを文字列として返します |
open("method","URL"[,asyncFlag[ , "userName"[, "password"]]]) | 保留中のリクエストのターゲット URL、メソッド、およびその他のパラメーターを設定します |
send(content) | リクエストを送信します |
setRequestHeader("label", "value") | ヘッダーを設定して一緒に送信しますリクエスト |
XMLHttpRequest オブジェクトの属性
属性の | 説明 |
状態変更 | の |
readyState | オブジェクトのステータス (整数): 0 = 初期化されていない 1 = 読み取り 2 = 読み取り 3 = インタラクション 4 = |
responseText サーバー プロセスから返されるデータのテキスト バージョン | を完成します。responseXML |
サーバー | プロセスから返される DOM 互換の XML ドキュメント オブジェクト |
( | 例: 404 = "ファイルが見つかりません") |
statusText | サーバーから返される|
「成功」 |
2. JavaScript
JavaScript はブラウザーで広く使用されているプログラミング言語ですが、これまでは悪い言語として軽視されてきました (実際に使用するのは退屈です)。派手なガジェットやいたずら、または退屈なフォーム検証が目的です。しかし実際には、これは本物のプログラミング言語であり、独自の標準があり、さまざまなブラウザーで広くサポートされています。
3. DOM
ドキュメント オブジェクト モデル。
DOM は、HTML および XML ファイル用の API のセットです。ファイルの構造表現を提供し、その内容と表示/非表示を変更できるようにします。その本質は、Web ページとスクリプトまたはプログラミング言語の間にコミュニケーション ブリッジを確立することです。
WEB 開発者が操作してファイルを作成できるすべてのプロパティ、メソッド、イベントはオブジェクトによって表されます (たとえば、ドキュメントは「ファイル自体」オブジェクトを表し、テーブル オブジェクトは HTML テーブル オブジェクトを表します)。これらのオブジェクトには、今日のほとんどのブラウザでスクリプトからアクセスできます。
HTML または XHTML で構築された Web ページは、DOM (Document Object Model) に囲まれた構造化データのセットとみなすこともでき、Web ページ内のさまざまなオブジェクトの読み取りと書き込みをサポートします。
4. XML
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 アプリケーションです。
これまでのカスケード メニューの処理は次のとおりでした。
メニュー操作のたびにページがリロードされるのを避けるため、毎回バックグラウンドを呼び出す方法を使わず、カスケード メニューのデータをすべて一度に読み込むようにしていました。これにより、操作の応答速度の問題が解決され、ページの再読み込みやサーバーへの頻繁なリクエストが回避されます。ユーザーがメニューに反応しない メニューの一部のみを操作したり、メニューの一部のみを操作したりすると、特にメニュー構造が複雑でデータ量が多い場合、読み込んだデータの一部が冗長データとなりユーザーのリソースを無駄に消費します(たとえば、メニューには多くのレベルがあり、各レベルには数百の項目があります)、この欠点はさらに顕著になります。
この場合に Ajax を適用すると、結果が改善されます。
ページの初期化時に、第 1 レベルのデータをすべて読み取って表示するだけで、ユーザーが第 1 レベルのメニュー項目の 1 つを操作すると、結果が表示されます。バックグラウンドは、現在の第 1 レベルの項目が属する第 2 レベルのサブメニューのすべてのデータを要求し、すでに表示されている第 2 レベルのメニュー内の項目を要求し続ける場合は、すべてのデータを要求します。操作された第 2 レベルのメニュー項目に対応するすべての第 3 レベルのメニューのデータなど...このようにして、必要なものを必要なだけ取得できます。冗長性や無駄はありません。データの総ダウンロード量が削減され、ページ更新時にコンテンツ全体をリロードする必要がなく、更新が必要な部分だけを更新するだけで済むため、バックグラウンド処理やリロードに比べてユーザーの待ち時間が短縮されます。そして資源の無駄を最小限に抑えます。
さらに、Ajax は外部データを呼び出すことができるため、Microsoft が 3 月 15 日にリリースしたばかりのオンライン RSS リーダーのベータ版などのデータ集約機能も実現できます。いくつかのオープンデータの開発 Amazon のデータを使用したいくつかの小説書籍検索アプリケーションなど、いくつかの独自アプリケーション。
つまり、Ajax は、対話が多く、データの読み取りが頻繁に行われ、データの分類が適切な WEB アプリケーションに適しています。
1. サーバーの負担を軽減します。 Ajax の基本的な概念は「オンデマンドでデータを取得する」ことであるため、冗長なリクエストによる負荷とサーバーへの影響を最大限に軽減できます。
2. 更新せずにページを更新し、ユーザーの実際の心理的な待ち時間を短縮します。
まず、「を押してください。 「データが必要」モードでは、実際に読み取られるデータ量が削減されます。非常に鮮明な例えで言うと、オーバーロード方法が 1 つのエンドポイントから原点に戻り、次に別のエンドポイントに戻ることである場合、Ajax は1 つのエンドポイントで別のエンドポイントに到達します。
次に、比較的大きなデータを読み込む場合でも、Ajax は XMLHTTP を使用してリクエストを送信し、サーバー応答データを再ロードする必要はありません。ページ全体を Javascript を使用して DOM を操作し、最終的にページを更新します。そのため、データの読み取りプロセス中、ユーザーには白い画面が表示されず、元のページのステータスが表示されます (または、LOADING プロンプト ボックスを追加して、ユーザーはデータ読み取りプロセスのステータスを理解します)、すべてのデータが受信された場合にのみ、コンテンツの対応する部分が更新されます。この更新も瞬時であり、ユーザーにはほとんど知覚されません。つまり、ユーザーはあなたの気遣いをとても敏感に感じています。すぐに結果は出ませんが、ユーザーの心の中に少しずつサイトへの依存が蓄積されていきます。
3. ユーザー エクスペリエンスの向上。
4. サーバーの負担となっていた以前の作業の一部をクライアントに転送し、クライアントのアイドル処理能力を利用して、サーバーと帯域幅の負担を軽減し、スペースと帯域幅を節約できます。レンタル費用;
5、Ajax は外部データを呼び出すことができます。
6. 標準化され、広くサポートされているテクノロジに基づいており、プラグインや
ダウンロードされたアプレットは必要ありません。
データとプレゼンテーションを分離すると言われています) ;
8. これはユーザーと ISP にとって有利な状況です。
6. Ajax の問題
1. 一部のハンドヘルド デバイス (携帯電話、PDA など) はまだ Ajax を十分にサポートしていません。
2. JavaScript で作られた Ajax エンジン、JavaScript の互換性、および DeBugs が問題です。
3. Ajax の非リフレッシュ。リロードは、ページの変更が更新リロードほど明確ではないため、ユーザーにトラブルを引き起こしやすいです。ユーザーは、現在のデータが新しいのか、既存のデータが更新されたのかわかりません。関連する場所のプロンプトとデータの更新。領域はより明確になるように設計されており、データ更新後にユーザーにプロンプトが表示されます。
4. ストリーミング メディアのサポートは FLASH や Java アプレットほど優れていません。