ホームページ > 記事 > バックエンド開発 > Ajax テクノロジー 1、Ajax テクノロジー_PHP チュートリアル

Ajax テクノロジー 1、Ajax テクノロジー_PHP チュートリアル

WBOYオリジナル: 2016-07-12 08:54:511149ブラウズ

Ajax テクノロジー 1、Ajax テクノロジー

1、Ajax の概要

1. 歴史的起源

1998 年、Microsoft の Outlook Web Access 研究開発チームは、クライアントを更新せずに HTTP リクエストをサーバーに送信できるテクノロジを当時の IE ブラウザに統合しました。このテクノロジは「XMLHTTP」と呼ばれていました。

2005 年、Google は多くの製品 (Gmail、Google サジェスト検索候補、Google マップ) に Ajax テクノロジーを適用しました。それ以来、Ajax が普及しました。

2. Ajax テクノロジーとは

非同期: 非同期
JavaScript: JavaScript テクノロジー
そして: そして
XML: 拡張可能なマークアップ言語。主にデータの送信と保存に使用されます。

いわゆる Ajax テクノロジーは非同期 Javascript と XML です。XML は主にデータの送信と保存に使用されるため、Ajax の中核は非同期 Javascript であることがわかります。

3. ウェブテクノロジー

クライアント言語:

HTML
CSS
JavaScript

サーバー言語:

ASP(ASP.NET)
JSP
PHP

Ajax は非同期 Javascript であるため、Ajax はクライアントのブラウザーでも実行されることがわかります。

4. Ajax 動作モード

1) 同期リクエスト:

ネットワーク速度が比較的遅い場合、ユーザーはリクエスト全体が不連続なプロセスであると感じるため、同期リクエストのエクスペリエンスは非常に満足のいくものではありません。

2) 非同期リクエスト:

上の図からわかるように、ユーザーがリクエストを送信すると、システムはまず Ajax オブジェクトにリクエストを送信し、次にサーバーがリクエストを処理します。完了すると、データの一部がクライアントに返されるため、ユーザーにとって、リクエスト全体が継続的なプロセスとなり、エクスペリエンスは非常に優れています。

5. Ajax アプリケーションのシナリオ

①フォーム認証（ユーザー名が一意であるかリアルタイム認証）

② Baidu ドロップダウン検索

③ ページング更新なし

④ WebAPPモバイル+PHPバックグラウンドプログラム(モバイルAPP)

6. クイックスタート

demo01_rumen.html

demo01.php

実行結果:

2. Ajax オブジェクト

1. Ajax オブジェクトが必要なのはなぜですか?

覚えておいてください: Ajax テクノロジーを使用するには前提条件があり、Ajax オブジェクトを作成する必要があります。

2. Ajax オブジェクトの作成方法

IEコアブラウザベース（IE8以下のIEブラウザ、各種ブラウザの互換モード）

var Ajax オブジェクト = new ActiveXObject('Microsoft.XMLHTTP');

W3Cコアブラウザ（Firefox、Google Chrome、各種ブラウザのエクストリームスピードモード）に基づく

var Ajax オブジェクト = new XMLHttpRequest();

3. Ajax オブジェクトの互換性の問題を解決する

① コアコードベースとしてpublic.jsファイルを作成する

② 指定したIDのDOMオブジェクトを取得する$functionを定義する

③ Ajaxオブジェクトを作成するためのcreateXhr()などのパブリック関数を定義する

4. Ajax オブジェクトのプロパティとメソッド

一般的な方法

open(method,url): Ajaxオブジェクトを初期化します(リクエストタイプとリクエストアドレスを設定します)
setRequestHeader(header,value): リクエストヘッダーを設定します

パラメータの説明:

header: リクエストヘッダー

値: 値

send(content): Ajaxリクエストを送信します

パラメータの説明:

内容: リクエストの空白行で渡されるパラメータ。getリクエストの場合、この値はnullです。

よく使用される属性

onreadystatechange: Ajax ステータスコードが変更されたときにトリガーされるコールバック関数
readyState: Ajax ステータスコード

0: オブジェクトは作成されましたが、初期化されていないことを示します。createXhr メソッドは呼び出されていますが、open メソッドは呼び出されていません。

1: オブジェクトは初期化されたが送信されていないことを示します。open メソッドは呼び出されていますが、send メソッドは呼び出されていません。

2: リクエストを行うために send メソッドが呼び出されました。

3: データの受信（受信したデータの一部）

4: 受付完了

ステータス: 応答ステータスコード、200 受信完了、404 ページが見つかりません
statusText (理解): 応答ステータステキスト
reponseText: 応答結果
responseXML: 応答結果

