常見的一種效果,在用ajax請求時,沒有返回前會出現前出現一個轉動的loading小表徵圖或者“內容載入中..”,用來告知使用者正在請求資料。這個就可以用beforeSend方法來實現。
下載demo:ajax loading
代碼如下:
複製代碼 代碼如下:
function test_ajax(){
$.ajax(
{
type:"GET",//通常會用到兩種:GET,POST。預設是:GET
url:"a.php",//(預設: 當前頁地址) 發送請求的地址
dataType:"html",//預期伺服器返回的資料類型。
beforeSend:beforeSend, //發送請求
success:callback, //請求成功
error:error,//請求出錯
complete:complete//請求完成
});
}
function error(XMLHttpRequest, textStatus, errorThrown){
// 通常情況下textStatus和errorThown只有其中一個有值
$("#showResult").append("<div>請求出錯啦!</div>");
}
function beforeSend(XMLHttpRequest){
$("#showResult").append("<div><img src='loading.gif' /><div>");
}
function complete(XMLHttpRequest, textStatus){
$("#showResult").remove();
}
function callback(msg){
$("#showResult").append("<div>請求成功,回傳數:"+msg+"<div>");
}
方法beforeSend,用於在向伺服器發送請求前添加一些處理函數。這是一個ajax事件,在ajax請求開始之前就被觸發,通常允許使用者修改XMLHttpRequest對象(比如說設定附加的頭部資訊),關於ajax事件的解釋可參考文檔:http://docs.jquery.com/Ajax_Events
我們還見到一種情況,很多網站在載入內容的過程中給出“資料載入中,請稍候”的提示,當內容被載入完畢後顯示內容。可以設定預設文本顯示為載入中的提示,當內容載入完畢時,我們可以通過ID選取器,將該標籤中的文本替換成最終的內容。以此來取代beforeSend,效率更高。
什麼時候用beforeSend,什麼時候用文本替換,取決於ajax請求前後你所展示的DOM元素是否一致,如果你所展示的DOM元素在請求之前已經存在,那麼通過上述文本替換的方式來處理會好些,如果除此以外你還需增加其他的需求,那麼還是用beforeSend來處理吧。