jquery之旅-jquery的Ajax

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

作者：Jack_Lee

$.ajax( properties )

使用HTTP請求（XMLHttpRequest）載入一個遠程頁面。

這是jQuery的低級AJAX實現。要查看進階抽象，見$.get、$.post等。進階的內容經常被很簡單地理解和使用，但是不提供更多的方法（例如錯誤回調）。

$.ajax()返回建立好的XMLHttpRequest對象。多數情況下並不需要直接操縱這個對象，但是如果需要手動中止請求，它也是可用的。

注意：要確保伺服器返回正確的MIME類型（例如：XML是“text/xml”）。如果返回了錯誤的MIME類型就會導致jQuery無法處理的嚴重問題。

支援的資料類型包括（見dataType選項）：

"xml": 返回一個可以由jQuery對象處理的XML文檔。

"html": 返回純文字格式的HTML，包括求值後的指令碼標記。

"script": 將響應作為Javascript語句求值，並返回純文字。

"json": 將響應作為JSON求值，並返回一個Javascript對象。

選項

$.ajax()帶有一個參數－－“名/值對”形式的一個對象，用於初始化和處理請求。以下就是可用的所有“名/值對”：

async(Boolean) - 在預設的情況下，所有請求都是以非同步方式發送的（值為true）。如果要使用同步方式，需要將此項設定為false。

beforeSend(Function) - 用於設定自訂頭部等資訊的預調用函數，接收一個唯一的參數－－XMLHttpRequest對象。

complete(Function) - 當請求完成時調用的函數。這個函數會得到兩個參數：XMLHttpRequest對象和一個描述請求成功的類型的字串。

contentType(String) - 設定發送請求的content=type。預設值是 "application/x-www-form-urlencoded", 這個值能滿足多數情況。

data(Object|String) - 要發送到伺服器的資料。如果還不是一個字串，就自動輪換為一個查詢字串。即附加到GET請求的url後面的字串。要防止自動處理見processData選項。對象必須是Key/Value對。如果value是一個數組，jQuery對於同一個key會連續使用多個值，例如{foo:["bar1","bar2"]}將變成'&foo=var1&foo=bar2'。

dataType(String) - 期望從伺服器端返回的資料類型。無預設值：如果伺服器返回XML，就將responseXML傳遞到回呼函數，否則將resposeText傳遞到回呼函數。

支援的資料類型包括（見dataType選項）：

"xml": 返回一個可以由jQuery對象處理的XML文檔。

"html": 返回純文字格式的HTML，包括求值後的指令碼標記。

"script": 將響應作為Javascript語句求值，並返回純文字。

"json": 將響應作為JSON求值，並返回一個Javascript對象。

error(Function) - 當請求失敗時調用的函數。這個函數會得到三個參數：XMLHttpRequest對象、一個描述所發生的錯誤類型的字串和一個可選異常對象（如果有）。

global(Boolean) - 是否為當前的請求觸發全域AJAX事件處理函數，預設值為true。設定為false可以防止觸發像ajaxStart或ajaxStop這樣的全域事件處理函數。

ifModified(Boolean) - 只有響應自上次請求後被修改過才承認是成功的請求。是通過檢查頭部的Last-Modified值實現的。預設值為false，即忽略對部分的檢查

processData(Boolean) - 在預設的情況下，如果data選項傳進的資料是一個對象而不是字串，將會自動地被處理和轉換成一個查詢字串，以適應預設的content-type－－"application/x-www-form-urlencoded"。如果想發送DOMDocuments，就要把這個選項設定為false。

success(Function) - 當請求成功時調用的函數。這個函數會得到一個參數：從伺服器返回的資料（根據“dataType”進行了格式化）。

timeout(Number) - 覆蓋全域延遲的局部延遲，例如，在其他所有延遲經過1秒鐘後，啟動一個較長延遲的單獨請求。有關全域延遲，見$.ajaxTimeout()。

type(String) - 請求的類型 ("POST" 或 "GET"), 預設是 "GET"。

url(String) - 要將請求發送到的URL地址。

傳回值：XMLHttpRequest
參數：
propertites(Map)形成這個請求的Key/Value對

例子：載入並執行一個JavaScript檔案
$.ajax({
   type: "GET",
   url: "test.js",
   dataType: "script"
})

例子：向伺服器上儲存一些資料，並在完成的時候提醒使用者
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
    alert( "Data Saved: " + msg );
   }
});

