AJAX+PHP アプリケーション チュートリアルのサンプル ソース コード

チュートリアル|例|ajax

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

【AJAX 入門】

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

非同期 JavaScript および XML (AJAX) は新しいテクノロジではありませんが、ルック アンド フィールと Web を開発するために、カスケード スタイル シート (CSS)、JavaScript、XHTML、XML、Extensible Style Language Transformations (XSLT) などのいくつかの既存のテクノロジを使用しています。デスクトップ ソフトウェアと同様に動作するアプリケーション ソフトウェア。

[AJAX 実行原理]

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

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

【AJAXの実践】

1. Ajaxを初期化する

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

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

/**
* xmlhttp オブジェクトを初期化します
*/
function InitAjax()
{
var ajax=false;
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP") {
try {
ajax = new ActiveXObject ("Microsoft.
}
return ajax;
}



このコードは XMLHTTP コンポーネントを呼び出しているため、IE ブラウザでのみ使用できると思われるかもしれません。いいえ、私のテストの後、Firefox も使用できます。使用済み。

そして、Ajax 操作を実行する前に、まず InitAjax() 関数を呼び出して Ajax オブジェクトをインスタンス化する必要があります。

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

ニュース 1 ＜/a> というリンクがあるとします。リンクをクリックすると、更新せずにリンクの内容が表示されます。どうすればよいでしょうか？




//リンクを
＜a href="#" ＞ニュース1＜/a＞に変更します。
//そしてニュースを受信するレイヤーを設定し、表示しないように設定します:
＜div id="show_news">
function getNews(newsID)

同時に、対応する JavaScript 関数が構築されます:

{
//パラメータnewsIDが渡されない場合
if (typeof(newsID) == 'unknown')
{ return false; }

//Ajaxを必要とするURLアドレス
var url = "/show.php?id="+ newsID;
//ニュース表示レイヤーの位置を取得します
var show = document.getElementById("show_news")
//Ajaxオブジェクトをインスタンス化します
var ajax = InitAjax() ;
//Getメソッドを使ってリクエストを行う
ajax.open("GET", url, true)
//実行ステータスを取得する
ajax.onreadystatechange = function() {
//If実行ステータスが正常であれば、返されたコンテンツは上で指定したレイヤーに割り当てられます
if (ajax.readyState == 4 && ajax.status == 200) {
show.innerHTML = ajax.responseText
}
}
/ /空の送信
ajax.send( null);

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

このメソッドは、フォームなどを含むページ上のあらゆる要素に適しています。実際、アプリケーションではフォームに対して多くの操作が行われますが、これについては後述します。

3. POSTメソッドを使う

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

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

//フォームを構築します。フォーム内にアクションやメソッドなどの属性は必要ありません。すべて ajax によって行われます。

名前:

年齢:
性別:＜input type="text" name="user_sex" />＜br />
＜input type="button" value="フォームを送信" ＞
＜/form>
//返品受付情報を構築するレイヤー:
＜div id="msg">＜/div＞

上記フォームではターゲット等の情報を送信する必要はなく、送信ボタンの種類もボタンのみなので全ての操作が可能であることが分かります。 onClick イベントの saveUserInfo() 関数が実行されます。この関数を説明しましょう:

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

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

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

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

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

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

function saveUserInfo()
{
//受理返品情報レイヤーを取得
var msg = document.getElementById("msg");
//フォームオブジェクトとユーザー情報の値を取得
var f = document.user_info;
var userName = f.user_name.value;
var userSex = f.user_sex.value;
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
}
}
}

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

アップロードする画像を選択してください:


＜/ form ＞
//プロンプト情報を表示するレイヤー
＜div id="message" style="display:none">＜/div＞
//ターゲットウィンドウとなるフローティングフレーム
＜iframe name="iframe1" width= "0" height="0"scrolling="no">＜/iframe＞

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

＜?php
/*定数の定義*/
//アップロードを許可するMIME形式を定義
define("UPLOAD_IMAGE_MIME", "image/pjpeg,image/jpg,image/jpeg,image/gif,image/ x-png, image/png");
//画像サイズを許可、bytes
define("UPLOAD_IMAGE_SIZE", 102400);
//画像サイズはKB単位で表す
define("UPLOAD_IMAGE_SIZE_KB", 100);
//画像のアップロードパス
Define("UPLOAD_IMAGE_PATH", "./upload/"); // 許可される画像形式を取得する
$mime =explode(",", USER_FACE_MIME); //すべての許可された形式をトラバースします
foreach ($mime as $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 ="写真が正常にアップロードされました!";
}
else
{
$upload_msg = "画像ファイルのアップロードに失敗しました";
}
}
else
{
$upload_msg = "画像のアップロードに失敗しました。ファイルが ".USER_FACE_SIZE_KB." KB を超えている可能性があります。ファイルが空であるか、ファイル形式が正しくありません。正しい";
}
//テンプレートファイルを解析します
$smarty->assign("upload_msg", $upload_msg);
$smarty->display("upload.tpl" );
?>
テンプレート ファイル: Upload.tpl
{if $upload_msg != ""}
callbackMessage("{$upload_msg}");
{/if}
//コールバック JavaScript 関数。親ウィンドウ
function callbackMessage(msg)
{
//親ウィンドウでメッセージが表示されているレイヤーを開く
parent.document.getElementById("message").style.display = "block";
//Writeこのウィンドウで取得したメッセージ
parent.document.getElementById("message ").innerHTML = msg;
//そして親ウィンドウのメッセージ表示を3秒後に自動的に閉じるように設定
SetTimeout("parent.document.getElementById( 'メッセージ').style.display = 'なし'", 3000);
}



非同期コールバックを使用する処理は少し複雑ですが、基本的にはAjaxの機能と情報プロンプトがテンプレート内にある場合は、レイヤーを設定することで対応できます。

[結論]

これは非常に優れた Web 開発テクノロジーであり、古くから存在していますが、普及したのは今だけです。私も Web 開発の世界に変化をもたらしたいと考えています。 RIA への移行 ( リッチクライアント (リッチクライアント) の開発が進んでいます。もちろん、何事にもメリットとデメリットがあります。JavaScript を使いすぎると、クライアントが非常に肥大化してしまい、ユーザーのブラウジングエクスペリエンスに貢献しません。優れたユーザー エクスペリエンスを実現するには、Web 開発者の共同の努力が必要です。