在這個號稱 web 2.0 的時代，寫網站，尤其是還用到了大量的 JavaScript，如果與使用者的互動還沒有用到 Ajax 技術的話，似乎是一件很神奇的事，至於 Ajax 是什麼東西？想瞭解的人可以到這裡去看維基百科上的解釋，這篇就專心寫一下 jQuery 中的 Ajax 部份。
程式範例：下載點
這個 PHP 程式很簡單， recive.php它只回應一個index.php傳入的字串，所以我們現在要做的事情便是：按下按鈕後，向 server 端的 index.php向recive.php 發出一個 request，然後把它回應的東西放alert出來。所以我們把 Submit 函式的部份寫成這樣：index.php
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <script type="text/javascript" src="jquery.js" ></script> <script> var Submit=function(){ var URLs="recive.php"; $.ajax({ url: URLs, data: $('#sentToBack').serialize(), type:"POST", dataType:'text',
success: function(msg){
alert(msg); },
error:function(xhr, ajaxOptions, thrownError){
alert(xhr.status); alert(thrownError); } }); } </script> </head> <body> <form id="sentToBack"> <input type="text" name="Text"/> <input type="button" value="送出" onClick="Submit()"/> </form> </body> </html> |
ajax當中的參數：
url：指定要進行呼叫的位址。
data：傳送至Server的資料，會自動轉為query string的型式，如果是GET請求還會幫你附加到URL。可用processData選項禁止此自動轉換。物件型式則為一Key/Value pairs。這個範例程式，是使用serialize()，會把name為sentToBack的表單中的資料傳送出去，型態的部分要看type的設定，一般表單都是用POST或是GET。
type：請求方式，POST/GET。
dataType：預期Server傳回的資料類型，如果沒指定，jQuery會根據HTTP MIME Type自動選擇以responseXML或responseText傳入你的success callback。可選的資料類型有：
xml：傳回可用jQuery處理的XML
html：傳回HTML，包含jQuery會自動幫你處理的script tags。
script：傳回可執行的JavaScript。(script不會被自動cache，除非cache設為true)
json：傳回JSON
jsonp：在URL加上?callback=?參數，並在Server端配合送回此jsonp callback。
text：傳回純文字字串。
xml：傳回可用jQuery處理的XML
html：傳回HTML，包含jQuery會自動幫你處理的script tags。
script：傳回可執行的JavaScript。(script不會被自動cache，除非cache設為true)
json：傳回JSON
jsonp：在URL加上?callback=?參數，並在Server端配合送回此jsonp callback。
text：傳回純文字字串。
success：請求成功時執行函式。
function (data, textStatus) {
// data 可以是 xmlDoc, jsonObj, html, text, 但還是要參考datatype
}
function (data, textStatus) {
// data 可以是 xmlDoc, jsonObj, html, text, 但還是要參考datatype
}
error：請求失敗時執行函式。 function (xhr, ajaxOptions, thrownError) {
//通常ajaxOptions或thrownError只有一個有值
}
這個很重要，因為有時候Sever寫好的程式不容易測試，可以透過這個函數把錯誤顯示出來。
其他可能比較會用的參數：
//通常ajaxOptions或thrownError只有一個有值
}
這個很重要，因為有時候Sever寫好的程式不容易測試，可以透過這個函數把錯誤顯示出來。
其他可能比較會用的參數：
complete：請求完成時執行的函式(不論結果是success或error)。
function (XMLHttpRequest, textStatus) {
// the options for this ajax request
}
function (XMLHttpRequest, textStatus) {
// the options for this ajax request
}
beforeSend：發送請求之前可在此修改XMLHttpRequest物件，如添加header等，你可以在此函式中return flase取消Ajax request。
function (XMLHttpRequest) {
// the options for this ajax request
}
function (XMLHttpRequest) {
// the options for this ajax request
}
其他更多相關的資訊：http://api.jquery.com/jQuery.ajax/
接下來編寫PHP：recive.php
echo $_POST["Text"];
|
下面是index.php 會看到的畫面。
當你打下AAA送出後會看到的畫面。
再來我們在recive.php 故意寫錯程式，如果你沒有加error，會找不出問題。讓你看看有什麼差別。
ehco //故意的，你可以測測看。
echo $_POST["Text"]; |
