AJAX 技術在 PHP 中的簡單使用（2）

日期:2006-09-28  作者:喜騰小二  來源:PHPChina


　3.
使用POST方式

　　其實POST方式跟Get方式是比較類似的，隻是在執行Ajax的時候稍有不同，我們簡單講述一下。

　　假設有一個使用者輸入資料的表單，我們在無重新整理的情況下把使用者資料儲存到資料庫中，同時給使用者一個成功的提示。

//建置一個表單，表單中不需要action、method之類的內容，全部由ajax來搞定了。
＜form
name="user_info"＞
姓名：＜input type="text" name="user_name" /＞＜br
/＞
年齡：＜input type="text" name="user_age" /＞＜br /＞
性別：＜input type="text"
name="user_sex" /＞＜br /＞
＜input type="button" value="提交表單"
onClick="saveUserInfo()"＞
＜/form＞
//建置一個接受返回資訊的層：
＜div
id="msg"＞＜/div＞

　　我們看到上麵的form表單裡沒有需要提交目的等資訊，並且提交按鈕的類型也隻是button，那麼所有操作都是靠onClick事件中的saveUserInfo()函式來執行了。我們描述一下這個函式：

function 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
//上傳表單，指定target內容為浮動框架iframe1
＜form
action="/upload.php" method="post" enctype="multipart/form-data"
name="upload_img" target="iframe1"＞

選擇要上傳的圖片：＜input type="file"
name="image"＞＜br /＞
＜input type="submit"
value="上傳圖片"＞
＜/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");

　//圖片允許大小，位元組
　define("UPLOAD_IMAGE_SIZE",
102400);
　//圖片大小用KB為單位來表示
　define("UPLOAD_IMAGE_SIZE_KB", 100);

　//圖片上傳的路徑
　define("UPLOAD_IMAGE_PATH", "./upload/");

　//獲取允許的影像格式
　$mime = explode(",", USER_FACE_MIME);
　$is_vaild =
0;
　//遍歷所有允許格式
　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";
　//把本視窗獲取的訊息寫上去
　parent.document.getElementById("message").innerHTML
=
msg;
　//並且設定為3秒後自動關閉父視窗的訊息顯示
　setTimeout("parent.document.getElementById('message').style.display
= 'none'",
3000);
}

　　使用非同步回呼的方式過程有點復雜，但是基本實現了Ajax、以及資訊提示的功能，如果接受範本的資訊提示比較多，那麼還可以透過設定層的方式來處理，這個隨機應變吧。

　　[
結束語
]

　　這是一種非常良好的Web開發技術，雖然出現時間比較長，但是到現在才慢慢火起來，也希望帶給Web開發界一次變革，讓我們朝RIA（富用戶端）的開發邁進，當然，任何東西有利也有弊端，如果過多的使用JavaScript，那麼用戶端將非常臃腫，不利於使用者的浏覽體驗，如何在做到快速的親前提下，還能夠做到好的使用者體驗，這就需要Web開發者共同努力了。


<<<返回技術中心

技術文章

站內新聞

我要啦免费统计