【一】$.ajax()所有參數詳解
url: 要求為String類型的參數,(默認為當前頁地址)發送請求的地址。
type: 要求為String類型的參數,請求方式(post或get)默認為get。注意其他http請求方法,例如put和delete也可以使用,但僅部分瀏覽器支持。
timeout: 要求為Number類型的參數,設置請求超時時間(毫秒)。此設置將覆蓋$.ajaxSetup()方法的全局設置。
async:要求為Boolean類型的參數,默認設置為true,所有請求均為異步請求。如果需要發送同步請求,請將此選項設置為false。注意,同步請求將鎖住瀏覽器,用戶其他操作必須等待請求完成才可以執行。
cache:要求為Boolean類型的參數,默認為true(當dataType為script時,默認為false)。設置為false將不會從瀏覽器緩存中加載請求信息。
data: 要求為Object或String類型的參數,發送到服務器的數據。如果已經不是字符串,將自動轉換為字符串格式。get請求中將附加在url后。防止這種自動轉換,可以查看processData選項。對象必須為key/value格式,例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組,JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。
dataType: 要求為String類型的參數,預期服務器返回的數據類型。如果不指定,JQuery將自動根據http包mime信息返回responseXML或responseText,並作為回調函數參數傳遞。
可用的類型如下:
xml:返回XML文檔,可用JQuery處理。
html:返回純文本HTML信息;包含的script標簽會在插入DOM時執行。
script:返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時(不在同一個域下),所有post請求都將轉為get請求。
json:返回JSON數據。
jsonp:JSONP格式。使用SONP形式調用函數時,例如myurl?callback=?,JQuery將自動替換后一個 “?”為正確的函數名,以執行回調函數。
text:返回純文本字符串。
beforeSend:要求為Function類型的參數,發送請求前可以修改XMLHttpRequest對象的函數,例如添加自定義 HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數。
function(XMLHttpRequest){
this; //調用本次ajax請求時傳遞的options參數
}
complete:complete無論后台返回200(成功)還是非200(失敗)都會回調。
要求為Function類型的參數,請求完成后調用的回調函數(請求成功或失敗時均調用,先調用成功或失敗后的回調函數,再調用complete的回調函數)。
參數:XMLHttpRequest對象和一個描述成功請求類型的字符串。
例一:
function(XMLHttpRequest, textStatus){
this; //調用本次ajax請求時傳遞的options參數
}
例二:complete : function(XMLHttpRequest,status){ //請求完成后最終執行參數
if(status=='timeout'){//超時,status還有success,error等值的情況
ajaxTimeoutTest.abort();
alert("超時");
}
}
success:success是在后台返回200狀態碼的時候回調的!
要求為Function類型的參數,請求成功后調用的回調函數,有兩個參數。
(1)由服務器返回,並根據dataType參數進行處理后的數據。
(2)描述狀態的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //調用本次ajax請求時傳遞的options參數
error:error是在后台返回狀態碼為非200的時候回調的。
要求為Function類型的參數,請求失敗時被調用的函數。該函數有3個參數,即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。
ajax事件函數如下:
function(XMLHttpRequest, textStatus, errorThrown){//通常情況下textStatus和errorThrown只有其中一個包含信息
this; //調用本次ajax請求時傳遞的options參數
}
contentType:要求為String類型的參數,當發送信息至服務器時,內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。
dataFilter:要求為Function類型的參數,給Ajax返回的原始數據進行預處理的函數。 提供data和type兩個參數。data是Ajax返回的原始數據,type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
function(data, type){
//返回處理后的數據
return data;
}
global:要求為Boolean類型的參數,默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局 ajax事件,ajaxStart或ajaxStop可用於控制各種ajax事件。
ifModified:要求為Boolean類型的參數,默認為false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false,即忽略頭信息。
jsonp:要求為String類型的參數,在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分,例如
{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。
username:要求為String類型的參數,用於響應HTTP訪問認證請求的用戶名。
password:要求為String類型的參數,用於響應HTTP訪問認證請求的密碼。
processData:要求為Boolean類型的參數,默認為true。默認情況下,發送的數據將被轉換為對象(從技術角度來講並非字符串)以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息,請設置為false。
scriptCharset:要求為String類型的參數,只有當請求時dataType為"jsonp"或者"script",並且type是GET時才會用於強制修改字符集(charset)。通常在本地和遠程的內容編碼不同時使用。
案例代碼:
$(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), content:$("#content").val()}, dataType: "json", success: function(data){ $('#resText').empty(); //清空resText里面的所有內容
var html = ''; $.each(data, function(commentIndex, comment){ html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para"' + comment['content'] + '</p></div>'; }); $('#resText').html(html); } }); }); });
【二】$.get(),$.post(),$.getJSON(),$.ajax();詳解
本文重點是來講講jQuery中調用ajax的4種方法:$.get、$.post、$getJSON、$ajax。如果讀者沒有javascript和jquery的知識,或者沒有ajax的概念,那么請先去問問google老大,再來讀本文。
1、$.get
$.get()方法使用GET方式來進行異步請求,它的語法結構為:
$.get( url [, data] [, callback] )
解釋一下這個函數的各個參數:
url:string類型,ajax請求的地址。
data:可選參數,object類型,發送至服務器的key/value數據會作為QueryString附加到請求URL中。
callback:可選參數,function類型,當ajax返回成功時自動調用該函數。
最后寫一個$.get()的實例供大家參考:
$.get( "submit.aspx",{ id: '123', name: '青藤園', },function(data,state){ //這里顯示從服務器返回的數據
alert(data); //這里顯示返回的狀態
alert(state); } )
2、$.post()
$.post()方法使用POST方式來進行異步請求,它的語法結構為:
$.post(url,[data],[callback],[type])
這個方法和$.get()用法差不多,唯獨多了一個type參數,那么這里就只介紹type參數吧,其他的參考上面$.get()的。
type:type為請求的數據類型,可以是html,xml,json等類型,如果我們設置這個參數為:json,那么返回的格式則是json格式的,如果沒有設置,就和$.get()返回的格式一樣,都是字符串的。【解釋】意思是當設置了type為"json"時,(首先php文件輸出必須是json字符串格式數據),返回的數據經過了JSON.parse()處理了,直接就是json對象格式。不設置type時,(php輸出是json字符串格式),返回的數據是字符串,經過JSON.parse()處理才能變為json(對象)格式。
最后寫一個$.post()的實例供大家參考:
$.post( "submit.aspx",{ id: '123', name: '青藤園', },function(data,state){ //這里顯示從服務器返回的數據
alert(data); //這里顯示返回的狀態
alert(state); }, "json" )
3、$.getJSON()
$.getJSON()是專門為ajax獲取json數據而設置的,並且支持跨域調用,其語法的格式為:
getJSON(url,[data],[callback]) 【返回的數據也是經過JSON.parse()處理過了】
url:string類型, 發送請求地址 data :可選參數, 待發送 Key/value 參數 ,同get,post類型的data callback :可選參數,載入成功時回調函數,同get,post類型的callback
JSON 是一種理想的數據傳輸格式,它能夠很好的融合與JavaScript或其他宿主語言,並且可以被JS直接使用。使用JSON相比傳統的通過 GET、POST直接發送“裸體”數據,在結構上更為合理,也更為安全。至於jQuery的getJSON()函數,只是設置了JSON參數的 ajax()函數的一個簡化版本。這個函數也是可以跨域使用的,相比get()、post()有一定優勢。另外這個函數可以通過把請求url寫 成"myurl?callback=X"這種格式,讓程序執行回調函數X。
4、$.ajax()
$.ajax()是jquery中通用的一個ajax封裝,其語法的格式為:
$.ajax(options)
其中options是一個object類型,它指明了本次ajax調用的具體參數,這里我把最常用的幾個參數附上
$.ajax({ url: 'submit.aspx', datatype: "json", type: 'post', success: function (e) { //成功后回調
alert(e); }, error: function(e){ //失敗后回調
alert(e); }, beforeSend: function(){ /發送請求前調用,可以放一些"正在加載"之類額話
alert("正在加載"); } })