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


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

  • 相关阅读:
    uva 1510
    ADN中国团队參加微软的Kinect全国大赛获得三等奖
    在 window7 window8下公布webService注意问题
    html5调用手机摄像头,实现拍照上传功能
    4、深入理解Bean
    恶补jquery(四)jquery中事件--冒泡
    html5css3杂记
    Core Data 和 sqlite3的性能对比【图】3gs,iPhone4,4s,5的性能测试。
    boost 的函数式编程库 Phoenix入门学习
    information_schema模式表介绍 processlist
  • 原文地址:https://www.cnblogs.com/dashenba/p/14295059.html
Copyright © 2020-2023  润新知