サーバー側が文字列を返した場合は、xhr.responseTextを使用してそれを受け取ります

サーバーがXML形式でデータを返す場合は、xhr.responseXMLを使用してそれを受信します

3. Ajax でリクエストを取得する

1. Ajax マントラ: Ajax での get リクエストの 5 つのステップ

① Ajaxオブジェクトを作成する

② コールバック関数を設定する

③ Ajaxオブジェクトの初期化

④ Ajaxリクエストを送信する

⑤ 判決と執行

2. Ajax テクノロジーを使用して取得リクエストを送信する

demo04.php

3. Ajax で get リクエストを使用して値を渡します。

demo05.php

4. いくつかの小さな質問

1) 質問: Ajax を使用すると、サーバー側の echo ステートメントを通じてデータが返されることがわかりますが、この場所を return ステートメントに置き換えることはできますか?

回答: echo ステートメントと return ステートメントは両方とも return という意味を持ちますが、両者のリターン位置は異なります。return ステートメントはデータをサーバーに返しますが、echo 出力は主に出力データをクライアントに返します (ブラウザ）。したがって、サーバー側で使用できるのはecho文のみであり、return文は使用できません。

2) 質問: Ajax リクエストを送信するとき、リクエストされたページが存在しない場合はどうなりますか?

回答: リクエストしたサーバー側ページが存在しない場合、その Ajax は次の結果も返します。

しかし、実際のプロジェクト開発において、上記のポップアップウィンドウが表示されるのはユーザーエクスペリエンスにとって良くないため、この行為は禁止されなければなりません。

サーバー側の応答ステータスコードを判断することで、上記の状況を回避できます。

上記のコードは、次の形式にさらに簡略化することもできます。

3) 質問: 実際のプロジェクト開発において、上記の判定文 xhr.readyState==4 と xhr.status==200 の位置を入れ替えることはできますか?

回答: いいえ、実際のプロジェクト開発では、Ajax ステータスコードが最初に判断される必要があるため、ステータスコードが 4 の場合は、サーバーから返されたデータが完全に受信されたことを意味し、status は、readyState が 4 に等しいことを示します。サーバーの戻りステータスコードを確認し、両者の間で順序を交換できないようにします。

4) 質問: 開発中に Ajax をデバッグするにはどうすればよいですか?

① Ajax 構文エラーの場合は、IE のステータスバーまたは Firefox の Firebug プラグインのコンソールから直接キャプチャできます。

② サーバー側のエラーについては、開発中に異常な戻り結果を発見した場合、httpwatchまたはW3Cブラウザのネットワークパネルを通じてデバッグできます。

httpwatch:

ファイアバグ:

Google:

③ 開発中のロジックエラーへの対処方法

5. 実用的なアプリケーション: Ajax を使用してユーザー名が一意であるかどうかを確認する

demo06.php

注: 実際のアプリケーションのケースでは、Ajax+PHP を使用してユーザー名が一意であるかどうかの検証を完了できますが、実行時に上記のケースでは IE ブラウザーでキャッシュの問題が発生し、異常が発生することがわかりました。実際のプロジェクト開発、この問題をどのように解決するか?

4. Ajax のキャッシュの問題を解決する

1. IEキャッシュとは何ですか?

IE ブラウザで初めて特定の URL アドレスに get リクエストを送信すると、システムはリクエストされたリソースファイルを自動的にキャッシュし、クライアントブラウザに保存します。このファイルを「IE キャッシュ」と呼びます。

2. IEキャッシュ機能

Microsoft は、独自の IE ブラウザでキャッシュテクノロジを使用して、ユーザーがサーバー側の応答データを迅速に取得できるようにします。

実装プロセス: IE ブラウザがリクエストされたリソースファイルをキャッシュした後、次回同じ URL にリクエストが送信されるときに、システムはキャッシュされたファイルを自動的に呼び出します。ただし、サーバー側のデータが更新されると最新のデータをリアルタイムに取得できないという実用化の欠点もあります。

3. Ajax テクノロジーにおける get リクエストのキャッシュ問題を解決する

1) 乱数を使用してキャッシュの問題を解決する

実行結果:

注: 乱数を使用してリクエストの URL アドレスを人為的に変更し、各リクエストの URL が矛盾するようにすることもできます。ただし、乱数は生成される乱数が毎回一意であることを保証するものではなく、重複が発生する可能性もあります。また、リクエストが行われるたびにキャッシュファイルが生成されるため、クライアント側では乱数によって大量のキャッシュファイルが生成されてしまいます。