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);
       
}

目前我们的项目中只用到了前两种方式，后面的三种没用过（希望以后有机会用到），所以也只能是纸上谈兵，最后试试，实践出真知，只有自己亲自动手了，才知道这个东西到底怎么用，才能真正地吸收。