JQuery Ajax 方法說明
轉自凡人足跡
參數:
options
返回值:
xmlHttpRequest
使用HTTP請求一個頁面。
這是jquery的低級ajax實現。要查看高級抽象,見$.set、$.post等,這些方法更易于理解和使用。但是功能上有限制(例如,沒有錯誤處理函數)。
警告:如果數據類型指定為"script",那么POST自動轉化為GET方法。(因為script會作為一個嵌入頁面的script標簽進行載入)
$.ajax()函數返回它創建的XMLHttpRequest對象。在大部分情況下,你不需要直接操作此對象。通常,這個XMLHttpRequest對象主要用于需要手動中斷XMLHttpRequest請求的時候。
注意:如果你指明了下面列出的數據類型,請確保服務端發送了正確的MIME響應類型(如. xml 的類型是 "text/xml")。錯誤的MIME類型能夠導致腳本出現意想不到的問題。請查看AJAX的范例來了解數據類型的更多信息。
$.ajax()函數需要一個參數,一個包含有鍵/值對的對象,用于初始化并操作請求對象。
在jQuery 1.2版本中,如果你指明了一個JSONP回調函數,你就可以從其它的域中載入JSON類型的數據,寫法類似于 "myurl?callback=?" 。jQuery會自動調用正確的方法名稱來代替查詢字符串,執行你指定的回調函數?;蛘?,你也可以指定jsonp的數據類型的回調函數,此函數會自動添加到Ajax請求中。
參數選項:
async(true) 數據類型: Boolean
默認情況下,所有的請求都是異步發送的(默認為true)。 如果需要發送同步請求, 設置選項為false。注意,同步請求可能會暫時的鎖定瀏覽器, 當請求激活時不能進行任何操作。
beforeSend 數據類型: Function
一個預處理函數用于在發送前修改XMLHttpRequest對象,設置自定義頭部等。 XMLHttpRequest作為惟一的參數被傳遞。這是一個 Ajax 事件。 function (XMLHttpRequest) {
this; // the options for this ajax request
}cache(true) 數據類型: Boolean
jQuery 1.2中新添加的參數, 如果設為false,則會強制瀏覽器不緩存請求的頁面。
complete 數據類型: Function
當請求完成時執行的函數(在成功或失敗之后執行)。這個函數有2個參數: XMLHttpRequest對象和一個描述HTTP相應的狀態字符串。 這是一個 Ajax 事件。 function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
}contentType("application/x-www-form-urlencoded") 數據類型: String
發送到
data 數據類型: Object,String
要發送給服務器的數據。如果不是字符串,那么它會被轉化為一個查詢字符串。在GET請求中它被添加到url的末尾。要防止這種自動轉化,請查看processData選項。 數據對象必須是一組鍵/值對。如果鍵對應的值是數組,jQuery會將其值賦給同一個鍵屬性。 例如 {foo:["bar1", "bar2"]} 變為 '&foo=bar1&foo=bar2'。
dataType( Intelligent Guess (xml or html)) 數據類型: String
期待由服務器返回值類型。如果沒有明確指定,jQuery會根據實際返回的MIME類型自動的將responseXML或responseText傳遞給success指定的回調函數。有效的類型(返回的類型的結果值會作為第一個參數傳遞給success指定的回調函數)有: "xml": 返回一個可以由jQuery處理的XML文檔。
"html": 返回文本格式的HTML代碼。包括求值后的腳本標記。
"script": 將響應作為
"json": 將響應作為JSON求值,并返回一個Javascript對象。
"jsonp": 使用JSONP載入一個JSON代碼塊. 會在URL的末尾添加"?callback=?"來指明回調函數。(jQuery 1.2以上的版本支持)
"text": 文本格式的字符串
error 數據類型: Function
請求失敗時執行的函數。函數具有3個參數: XMLHttpRequest對象,一個描述產生的錯誤類型和一個可選的異常對象, 如果有的化。 這是一個Ajax 事件。function (XMLHttpRequest, textStatus, errorThrown) {
// typically only one of textStatus or errorThrown
// will have info
this; // the options for this ajax request
}global(true) 數據類型: Boolean
是否為當前的請求觸發全局AJAX事件處理函數,默認值為true。設置為false可以防止觸發像ajaxStart或ajaxStop這樣的全局事件處理函數。這可以用于控制多個不同的Ajax事件。
ifModified(false) 數據類型: Boolean
只有響應自上次請求后被修改過才承認是成功的請求。是通過檢查頭部的Last-Modified值實現的。默認值為false,即忽略對頭部的檢查
jsonp 數據類型: String
在jsonp請求中重新設置回調的函數。這個值用于代替'callback=?'中的查詢字符串。'callback=?'位于get請求中url的末尾或是post請求傳遞的數據中。因此設置 {jsonp:'onJsonPLoad'} 會將 'onJsonPLoad=?' 傳送給服務器。
processData(true) 數據類型: Boolean
在默認的情況下,如果data選項傳進的數據是一個對象而不是字符串,將會自動地被處理和轉換成一個查詢字符串,以適應默認的content-type--"application/x-www-form-urlencoded"。如果想發送domDocuments,就要把這個選項設置為false。
success 數據類型: Function
當請求成功時調用的函數。這個函數會得到二個參數:從服務器返回的數據(根據“dataType”進行了格式化)和一個描述HTTP相應的狀態字符串。這是一個 Ajax 事件。 function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}timeout 數據類型: Number
如果通過$.ajaxSetup設置了一個全局timeout,那么此函數使用一個局部timeout覆蓋了全局timeout(單位為毫秒)。例如,你可以設置比較長的延遲給一個特殊的請求,同時其他所有請求使用1秒的延遲。有關全局延遲,見$.ajaxTimeout()。
type("GET") 數據類型: String
請求的類型 ("POST" 或 "GET"), 默認是 "GET"。注意:其他的HTTP請求方法,如PUT和DELETE,在這里也可以使用,當時它們并不被所有的瀏覽器支持。
url(The current page) 數據類型: String
請求發送的目標URL地址
username 數據類型: String
username可用于在響應一個HTTP連接時的認證請求。 實例
載入并執行一個JavaScript文件。
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});保存數據到服務器,完成后通知用戶。
$.ajax({
type: "POST",
url: "some.
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});取得一個HTML頁面的最新版本。
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});同步載入數據。在執行請求的時候阻塞瀏覽器。這是在保證數據的同步性比交互更重要的情況下的一種更好的方法。
var html = $.ajax({
url: "some.php",
async: false
}).responseText;向服務器發送xml文檔數據。通過設置processData選項為false,將數據自動轉換為string的動作被禁止了。
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});load( url, [data], [callback] )參數:
url (String): 裝入頁面的URL地址。
params (Map): (可選)發送到服務端的鍵/值對參數。
callback (Function): (可選) 當數據裝入完成時執行的函數. function (responseText, textStatus, XMLHttpRequest) {
this; // dom element
}返回值:
jQuery
裝入一個遠程HTML內容到一個DOM結點。 默認使用get方法發送請求,但如果指定了額外的參數,將會使用post方法發送請求。在 jQuery 1.2中,可以在URL參數中指定一個jQuery選擇器,這會過濾返回的HTML文檔,只取得文檔中匹配選擇器的元素。此
實例
載入文檔的sidebar的導航部分到一個無序列表中。
$("#links").load("/Main_Page #p-Getting-Started li");將feeds.html文件載入到id為feeds的div中。
$("#feeds").load("feeds.html");同上,但是發送了附加的參數,并且在響應結束后執行一個自定義函數。
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});jQuery.get( url, [data], [callback] )參數:
url (String): 裝入頁面的URL地址
Map(可選): (可選)發送到服務端的鍵/值對參數
callback (Function): (可選) 當遠程頁面裝入完成時執行的函數 function (data, textStatus) {
// data可以是xmlDoc, jsonObj, html, text, 等...
this; // the options for this ajax request
}返回值:
XMLHttpRequest
使用GET請求一個頁面。
這是向服務器發送get請求的簡單方法。它可以指定一個回調函數,在請求完成后執行(只有在請求成功時)。如果還需要設置error和success回調函數,則需要使用$.ajax。
實例
請求test.php頁,忽略返回值.
$.get("test.php");請求test.php頁并發送附加數據(忽略返回值).
$.get("test.php", { name: "John", time: "2pm" } );顯示從test.php請求的返回值(HTML 或 XML, 根據不同返回值).
$.get("test.php", function(data){
alert("Data Loaded: " + data);
});顯示向test.cgi發送附加數據請求的返回值 (HTML 或 XML, 根據不同返回值).
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});jQuery.getJSON( url, [data], [callback] )參數:
url (String): 裝入頁面的URL地址
Map(可選): (可選)發送到服務端的鍵/值對參數
callback (Function): (可選) 當數據裝入完成時執行的函數 function (data, textStatus) {
// data will be a jsonObj
this; // the options for this ajax request
}返回值:
XMLHttpRequest
使用GET請求JSON數據。
在jQuery 1.2版本中,如果你指明了一個JSONP回調函數,你就可以從其它的域中載入JSON類型的數據,寫法類似于 "myurl?callback=?" 。jQuery會自動調用正確的方法名稱來代替查詢字符串,執行你指定的回調函數?;蛘撸阋部梢灾付╦sonp的數據類型的回調函數,此函數會自動添加到Ajax請求中。注意: 請記住, that lines after this function will be executed before callback.
實例
從Flickr JSONP API中載入最新的四幅貓的圖片
$.getJSON("
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});從test.js載入JSON數據, 從返回的JSON數據讀取name值。
$.getJSON("test.js", function(json){
alert("JSON Data: " + json.users[3].name);
});從test.js載入JSON數據, 傳遞一個附加參數,從返回的JSON數據讀取name值。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});顯示向test.php發送請求的返回值 (HTML 或 XML, 根據不同返回值).
$.getIfModified("test.php", function(data){
alert("Data Loaded: " + data);
});顯示向test.php發送請求的返回值 (HTML 或 XML, 根據不同返回值),提供了一個附加的參數.
$.getIfModified("test.php", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});列出從pages.php返回的查詢結果,將返回的數組轉化為一段HTML代碼。
var id=$("#id").attr("value");
$.getJSON("pages.php",{id:id},dates);
function dates(datos)
{
$("#list").html("Name:"+datos[1].name+"<br>"+"Last Name:"+datos[1].lastname+"<br>"+"Address:"+datos[1].address);
}jQuery.getScript( url, [callback] )參數:
url (String): 裝入頁面的URL地址
callback (Function): (可選) 當數據裝入完成時執行的函數 function (data, textStatus) {
// data應該是javascript
this; // the options for this ajax request
}返回值:
XMLHttpRequest
使用GET請求JavaScript文件并執行。
在jQuery 1.2前, getScript只能從頁面所在的主機載入腳本,1.2中, 你可以從任何主機載入腳本。警告: Safari 2 及其更老的版本不能在全局上下文中正確識別腳本。如果你通過getScript載入函數,請保證設置一個延遲來執行這個腳本。
實例
我們動態的載入一個新的官方jQuery顏色動畫插件,載入后綁定一些動畫效果到元素上。
$.getScript("
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});載入test.js JavaScript文件并執行。
$.getScript("test.js");載入test.js JavaScript文件并執行,當執行結束后顯示一條警告信息。
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});jQuery.post( url, [data], [callback], [type] )參數:
url (String): 裝入頁面的URL地址
Map(可選): (可選)發送到服務端的鍵/值對參數
callback (Function): (可選) 當數據裝入完成時執行的函數 function (data, textStatus) {
// data可能是 xmlDoc, jsonObj, html, text, 等...
this; // the options for this ajax request
}String $.postJSON = function(url, data, callback) {
$.post(url, data, callback, "json");
};返回值:
XMLHttpRequest
使用POST請求一個頁面。
這是向服務器發送post請求的簡單方法。它可以指定一個回調函數,在請求完成后執行(只有在請求成功時)。如果還需要設置error和success回調函數,則需要使用$.ajax。
ajaxComplete( callback )參數:
callback (Function): 要執行的函數 function (event, XMLHttpRequest, ajaxOptions) {
this; // dom element listening
}返回值:
jQuery
當一個AJAX請求結束后,執行一個函數。這是一個Ajax事件
實例
當AJAX請求完成時顯示一條信息。
$("#msg").ajaxComplete(function(request, settings){
$(this).append("<li>Request Complete.</li>");
});ajaxError( callback )參數:
callback (Function): 要執行的函數 function (event, XMLHttpRequest, ajaxOptions, thrownError) {
// thrownError only passed if an error was caught
this; // dom element listening
}返回值:
jQuery
當一個AJAX請求失敗后,執行一個函數。這是一個Ajax事件.
實例
當AJAX請求錯誤時顯示一條信息。
$("#msg").ajaxError(function(request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});ajaxSend( callback )參數:
callback (Function): 要執行的函數 function (event, XMLHttpRequest, ajaxOptions) {
this; // dom element listening
}返回值:
jQuery
在一個AJAX請求發送時,執行一個函數。這是一個Ajax事件.
實例
當AJAX請求發出后顯示一條信息。
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<li<Starting request at " + settings.url + "</li<");
});ajaxStart( callback )參數:
callback (Function): 要執行的函數 function () {
this; // dom element listening
}返回值:
jQuery
在一個AJAX請求開始但還沒有激活時,執行一個函數。這是一個Ajax事件.
實例
當AJAX請求開始(并還沒有激活時)顯示loading信息。
$("#loading").ajaxStart(function(){
$(this).show();
});ajaxStop( callback )參數:
callback (Function): 要執行的函數 function () {
this; // dom element listening
}返回值:
jQuery
當所有的AJAX都停止時,執行一個函數。這是一個Ajax事件.
實例
當所有AJAX請求都停止時,隱藏loading信息。
$("#loading").ajaxStop(function(){
$(this).hide();
});ajaxSuccess( callback )參數:
callback (Function): 要執行的函數 function (event, XMLHttpRequest, ajaxOptions) {
this; // dom element listening
}返回值:
jQuery
當一個AJAX請求成功完成后,執行一個函數。這是一個Ajax事件
實例
當AJAX請求成功完成時,顯示信息。
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<li>Successful Request!</li>");
});jQuery.ajaxSetup( options )參數:
Options: 用于Ajax請求的鍵/值對
為所有的AJAX請求進行全局設置。查看$.ajax函數取得所有選項信息。
實例
設置默認的全局AJAX請求選項。
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });serialize( )返回值:
jQuery
以名稱和值的方式連接一組input元素。返回值類似于: single=Single2&multiple=Multiple&multiple=Multiple3&radio=radio2 。在jQuery 1.2中。serialize方法實現了正確表單元素序列,而不再需要插件支持。
實例
連接表單元素的一組查詢字符串,可用于發送Ajax請求。
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();serializeArray( )返回值:
jQuery
連接所有的表單和表單元素(類似于.serialize()方法),但是返回一個JSON數據格式。
實例
從form中取得一組值,顯示出來
function showValues() {
var fields = $(":input").serializeArray();
alert(fields);
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value + " ");
});
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();