常見的一種效果,在用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來處理吧。