不朽情缘输多少钱才能爆大奖

書名： 15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）
作者名：劉鑫
本章字數： 1260字
更新時間： 2020-11-28 16:21:47

3.8 一切Ajax都是基于$.ajax()

在jQuery中，所有Ajax的簡寫函數其實都基于一個基本的ajax()函數，該函數提供Ajax詳細的配置入口，可以對Ajax進行更為深入的控制，適合一些比較特殊的應用場景。ajax()函數的參數只有一個，是一個選項的Object對象，這個選項規定了各種參數的配置規范。

● async(Boolean)：默認設置（默認true）下，所有請求均為異步請求。如果需要發送同步請求，那么將此選項設置為false。注意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行。

● beforeSend(Function)：發送請求前可修改XMLHttpRequest對象的函數，如添加自定義HTTP頭。XMLHttpRequest對象是唯一的參數。

● complete(Function) ：請求完成后回調函數（請求成功或失敗時均調用）。參數為XMLHttpRequest對象和一個描述成功請求類型的字符串。

● contentType(String)：發送信息至服務器時內容的編碼類型（默認是"application/x-www-form-urlencoded"）。默認值適合大多數應用場合。

● data(Object, String)：發送到服務器的數據。將自動轉換為請求字符串格式。在GET請求中將附加在URL后。查看processData選項說明以禁止此自動轉換。格式必須為Key/Value。如果為數組，jQuery就會自動為不同值對應同一個名稱，如{foo:["bar1","bar2"]}轉換為’&foo=bar1&foo=bar2'。

● dataFilter(Function)：給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數：data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。

● dataType(String)：預期服務器返回的數據類型。如果不指定，jQuery就會自動根據HTTP包MIME信息返回responseXML或responseText，并作為回調函數參數傳遞，可用值有xml、html、script、json、jsonp和text。

● error(Function)：請求失敗時調用時間（默認自動判斷(xml或html)）。參數為XMLHttpRequest對象、錯誤信息、（可選）捕獲的錯誤對象。

● global (Boolean)：是否觸發全局Ajax事件（默認為true）。設置為false將不會觸發全局Ajax事件，如ajaxStart或ajaxStop可用于控制不同的Ajax事件。

● jsonp(String)：在一個jsonp請求中重寫回調函數的名字。這個值用來代替在"callback=? "這種GET或POST請求中URL參數里的callback部分，如{jsonp:'onJsonPLoad'}會導致將“onJsonPLoad=? ”傳給服務器。

● username(String)：用于響應HTTP訪問認證請求的用戶名。

● password(String)：用于響應HTTP訪問認證請求的密碼。

● scriptCharset (String)：只有當請求時dataType為jsonp或script，并且type是GET才會用于強制修改charset。通常在本地和遠程的內容編碼中不同時使用。

● success(Function)：請求成功后回調函數。參數為服務器返回數據、數據格式。

● timeout(Number)：設置請求超時時間（毫秒），此設置將覆蓋全局設置。

● url(String)：發送請求的地址（默認為當前頁地址）。

● type(String)：請求方式POST或GET（默認為GET）。注意，其他HTTP請求方法（如PUT和DELETE）也可以使用，但僅部分瀏覽器支持。

● cache(Boolean)：默認為true。dataType為script時默認為false，設置為false將不會從瀏覽器緩存中加載請求信息。

這些選項要么是對某些屬性的控制，要么是對某些事件回調的指定。以下示例將展示一個詳細使用ajax()函數的應用。

【示例3-10】jq_ajaxALL.html

        01    <! DOCTYPE HTML>
        02    <html>
        03         <head>
        04             <title>jQuery使用底層的ajax()函數</title>
        05               <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        06               <script type="text/javascript" src="../jquery-3.1.1.js"></script>
        07               <script type="text/javascript">
        08                    function sendAjax(){
        09                      $.ajax({                   //調用ajax()函數，參數為選項object
        10                           url: 'data.txt',    //url地址
        11                           type: 'GET',         //HTTP請求的方法，這里是GET
        12                           dataType: 'text',   //預期返回數據類型
        13                           data: null,          //POST需要的數據
        14                           error: function(){  //當發生錯誤時的回調
        15                                     alert('error');
        16                                },
        17                           timeout: function(){//發生請求超時的回調
        18                                     alert('time out');
        19                                },
        20                           success: function(data){//成功以后的回調，也就是
                                readyStatus=4且status=200
        21                                     alert(data);
        22                                }
        23                          });
        24                    }
        25               </script>
        26         </head>
        27         <body style="text-align:center">
        28               <input type="button" value="AJAX" onclick="sendAjax(); "/>
        29         </body>
        30    </html>

本示例的效果如圖3.11所示。

圖3.11 $.ajax ()的應用

盡管使用ajax()函數需要提供比較多的參數配置和函數回調指定，但是相較于最原始的Ajax使用，顯得清晰得多。一般來說，開發人員會提供范例代碼中的選項，如url、type、data、dataType、success等。

官术网_书友最值得收藏!

15天學會jQuery編程與實戰（視頻教學版） （Web前端技術叢書）

3.8 一切Ajax都是基于$.ajax()

15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）