jQuery中的ajax服務端返回方式詳細說明


http://blog.sina.com.cn/s/blog_6f92e3a70100u3b6.html
   

上次總結了下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);
        }

目前我們的項目中只用到了前兩種方式,后面的三種沒用過(希望以后有機會用到),所以也只能是紙上談兵,最后試試,實踐出真知,只有自己親自動手了,才知道這個東西到底怎么用,才能真正地吸收。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM