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

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 が矛盾するようにすることもできます。ただし、乱数は生成される乱数が毎回一意であることを保証するものではなく、重複が発生する可能性もあります。また、リクエストが行われるたびにキャッシュファイルが生成されるため、クライアント側では乱数によって大量のキャッシュファイルが生成されてしまいます。

2) タイムスタンプを使用してキャッシュの問題を解決する (重要なポイント)

実際の開発では、タイムスタンプが決して繰り返されないことがわかっているため、この方法を使用してキャッシュの問題を解決できます。

実行結果:

注: タイムスタンプを使用してキャッシュの問題を解決できますが、クライアント上に大量のキャッシュ ファイルも生成されます。

3) ファイルの最終変更時刻を使用してキャッシュの問題を解決します (重要)

キャッシュコアメカニズム:

キャッシュの問題を解決したい場合は、キャッシュの問題を解決するためにチェックされるたびにサーバーのリソース ファイルと矛盾するように If-Modified-Since の値を人為的に変更できます。

実行結果:

注: 上記のプログラムはキャッシュの問題を解決できますが、大量のキャッシュ ファイルも生成されますか?

答え: いいえ、毎回リクエストする URL アドレスは同じであるため、2 回目のリクエストが行われると、システムはキャッシュ ファイルを更新するだけで再生成しません。

4) キャッシュの無効化機能を使用して Ajax キャッシュの問題を解決する

次のメニューをサーバー側のページに追加すると、現在のページをキャッシュしないようにブラウザに指示でき、それによってキャッシュの問題を解決できます。

ヘッダー関数の主な機能: ブラウザーに特定の操作を実行するよう指示することは、リクエストされるたびに最新のデータを再取得する必要がないことをブラウザーに指示することを意味します。キャッシング。

実行結果:

上記のプログラムは、究極の解決策であるキャッシュを根本的に無効にします。

5. Ajax でのリクエストの投稿

1. get リクエストと post リクエストの違い

① パラメータを渡すさまざまな方法

get リクエストは、パラメータを渡すときに URL の末尾にパラメータを追加します。

ポストリクエストでパラメータを渡すとき、パラメータはリクエストの空行位置に追加されます

② セキュリティの違い

Post リクエストのセキュリティは Get リクエストのセキュリティよりわずかに高い

③ パラメータを渡す際のパラメータのサイズが異なる

getリクエストパラメータが渡される場合、最大値は2kbですが、postリクエストには理論上サイズ制限はありませんが、実際のプロジェクト開発では主にphp.iniファイルの影響を受けます。 8Mか2Mです。

④ リクエストヘッダー情報が異なります

リクエストを取得:

投稿リクエスト:

比較すると、post リクエストには get リクエストよりも 1 つ多くのリクエスト ヘッダー情報があります。

Content-type:application/x-www-form-urlencoded

2. Ajax でのポストリクエストの 6 つのステップ

ステップ 1: Ajax オブジェクトを作成する

ステップ 2: コールバック関数を設定する

ステップ 3: Ajax オブジェクトを初期化する

ステップ4: リクエストヘッダー情報を設定する(Content-typeを設定する)

ステップ 5: Ajax リクエストを送信する

ステップ 6: 判断と実行

demo08.php

3. 実践的なアプリケーション: Ajax+PHP を使用してリフレッシュフリーログイン機能を実装する

demo09.php

6. Ajax の XML データ

1. XML とは

いわゆる XML は拡張可能なマークアップ言語であり、主に大量のデータの送信と保存を実現します。

2. XML 実行の概略図

PHP は XML 解析操作を実装でき、合計 2 つのソリューションを提供します。

PHP DOM モデル (追加、削除、変更操作の実装)

PHP SimpleXML モデル (クエリ操作の実装)

1) PHP DOM モデル (非標準 DOM モデル)

① メモリ空間を開く

② XMLファイルをメモリにロードしてDOMツリー構造を形成します

【非標準DOMモデル】

【標準DOMモデル】

JavaScript の DOM モデルは標準 DOM モデルです。実際のアプリケーションでは、標準 DOM モデルと非標準 DOM モデルの主な違いは次のとおりです。

非標準 DOM モデル: 点 à を検索し、nodeValue 属性を通じてその値を直接出力します。

標準 DOM モデル: ポイントを見つけるàその子ノードを見つけるànodeValue 属性を通じてテキスト ノード値を出力する

3. Ajax+XML を使用して大量のデータを解析する

例: Ajax+XML を使用して 2 つの数値の四則演算の結果を返す

使用する知識:

childNodes: 現在の要素のすべての子要素を取得し、データを返します

demo10.php

http://www.bkjia.com/PHPjc/1117677.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/1117677.html技術記事 Ajax テクノロジー 1、Ajax テクノロジー 1、Ajax の概要 1、歴史的起源 1998 年、Microsoft の Outlook Web Access 研究開発チームは、当時クライアントで使用できるテクノロジーを IE ブラウザーに統合しました...