jQuery中的ajax服务端返回方式详细说明!

摘要:
Xml与html不同,具有严格的定义,没有容错机制。如果请求的xml写得不正确或不完整,jQuery将抛出异常,Ajax请求将终止。回调=xxx。只要服务器能够理解,这个回调和xxx都是自定义的。替换为内部定义的函数jquery12345678990。因为js本身不能对脚本标记src请求结果中的数据进行操作。

jQuery中的ajax服务端返回方式详细说明!第1张

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

免责声明:文章转载自《jQuery中的ajax服务端返回方式详细说明!》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇多线程:C#线程同步lock,Monitor,Mutex,同步事件和等待句柄yii2的csrf验证原理分析及token缓存解决方案下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【Mybatis-Plus学习笔记(八)】基本配置

本系列博客其他文章请点击下方链接查看【Mybatis-Plus学习笔记】目录 基本配置 首先分享一下官网的Mybatis-Plus配置。 configLocation mybatis-plus.config-location=classpath:mp.xml 就是导入外部的xml配置,现在已经很少用了,因为xml太过繁琐。 注意:configLocati...

使用纯注解与配置类开发springMVC项目,去掉xml配置

最近拜读了杨开振老师的书,深入浅出springBoot2.x,挖掘了很多以前被忽略的知识, 开发一年多,工作中一直用传统springmvc的开发,基本都还是用的传统的xml配置开发, 看到书里有提到,完全可以使用注解与配置类开发springmvc项目,去掉配置,这里就学习一下! 先新建一个mvc项目: 配置好目录结构之后,就可以配置环境了,不过不用xml...

微信小程序开发系列(一)小程序开发初体验

开发小程序所需的基本技能 关于小程序的介绍和使用场景这里不作介绍,这个系列的文章会一步一步地带领大家快速地学习和掌握小程序的开发。 关于还没有接触过小程序的开发者来说,最关心的问题无非就是,开发小程序,我需要掌握哪些技能? 从我学习小程序的经验中得出,开发小程序的基本要求: 如果你是一名已经工作1年以上的前端工程师,你几乎不用学习任何新的东西就可以快速上手...

java web开发入门九(Maven使用&idea创建maven项目)基于intellig idea

Maven 1.解决的问题 jar包的依赖和管理:版本、依赖关系等 自动构建项目 2.maven介绍  1、Maven是什么?  Apache Maven是一个软件项目管理的综合工具。基于项目对象模型(POM)的概念,提供了帮助管理构建、文档、报告、依赖、发布等方法,Maven简化和标准化项目建设过程。处理编译,分配,文档,团队协作和其他任务的无缝连接。...

【转】CSS浏览器兼容性与解析问题终极归纳

1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯。 2.IE6双边距问题:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。例如: HTML: <div cla...

微信小程序开发——setData的使用技巧

前言: 之前使用 setData ,一直都是作为给变量赋值,感觉比起vue给data中的变量的赋值还是有点麻烦的。 最近项目不太紧张,为了提高小程序的开发效率及提升小程序开发的能力,又重新的通读了下小程序的开发文档。发现 setData 还有一个非必填的参数 callback——setData引起的界面更新渲染完毕后的回调函数,通过这个回调函数,可以在更新...