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

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

时间: 2024-10-09 02:00:38

jQuery中的ajax服务端返回方式详细说明的相关文章

jQuery中的Ajax几种请求方式

1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (Map) : (可选参数) 发送至服务器的 key/value 数据. callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数. 这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的.jQuery

Node.js 使用jQuery取得Nodejs http服务端返回的JSON文字示例

server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http"); // 创建服务器,创建HTTP服务器要调用http.createServer()函数,它只有一个参数,是个回调函数,服务器每次收到http请求后都会调用这个回调函数.服务器每收到一条http请求,都会用新的request和response对象触发请求函数. var server=http.createS

Node.js 使用jQuery取得Nodejs http服务端返回的JSON数组示例

server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http"); // 创建服务器,创建HTTP服务器要调用http.createServer()函数,它只有一个参数,是个回调函数,服务器每次收到http请求后都会调用这个回调函数.服务器每收到一条http请求,都会用新的request和response对象触发请求函数. var server=http.createS

分析一下jquery中的ajax操作

在web前端开发中,ajax是很重要的一项技术,用原生写起来很是麻烦,需要一大堆js代码,而到了jq里就被精简了许多,一起来看看: jquery中的ajax分为三种方式: 1.$.get(),get方式获取 例子: $('.btn').click({ $.get('1.txt',function(data){ //'1.txt'为服务器上的文档,data为获取到的数据 alert(data); }); }) 2.$.post(),post方式获取 例子: $('.btn').click({ $.

在Android中调用KSOAP2库访问webservice服务出现的服务端返回AnyType{}

最近在做毕业设计的时候,涉及到了安卓端访问web service服务端数据库,并返回一个值,当我把web service测试通过后,想写一个简单的安卓测试程序,来实现服务端数据库访问,通过web service中的一个serch()方法,然后发现,每次的返回值都是一个AnyType{},Logcat如图所示: 网上搜集了很多资料,产生的原因其实很简答,是因为服务端返回值为null,Logcat中显示的就职anyType{},找到了原因,解决起来也就好说了,其中包括这些方法: {解决方法引用自博客

Ajax JS 中的Ajax jquery中的Ajax

Ajax (Asynchronous Javascript And XML)  通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 1.Ajax的优势: 不需要插件的支持,能被大多数主流浏览器支持 优秀的用户体验,不用刷新整个页面,就能更新数据 提高web程序的性能,通过XMLHttpRequest对象向服务端提交所需的数据 2.Ajax的核心: XMLHttpRequest 对象, 发送异步请求.接收相应 .

easyUI form提交与springMVC交互时服务端返回的错误处理

asyUI form的submit接口中没有提供error回调函数,网上一种解决方案是串联.success(function(){}).error(function(){}),然后通过jqXHR进行统一处理:但是我发现这种方案不论服务端返回正确还是异常,都会调用.error(),而且这样写代码也有点乱.经过两天摸索,基本找到了解答.对于post提交的数据,服务端的controller定义为void,不必返回值,通过在controller上注解的方式控制返回的http头.在这里发现对于easyUI

深入理解ajax系列第九篇——jQuery中的ajax

前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而不需要理会那么繁琐的XMLHTTPRequest对象.jQuery对ajax操作进行了封装,在jQuery中$.ajax()属性最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法.下面将详细介绍jQuery中的aj

android菜鸟学习笔记25----与服务器端交互(二)解析服务端返回的json数据及使用一个开源组件请求服务端数据

补充:关于PHP服务端可能出现的问题: 如果你刚好也像我一样,用php实现的服务端程序,采用的是apache服务器,那么虚拟主机的配置可能会影响到android应用的调试!! 在android应用中访问的IP都是10.0.2.2,如果在apache虚拟主机配置文件中配置了多个虚拟主机,那么将默认解析为对第一个虚拟主机的请求,所以,在调试android应用时,应该将对应的服务端所配置的那个虚拟主机放在配置文件中的第一个虚拟主机的位置.否则就会出现请求的文件不存在等的错误. 服务端返回JSON数据及