快捷導(dǎo)航

jquery.ajax之beforeSend方法使用介紹

更新時(shí)間：2014年12月08日 09:25:05 投稿：junjie

這篇文章主要介紹了jquery.ajax之beforeSend方法使用介紹,beforeSend方法用于在向服務(wù)器發(fā)送請求前添加一些處理函數(shù),需要的朋友可以參考下

常見的一種效果，在用ajax請求時(shí)，沒有返回前會出現(xiàn)前出現(xiàn)一個(gè)轉(zhuǎn)動的loading小圖標(biāo)或者“內(nèi)容加載中..”，用來告知用戶正在請求數(shù)據(jù)。這個(gè)就可以用beforeSend方法來實(shí)現(xiàn)。

下載demo：ajax loading

代碼如下：

復(fù)制代碼代碼如下:

function test_ajax(){

   $.ajax(

   {

      type:"GET",//通常會用到兩種：GET,POST。默認(rèn)是：GET

      url:"a.php",//(默認(rèn): 當(dāng)前頁地址) 發(fā)送請求的地址

      dataType:"html",//預(yù)期服務(wù)器返回的數(shù)據(jù)類型。

      beforeSend:beforeSend, //發(fā)送請求

      success:callback, //請求成功

      error:error,//請求出錯(cuò) 

      complete:complete//請求完成

   });

}

function error(XMLHttpRequest, textStatus, errorThrown){

  // 通常情況下textStatus和errorThown只有其中一個(gè)有值 

  $("#showResult").append("<div>請求出錯(cuò)啦！</div>");

}

function beforeSend(XMLHttpRequest){

  $("#showResult").append("<div><img src='loading.gif' /><div>");

}

function complete(XMLHttpRequest, textStatus){

  $("#showResult").remove();

}

function callback(msg){

  $("#showResult").append("<div>請求成功，回傳數(shù):"+msg+"<div>");

}

方法beforeSend，用于在向服務(wù)器發(fā)送請求前添加一些處理函數(shù)。這是一個(gè)ajax事件，在ajax請求開始之前就被觸發(fā)，通常允許用戶修改XMLHttpRequest對象（比如說設(shè)置附加的頭部信息），關(guān)于ajax事件的解釋可參考文檔：http://docs.jquery.com/Ajax_Events

我們還見到一種情況，很多網(wǎng)站在加載內(nèi)容的過程中給出“數(shù)據(jù)加載中，請稍候”的提示，當(dāng)內(nèi)容被加載完畢后顯示內(nèi)容?？梢栽O(shè)置默認(rèn)文本顯示為加載中的提示，當(dāng)內(nèi)容加載完畢時(shí)，我們可以通過ID選擇器，將該標(biāo)簽中的文本替換成最終的內(nèi)容。以此來取代beforeSend，效率更高。

什么時(shí)候用beforeSend，什么時(shí)候用文本替換，取決于ajax請求前后你所展示的DOM元素是否一致，如果你所展示的DOM元素在請求之前已經(jīng)存在，那么通過上述文本替換的方式來處理會好些，如果除此以外你還需增加其他的需求，那么還是用beforeSend來處理吧。

您可能感興趣的文章: