上次總結了下ajax的所有參數項,其中有一項dataType是設置具體的服務器返回方式的,有html、xml、json、js和jsonp五種方式。下面分別對每種方式進行一下詳細的解釋。
(1) html方式。這種方式是最常見的方式(默認方式),jQuery(這里如果返回值中有JS代碼,並不執行)執行 sucuess回調函數,比如html()、append()等等,這些函數將html代碼裝載到當前頁面的時候才執行其中包含的js代碼,而且該代碼只執行一次並不緩存。示例代碼:
$.ajax({
type: "get",
url: "http://www.xxx.com/test.html",
dataType: "html",//(可以不寫,默認)
success: function(data){
alert(data);//data是一個字符串對象
}
});
(2) xml方式。xml方式和html方式的整個工作流程是一樣,就是操作了不同的屬性,返回不同的對象,html方式操作的responseText屬性,而xml方式操作的是responseXML屬性,html返回是一個String對象,而xml 返回的是一個XML對象。操作返回值的時候就大不相同,必須按照XML對象的方式進行操作,如果用alert(),結果肯定是object。xml和html不一樣,定義很嚴格,沒有容錯機制,如果被請求的xml寫的不正確,或者是不完整,jQuery拋出一個異常,Ajax請求終止。示例代碼:
$.ajax({
url:'my.xml',
type: 'GET',
dataType: 'xml',
timeout: 3000,
error: function(xml){
alert('Error loading‘);
},
success: function(responseXml){
alert(responseXml.xml);//xml的xml屬性只在IE下支持
$(responseXml).find("XXX").text();
}
});
(3)json方式。 json方式和html方式在請求和服務器中完全是一樣,就不在重復說明,請求的返回值實際上都是String對象,有兩點不同,第一:html方式的時 候並沒有限制返回的字符串格式,而json方式的時候,必須符合json協議的規范。第二:html方式請求完成之后沒有做任何的操作直接回調 sucuess,而json多了一步就是加了eval,執行返回的字符串,看看源碼data = eval_r("(" + data + ")");返回json對象。示例代碼:
$.ajax({
url:'my.js',//{‘name’:’name’,’test’:’test’}
type: 'GET',
dataType: json,
timeout: 3000,
error: function(xml){
alert('Error loading');
},
success: function(data){
$.each(data,function(i,n){
alert(n);//顯示name和test
});
}
});
詳細示例:
function doRequestUsingJSON(){
$.getJSON("data.php",$("#firstName.val()"),function(jsonData){
$("#getJSONResponse").html(jsonData.id);}//無需設置,直接獲取的數據類型為json,所以調用時需要使用jsonData.id方式
);
}
假設返回的json數據為:
[{"id":"19","name":"123","content":"123"}, {"id":"20","name":"1231","content":"123123123"},{"id":"21","name":"123123","content":"123123123"},{"id":"26","name":"24","content":"123123"},{"id":"25","name":"321123","content":"321123"},{"id":"24","name":"age","content":"age"},{"id":"23","name":"123123","content":"123123"},{"id":"22","name":"213","content":"123"},{"id":"27","name":"qianglc","content":"dfadsfsadf"},{"id":"28","name":"","content":""}]
$.ajax({
url:'my.js',//alert(‘test’)
type: 'GET',
dataType: script,
timeout: 3000,
success: function(data){
alert(‘load js success’);
}
});
(5)jsonp方式。jsonp方式的交互方式和js是一樣的,本身xmlHttpRequest對象並不能跨域訪問,但是script標簽的src可以跨域訪問,這里就注意兩個概念:第一Ajax是不能跨域操作的,第二jQuery的jsonp是可以跨域操作,jsonp到底是什么東西呢?他是一個非官方的定義,目前的規范,需要服務器和客戶端進行配合使用,服務器返回必須是這樣的格式:
xxx(json對象);xxx是客戶端定義的函數名字.
客戶端需要這樣的定義格式url?callback=xxx,這個的callback和xxx都是自己定義,只要服務器端能理解即可。如果沒有定義xxx函數默認是?,jQuery會自動將?替換成內部定義的函數jquery12345678990這樣的形式。
為什么需要這樣定義呢?因為js本身不能操作script標簽src請求結果中的數據(如果想操作就需要用DOM獲得innerText再加上eval)。就定義一個客戶端函數,將請求的結果以參數的形式傳遞進去,就可以操作了。示例代碼:
$.ajax({
url:' jsonp.jsp?callback=test',//alert(‘test’)
type: 'GET',
dataType: jsonp,
timeout: 3000,
success: function(data){
alert(‘load jsonp success’);
}
});
function test(data){
alert(data);
}
目前我們的項目中只用到了前兩種方式,后面的三種沒用過(希望以后有機會用到),所以也只能是紙上談兵,最后試試,實踐出真知,只有自己親自動手了,才知道這個東西到底怎么用,才能真正地吸收。