jquery.ajax之beforeSend方法使用介紹

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

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

常見的一種效果，在用ajax請求時，沒有返回前會出現(xiàn)前出現(xiàn)一個轉(zhuǎn)動的loading小圖標(biāo)或者“內(nèi)容加載中..”，用來告知用戶正在請求數(shù)據(jù)。這個就可以用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,//請求出錯 

      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>請求成功，回傳數(shù):"+msg+"<div>");

}

方法beforeSend，用于在向服務(wù)器發(fā)送請求前添加一些處理函數(shù)。這是一個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)容加載完畢時，我們可以通過ID選擇器，將該標(biāo)簽中的文本替換成最終的內(nèi)容。以此來取代beforeSend，效率更高。

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

您可能感興趣的文章:

相關(guān)文章

使用jQuery簡化Ajax開發(fā) Ajax開發(fā)入門
jQuery是一個可以簡化 JavaScript™以及AJAX（Asynchronous JavaScript + XML，異步Javascript和XML）編程的Javascript庫。不同于其他的Javascript庫，jQuery有他自己的哲學(xué)，使你可以很簡單的編寫代碼。
2009-10-10
jQuery使用DataTable實(shí)現(xiàn)刪除數(shù)據(jù)后重新加載功能
利用jQuery Datatable和artTemplate組合來做的表格。但是當(dāng)刪除數(shù)據(jù)時，需要重新加載table里的數(shù)據(jù)。接下來通過本文給大家分享jQuery使用DataTable實(shí)現(xiàn)刪除數(shù)據(jù)后重新加載功能，需要的朋友參考下
2017-02-02
【經(jīng)典源碼收藏】jQuery實(shí)用代碼片段(篩選,搜索,樣式,清除默認(rèn)值,多選等)
這篇文章主要介紹了jQuery實(shí)用代碼片段,包括篩選,搜索,樣式,清除默認(rèn)值,多選等多種功能.具有一定參考借鑒價值,需要的朋友可以參考下
2016-06-06
jQuery validate(submitHandler函數(shù))驗證通過發(fā)送Ajax(實(shí)例詳解)
這篇文章主要介紹了jQuery validate(submitHandler函數(shù))驗證通過發(fā)送Ajax，可以用validate框架驗證元素，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2022-10-10
超級有用的13個基于jQuery的內(nèi)容滾動插件和教程
這篇文章與大家分享13個超級有用的 jQuery 內(nèi)容滾動插件和教程。您可能經(jīng)常能看到一些網(wǎng)站上特色區(qū)域的內(nèi)容以滾動方式變化，這是一種在有限的網(wǎng)頁空間內(nèi)展示更多內(nèi)容的良好方式，而且能吸引用戶注意力。
2011-07-07
easyUI 實(shí)現(xiàn)的后臺分頁與前臺顯示功能示例
這篇文章主要介紹了easyUI 實(shí)現(xiàn)的后臺分頁與前臺顯示功能,結(jié)合實(shí)例形式分析了easyUI 后臺數(shù)據(jù)交互、分頁與前臺顯示相關(guān)操作技巧及注意事項,需要的朋友可以參考下
2020-06-06
jquery中map函數(shù)遍歷數(shù)組用法實(shí)例
這篇文章主要介紹了jquery中map函數(shù)遍歷數(shù)組用法,實(shí)例分析了jQuery中map函數(shù)遍歷數(shù)組的相關(guān)技巧,并提供了一個自定義遍歷數(shù)組函數(shù)供參考之用,需要的朋友可以參考下
2015-05-05
如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù)(附源碼下載)
ECharts地圖主要用于地理區(qū)域數(shù)據(jù)的可視化，展示不同區(qū)域的數(shù)據(jù)分布信息，通過本文給大家介紹如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù)，需要的朋友參考下吧
2016-02-02
jQuery 限制輸入字符串長度
這篇文章主要介紹了jQuery限制輸入字符串長度的方法，實(shí)例講解，非常實(shí)用,需要的朋友可以參考下。
2016-06-06
jQuery的基本概念與高級編程
這篇文章主要介紹了jQuery的基本概念與高級編程的簡單介紹，有需要的小伙伴可以參考下。
2015-05-05