例子：同步載入資料。當請求可用時阻止瀏覽（Blocks the browser while the requests is active）。這個可以更好地在需要同步處理的時候使用另一種方式阻止使用者互動。
var html = $.ajax({
url: "some.php",
async: false
}).responseText;

例子：將一個xml檔案作為資料發送給伺服器。通過將processData選項設定為false，資料到字串的自動的變化就被避免了。
var xmlDocument = [create xml document];
$.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
});

$.ajaxSetup( settings )
為AJAX請求進行全域設定
有關所有的可用選項的描述，見$.ajax。

傳回值：undefined
參數：
settings(Map)所有的AJAX請求所使用的Key/Value對

例子：
為AJAX請求設定預設的url“/xmlhttp/”，將所有全域的處理函數設定為不可用，使用POST代替GET。下邊的ajax請求將會不用設定任何東西就發送一些資料。
$.ajaxSetup( {
   url: "/xmlhttp/",
   global: false,
   type: "POST"
} );
$.ajax({ data: myData });

$.ajaxTimeout( time )
對所有的AJAX請求設定一個固定的逾時時間。這個將會使所有的AJAX請求在一個特定的事件後逾時。
設定為null或0可以將逾時設定為無效（預設）
你可以手動的使用XMLHttpRequest的abort()方法插斷要求。

不贊成使用該方法最好使用$.ajaxSetup來代替。

傳回值：undefined
參數：
time(Number)在一個AJAX請求逾時前的毫秒數

例子：
讓所有的AJAX請求在5秒後逾時
$.ajaxTimeout( 5000 );

$.get( url, params, callback )
使用一個HTTP GET請求載入一個遠程頁。
這是一個不用使用複雜的$.AJAX方法就向伺服器發送一個簡單的GET請求的方式。它允許特定一個單獨的回調方法在這個請求結束的時候被執行（只有當響應有一個成功的響應代碼）。如果你既需要錯誤的回調又需要成功的回調，你可以使用$.ajax。

傳回值：XMLHttpRequest
參數：
url(String)載入的頁面的url
params(Map)（可選）將要傳送給伺服器的Key/Value對
callback(Function)（可選）當資料載入成功時被執行的方法

例子：
$.get("test.cgi");

例子：
$.get("test.cgi", { name: "John", time: "2pm" } );

例子：
$.get("test.cgi", function(data){
alert("Data Loaded: " + data);
});

例子：
$.get("test.cgi",
   { name: "John", time: "2pm" },
   function(data){
    alert("Data Loaded: " + data);
   }
);

$.getIfModified( url, params, callback )
使用一個HTTP GET請求來載入一個遠程頁，只有從它最後一次被得到後當他沒有被修改（Load a remote page using an HTTP GET request, only if it hasn't been modified since it was last retrieved）

例子：
$.getIfModified("test.html");

例子：
$.getIfModified("test.html", { name: "John", time: "2pm" } );

例子：
$.getIfModified("test.cgi", function(data){
alert("Data Loaded: " + data);
});

例子：
$.getIfModified("test.cgi",
   { name: "John", time: "2pm" },
   function(data){
    alert("Data Loaded: " + data);
   }
);

$.getJSON( url, params, callback )
使用一個HTTP GET請求來載入一個JSON資料

例子：
$.getJSON("test.js", function(json){
alert("JSON Data: " + json.users[3].name);
});

例子：
$.getJSON("test.js",
   { name: "John", time: "2pm" },
   function(json){
    alert("JSON Data: " + json.users[3].name);
   }
);

使用HTTP請求（XMLHttpRequest）載入一個遠程頁面。

這是jQuery的低級AJAX實現。要查看進階抽象，見$.get、$.post等。進階的內容經常被很簡單地理解和使用，但是不提供更多的方法（例如錯誤回調）。

$.ajax()返回建立好的XMLHttpRequest對象。多數情況下並不需要直接操縱這個對象，但是如果需要手動中止請求，它也是可用的。

注意：要確保伺服器返回正確的MIME類型（例如：XML是“text/xml”）。如果返回了錯誤的MIME類型就會導致jQuery無法處理的嚴重問題。

支援的資料類型包括（見dataType選項）：

"xml": 返回一個可以由jQuery對象處理的XML文檔。

"html": 返回純文字格式的HTML，包括求值後的指令碼標記。

"script": 將響應作為Javascript語句求值，並返回純文字。

"json": 將響應作為JSON求值，並返回一個Javascript對象。

選項

$.ajax()帶有一個參數－－“名/值對”形式的一個對象，用於初始化和處理請求。以下就是可用的所有“名/值對”：

