PHP ajax の例_PHP チュートリアル

[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＜/a> というリンクがあるとします。リンクをクリックすると、更新せずにリンクの内容が表示されます。毛織物ですか？
//リンクを次のように変更します:
＜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); }

その後、ユーザーが「ニュース 1」リンクをクリックすると、取得したコンテンツは下位の対応するレイヤーに表示され、ページは更新されません。もちろん、上記の show.php ファイルは省略しました。show.php ファイルが存在し、データベースから ID 1 のニュースを正常に抽出できると仮定しました。

このメソッドは、フォームなどを含むページ上のあらゆる要素に適しています。実際、アプリケーションではフォームに対して多くの操作が行われますが、以下で説明する POST メソッドがより一般的に使用されます。

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.onreadystatechange = function() {
//実行ステータスが成功の場合、指定されたレイヤーに戻り情報を書き込みます
if (ajax.readyState == 4 && ajax.status == 200) {
msg.innerHTML = ajax.responseText; }
}
}

POST メソッドを使用するプロセスは大まかに次のとおりです。 もちろん、実際の開発状況はさらに複雑になる可能性があるため、開発者はゆっくり考える必要があります。

4. 非同期コールバック(擬似Ajaxメソッド)

通常の状況では、Get メソッドと Post メソッドで Ajax を使用して現在の問題を解決できますが、アプリケーションの複雑さには制限があります。もちろん、開発中は Ajax が使用できない場合がありますが、Ajax の効果をシミュレートする必要があります。したがって、疑似 Ajax を使用してニーズを実現できます。

疑似 Ajax の一般原則は、通常のフォームまたはその他のものを送信しますが、送信された値をフローティング フレームにターゲットにするため、ページは更新されません。ただし、JavaScript が実行結果のプロンプト情報をシミュレートするために使用されますが、これは現実ではないため、実行結果がどのようなものかを示すために、実行結果を非同期でコールバックする必要があります。

要件が画像をアップロードすることであり、アップロード後の画像のステータス (アップロードが成功したかどうか、ファイル形式が正しいかどうか、ファイル サイズが正しいかどうかなど) を知る必要があるとします。次に、Ajax 呼び出しのプロセスを正常にシミュレートできるように、ターゲット ウィンドウが実行結果をウィンドウに返す必要があります。

次のコードは少し長く、Smarty テンプレート テクノロジに関連しています。詳しく知らない場合は、関連する技術情報をお読みください。

アップロードファイル：upload.html
//フォームをアップロードし、ターゲット属性をフローティングフレーム iframe1 として指定します
＜form action="/upload.php" method="post" enctype="multipart/form-data" name="upload_img" target="iframe1">
アップロードする画像を選択してください:

＜input type="submit" value="写真をアップロード">
＜/フォーム＞
// プロンプト情報を表示するレイヤー
＜div id="メッセージ" style="display:none">＜/div＞

// ターゲットウィンドウとして使用されるフローティングフレーム
＜iframe name="iframe1" width="0" height="0"scrolling="no">＜/iframe>

アップロードされた PHP ファイルを処理します:upload.php
＜?php

/* 定数を定義します */

//アップロードに許可される MIME 形式を定義します
定義("UPLOAD_IMAGE_MIME", "image/pjpeg,image/jpg,image/jpeg,image/gif,image/x-png,image/png"); //画像サイズ、バイトを許可します
定義("UPLOAD_IMAGE_SIZE", 102400);
//画像サイズはKB単位で表します
定義("UPLOAD_IMAGE_SIZE_KB", 100); //画像アップロード用のパス
定義("UPLOAD_IMAGE_PATH", "./upload/");
//許可されている画像形式を取得します
$mime =explode(",", USER_FACE_MIME);
$is_vaild = 0;

//許可されているすべての形式をループします
foreach ($mime を $type として)
{
if ($_FILES['image']['type'] == $type)
{
$is_vaild = 1;
}
}

//形式が正しく、サイズを超えていない場合はアップロードしてください
if ($is_vaild && $_FILES['image']['size']＜=USER_FACE_SIZE && $_FILES['image']['size']＞0)
{
if (move_uploaded_file($_FILES['image']['tmp_name'], USER_IMAGE_PATH . $_FILES['image']['name']))
{
$upload_msg="写真が正常にアップロードされました!";
}
それ以外は
{
$upload_msg = "画像ファイルのアップロードに失敗しました";
}
}
それ以外
{
$upload_msg = "画像のアップロードに失敗しました。ファイルが USER_FACE_SIZE_KB を超えている可能性があります。";
}

//テンプレートファイルを解析します
$smarty->assign("upload_msg", $upload_msg);
$smarty->display("upload.tpl");

?＞

テンプレートファイル：upload.tpl

{if $upload_msg != ""}
callbackMessage("{$upload_msg}"); {/if}

//親ウィンドウに情報を表示するために使用されるコールバック JavaScript 関数
関数 callbackMessage(msg)
{
//親ウィンドウがメッセージを表示するレイヤーを開きます
parent.document.getElementById("message").style.display = "ブロック";
//このウィンドウで取得したメッセージを書き込みます
parent.document.getElementById("message").innerHTML = msg;
//そして、3 秒後に親ウィンドウのメッセージを自動的に閉じるように設定します
setTimeout("parent.document.getElementById('message').style.display = 'none'", 3000);
}

非同期コールバックを使用する手順は少し複雑ですが、基本的には Ajax の機能と情報プロンプトが受け入れられたテンプレートに多数ある場合は、状況に応じてレイヤーを設定することで対応できます。

www.bkjia.com