PHP 開発における AJAX テクノロジーの簡単な応用_PHP チュートリアル

AJAX は、間違いなく 2005 年に最もホットな Web 開発テクノロジーの 1 つです。もちろん、この功績を Google から切り離すことはできません。私は普通の開発者であり、AJAX をあまり使用しませんが、AJAX の使用経験を簡単に共有します。 (この記事は、ユーザーが JavaScript、HTML、CSS などの基本的な Web 開発能力をすでに持っていることを前提としています)

[AJAX の概要]

Ajax は、クライアント側のスクリプトを使用して Web サーバーとデータを交換する Web アプリケーション開発方法です。 Web ページは、再調整する対話プロセスを中断することなく動的に更新できます。 Ajax を使用すると、ユーザーはネイティブ デスクトップ アプリケーションに近い、直接的で可用性が高く、よりリッチで動的な Web ユーザー インターフェイスを作成できます。

Asynchronous JavaScript and XML (AJAX) は新しいテクノロジではありませんが、Cascading Style Sheets (CSS)、JavaScript、XHTML、XML、Extensible Style Language Transformations (XSLT) などのいくつかの既存のテクノロジを使用して、同様の外観とアクションの Web アプリケーション ソフトウェアを開発します。デスクトップソフトウェアに。

[AJAX実行原理]

Ajax インタラクションは、XMLHttpRequest と呼ばれる JavaScript オブジェクトから始まります。名前が示すように、クライアント側スクリプトが HTTP リクエストを実行できるようにし、XML 形式のサーバー応答を解析します。 Ajax 処理の最初のステップは、XMLHttpRequest インスタンスを作成することです。 HTTP メソッド (GET または POST) を使用してリクエストを処理し、ターゲット URL を XMLHttpRequest オブジェクトに設定します。

HTTP リクエストを送信するときは、ブラウザがハングしてサーバーからの応答を待つのではなく、ページを介してユーザーのインターフェイス操作に応答し続け、実際にサーバー応答が到着したら処理する必要があります。これを実現するには、XMLHttpRequest にコールバック関数を登録し、XMLHttpRequest リクエストを非同期にディスパッチします。制御はすぐにブラウザに返され、サーバーの応答が到着するとコールバック関数が呼び出されます。

【AJAX実践応用】

1.Ajaxの初期化

Ajax は実際には XMLHttpRequest オブジェクトを呼び出すため、まずこのオブジェクトを呼び出す必要があります。Ajax を初期化する関数を構築します。

/**

* xmlhttp オブジェクトを初期化します
*/
関数 InitAjax()
{
var ajax=false; {
を試してください ajax = 新しい ActiveXObject("Msxml2.XMLHTTP"); } キャッチ (e) {
試してください {
ajax = 新しい ActiveXObject("Microsoft.XMLHTTP")
} キャッチ (E) {
ajax = false
}
}
if (!ajax && XMLHttpRequest のタイプ!=未定義) {
ajax = 新しい XMLHttpRequest(); }
ajax を返します;
}




このコードは XMLHTTP コンポーネントを呼び出すため、IE ブラウザでのみ使用できると思われるかもしれません。いいえ、テストした結果、Firefox も使用できます。
次に、Ajax 操作を実行する前に、まず InitAjax() 関数を呼び出して Ajax オブジェクトをインスタンス化する必要があります。

2. Getメソッドを使用します

ここでの最初のステップは、Get リクエストを実行し、/show.php?id=1 を取得するために必要なデータを追加することです。では、何をすべきでしょうか?

ニュース 1 というリンクがあるとします。リンクをクリックすると、更新せずにリンクの内容が表示されます。毛織物ですか？

その後、ユーザーが「ニュース 1」リンクをクリックすると、取得したコンテンツは下位の対応するレイヤーに表示され、ページは更新されません。もちろん、上記の show.php ファイルは省略しました。show.php ファイルが存在し、データベースから ID 1 のニュースを正常に抽出できると仮定しました。 このメソッドは、フォームなどを含むページ上のあらゆる要素に適しています。実際、アプリケーションではフォームに対して多くの操作が行われますが、以下で説明する POST メソッドがより一般的に使用されます。

//リンクを次のように変更します:
＜a href="#" onClick="getNews(1)">ニュース1＜/a＞

//そしてニュースを受信するレイヤーを設定し、表示しないように設定します:
＜div id="show_news">＜/div＞

同時に、対応する JavaScript 関数を構築します:

関数getNews(ニュースID)
{
//パラメータ newsID が渡されない場合
if (typeof(ニュースID) == 未定義)
{
false を返します;
}
//Ajax には URL アドレスが必要です
var url = "/show.php?id="+ ニュースID;

//ニュース表示レイヤーの位置を取得します
var show = document.getElementById("show_news");
//Ajax オブジェクトをインスタンス化します
var ajax = InitAjax();

// Get メソッドを使用してリクエストを行います
ajax.open("GET", URL, true);
//実行ステータスを取得する
ajax.onreadystatechange = function() {
//実行ステータスが正常であれば、返されたコンテンツを上で指定したレイヤーに割り当てます
if (ajax.readyState == 4 && ajax.status == 200) {
show.innerHTML = ajax.responseText; }
}
//空で送信
ajax.send(null); }

3. POSTメソッドを使用します

実際、POST メソッドは Get メソッドと似ていますが、Ajax を実行する場合は少し異なります。簡単に説明します。

ユーザーが情報を入力するフォームがあるとします。ユーザー情報を更新せずにデータベースに保存し、ユーザーに成功のプロンプトを表示します。





//フォームの構築にはアクションやメソッドなどの属性は必要ありません。すべて ajax によって行われます。 ＜フォーム名="user_info"> 名前:
年齢:

性別:


＜input type="button" value="フォーム送信" onClick="saveUserInfo()">
＜/フォーム＞
// 戻り情報を受け入れるレイヤーを構築します:
＜div id="msg">＜/div＞




上記のフォームではターゲットなどの情報を送信する必要はなく、送信ボタンの種類はボタンのみであるため、すべての操作は onClick イベントの saveUserInfo() 関数によって実行されることがわかります。この関数について説明しましょう:

関数 saveUserInfo()
{
//受入返品情報レイヤーを取得します
var msg = document.getElementById("msg");

//フォームオブジェクトとユーザー情報の値を取得します
var f = document.user_info;
var userName = f.user_name.value;
var userAge = f.user_age.value;
var userSex = f.user_sex.value;

//フォームのURLアドレスを取得
var url = "/save_info.php";

//POST 値が必要です。&
を介して各変数を接続します var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;

//Ajax をインスタンス化します
var ajax = InitAjax();

//Post メソッド経由で接続を開きます
ajax.open("POST", URL, true);
//転送するファイルのHTTPヘッダー情報を定義します
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POSTデータを送信
ajax.send(postStr);

//実行ステータスを取得する
ajax.onrea

http://www.bkjia.com/PHPjc/486518.html

www.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/486518.html技術記事 AJAX は、間違いなく 2005 年に最も注目されている Web 開発テクノロジの 1 つです。もちろん、この功績は Google から切り離すことはできません。私は AJAX をあまり使用しない普通の開発者なので、ただ...