async(Boolean) - 在預設的情況下，所有請求都是以非同步方式發送的（值為true）。如果要使用同步方式，需要將此項設定為false。

beforeSend(Function) - 用於設定自訂頭部等資訊的預調用函數，接收一個唯一的參數－－XMLHttpRequest對象。

complete(Function) - 當請求完成時調用的函數。這個函數會得到兩個參數：XMLHttpRequest對象和一個描述請求成功的類型的字串。

contentType(String) - 設定發送請求的content=type。預設值是 "application/x-www-form-urlencoded", 這個值能滿足多數情況。

dataType(String) - 期望從伺服器端返回的資料類型。無預設值：如果伺服器返回XML，就將responseXML傳遞到回呼函數，否則將resposeText傳遞到回呼函數。

支援的資料類型包括（見dataType選項）：

"xml": 返回一個可以由jQuery對象處理的XML文檔。

"html": 返回純文字格式的HTML，包括求值後的指令碼標記。

"script": 將響應作為Javascript語句求值，並返回純文字。

"json": 將響應作為JSON求值，並返回一個Javascript對象。

global(Boolean) - 是否為當前的請求觸發全域AJAX事件處理函數，預設值為true。設定為false可以防止觸發像ajaxStart或ajaxStop這樣的全域事件處理函數。

ifModified(Boolean) - 只有響應自上次請求後被修改過才承認是成功的請求。是通過檢查頭部的Last-Modified值實現的。預設值為false，即忽略對部分的檢查

success(Function) - 當請求成功時調用的函數。這個函數會得到一個參數：從伺服器返回的資料（根據“dataType”進行了格式化）。

timeout(Number) - 覆蓋全域延遲的局部延遲，例如，在其他所有延遲經過1秒鐘後，啟動一個較長延遲的單獨請求。有關全域延遲，見$.ajaxTimeout()。

type(String) - 請求的類型 ("POST" 或 "GET"), 預設是 "GET"。

url(String) - 要將請求發送到的URL地址。

傳回值：XMLHttpRequest
參數：
propertites(Map)形成這個請求的Key/Value對

例子：載入並執行一個JavaScript檔案
$.ajax({
   type: "GET",
   url: "test.js",
   dataType: "script"
})

$.ajaxSetup( settings )
為AJAX請求進行全域設定
有關所有的可用選項的描述，見$.ajax。

傳回值：undefined
參數：
settings(Map)所有的AJAX請求所使用的Key/Value對

不贊成使用該方法最好使用$.ajaxSetup來代替。

傳回值：undefined
參數：
time(Number)在一個AJAX請求逾時前的毫秒數

例子：
讓所有的AJAX請求在5秒後逾時
$.ajaxTimeout( 5000 );

例子：
$.get("test.cgi");

例子：
$.get("test.cgi", { name: "John", time: "2pm" } );

例子：
$.get("test.cgi", function(data){
alert("Data Loaded: " + data);
});

例子：
$.get("test.cgi",
   { name: "John", time: "2pm" },
   function(data){
    alert("Data Loaded: " + data);
   }
);

例子：
$.getIfModified("test.html");

例子：
$.getIfModified("test.html", { name: "John", time: "2pm" } );

例子：
$.getIfModified("test.cgi", function(data){
alert("Data Loaded: " + data);
});

例子：
$.getIfModified("test.cgi",
   { name: "John", time: "2pm" },
   function(data){
    alert("Data Loaded: " + data);
   }
);

$.getScript( url, callback )
使用一個HTTP GET請求來載入並執行一遠端JavaScript檔案

傳回值：XMLHttpRequest
參數：
url(String)載入的頁面的url
callback(Function)（可選）當資料載入成功時被執行的方法

例子：
$.getScript("test.js");

例子：
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});

$.post( url, params, callback )
使用一個HTTP POST請求載入一個遠程頁。
這是一個不用使用複雜的$.AJAX方法就向伺服器發送一個簡單的POST請求的方式。它允許特定一個單獨的回調方法在這個請求結束的時候被執行（只有當響應有一個成功的響應代碼）。如果你既需要錯誤的回調又需要成功的回調，你可以使用$.ajax。

例子：
$.post("test.cgi");

例子：
$.post("test.cgi", { name: "John", time: "2pm" } );

例子：
$.post("test.cgi",
   { name: "John", time: "2pm" },
   function(data){
    alert("Data Loaded: " + data);
   }
);

ajaxComplete( callback )
當AJAX請求完成時添加一個被執行的方法
XMLHttpRequest和它所具有的設定都被作為一個參數傳遞給了回呼函數