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:要求為function類型的參數,請求完成後調用的回調函數(請求成功或失敗時均調用)。
參數:xmlhttprequest對象和一個描述成功請求類型的字元串。
function(xmlhttprequest, textstatus){
this; //調用本次ajax請求時傳遞的options參數
}
success:要求為function類型的參數,請求成功後調用的回調函數,有兩個參數。
(1)由伺服器傳回,并根據datatype參數進行處理後的資料。
(2)描述狀态的字元串。
function(data, textstatus){
//data可能是xmldoc、jsonobj、html、text等等
this; //調用本次ajax請求時傳遞的options參數
error:要求為function類型的參數,請求失敗時被調用的函數。該函數有3個參數,即xmlhttprequest對象、錯
誤資訊、捕獲的錯誤對象(可選)。
ajax事件函數如下:
function(xmlhttprequest, textstatus, errorthrown){
//通常情況下textstatus和errorthrown隻有其中一個包含資訊
this; //調用本次ajax請求時傳遞的options參數
}
contenttype:要求為string類型的參數,當發送資訊至伺服器時,内容編碼類型預設為"application/x-www-form-urlencoded"。該預設值适合大多數應用場合。
案例代碼:
$(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);
}
});
});
});
順便說一下$.each()函數:
$.each()函數不同于jquery對象的each()方法,它是一個全局函數,不操作jquery對象,而是以一個數組或者對象作為第1個參數,以一個回調函數作為第2個參數。回調函數擁有兩個參數:第1個為對象的成員或數組的索引,第2個為對應變量或内容。
ajax出于安全考慮,禁止跨站請求。
xsrf,cross site request forgery,跨站請求僞造。
下面是一個xsrf攻擊的例子:
1.使用者a登入到了它的銀行賬戶(http://www.bank.com);
2.使用者b發現了這一點,然後讓使用者a通路自己的首頁;
3.使用者b的首頁上有一個故意的圖檔連結,用來發起xsrf攻擊: <img src="http://bank.com/xfer?from=usera&amount=100&to=userb">
如果使用者a的cookie沒有過期,那麼a通路了b的首頁,就不知情地發起了一次轉賬操作。
正常的$.ajax()會報異常,見下圖:
應對方法
使用 jsonp格式。
什麼是jsonp格式呢?
api原文:如果擷取的資料檔案存放在遠端伺服器上(域名不同,也就是跨域擷取資料),則需要使用jsonp類型。使用這種類型的話,會建立一個查詢字元串參數 callback=? ,這個參數會加在請求的url後面。伺服器端應當在json資料前加上回調函數名,以便完成一個有效的jsonp請求。意思就是遠端服務端需要對傳回的資料做下處理,根據用戶端送出的callback的參數,傳回一個callback(json)的資料,而用戶端将會用script的方式處理傳回資料,來對json資料做處理。
服務端也需要配合,如果隻傳回json的話還是報錯: