DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery.ajax之beforeSend方法使用介紹
jquery.ajax之beforeSend方法使用介紹
編輯:JQuery特效代碼     

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved