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