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

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

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

  1. jQuery中的Ajax几种请求方式

    1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (M ...

  2. Node.js 使用jQuery取得Nodejs http服务端返回的JSON对象示例

    server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http" ...

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

    server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http" ...

  4. 分析一下jquery中的ajax操作

    在web前端开发中,ajax是很重要的一项技术,用原生写起来很是麻烦,需要一大堆js代码,而到了jq里就被精简了许多,一起来看看: jquery中的ajax分为三种方式: 1.$.get(),get方 ...

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

    最近在做毕业设计的时候,涉及到了安卓端访问web service服务端数据库,并返回一个值,当我把web service测试通过后,想写一个简单的安卓测试程序,来实现服务端数据库访问,通过web se ...

  6. ajax跨域POST时执行OPTIONS请求服务端返回403forbidden的解决方法

    ajax访问服务端restful api时,由于contentType类型的原因,浏览器会先发送OPTIONS请求. 本人服务端用的是spring mvc框架,web服务器用的是tomcat的,以下给 ...

  7. jquery中的ajax应用集锦

    一,原生JS实现ajax: 1 2 3 4 5 6 7 8 9 10 11 function AjaxGet()         {             var xhrObj;           ...

  8. jquery.dataTables的探索之路-服务端分页配置

    最近闲来无事想研究下数据表格,因为之前接触过layui和bootstrap的数据表格,本着能学多少学多少的学习态度,学习下dataTables的服务端分页配置.特与同学们一块分享下从中遇到的问题和解决 ...

  9. 用JQuery中的Ajax方法获取web service等后台程序中的方法

    用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...

随机推荐

  1. Session初识

    web服务器没有短期记忆,所以需要使用session来跟踪用户的整个会话活动.会话管理有3种解决方案: 1)使用隐藏域(很少使用) 在显示页面中使用隐藏域来保存会话ID.例如,在JSP中将input标 ...

  2. VS设置背景色减缓眼睛疲劳

    工具--选项--字体和颜色--(纯文本)项背景色--自定义... 色调:85 饱和度:123 亮度:205 可自己微调 字体设为10.

  3. 【转】clang warning 警告清单(备查,建议直接command + F 速查 )

    Warning Message -WCFString-literal input conversion stopped due to an input byte that does not belon ...

  4. IOS界面切换

    好吧!表示这几天要实现  phonegap 打开IOS原生界面,因此也查询了一些方案. 有如下几种: 第一种:navigationcontroller //进入下层 [self.navigationC ...

  5. JSP专题

    JSP起源 ·在很多动态网页中,绝大部分内容都是固定不变的,只有局部内容需要动态产生和改变. ·如果使用Servlet程序来输出只有局部内容需要动态改变的网页,其中所有的静态内容也需要程序员代码产生, ...

  6. iframe和form表单的target应用简单例子

    iframe和form表单的target属性   Problem: 刷新主页面中的其中一个iframe,其他内容不变 Solution: main.jsp <body onload=" ...

  7. Listview之优化BaseAdapter中的getView中的contentView

    BaseAdapter中getView中改动的地方: @Override public View getView(int position, View contentView, ViewGroup a ...

  8. memcpy的用法及实现

    memcpy函数的功能是从源src所指的内存地址的起始位置开始拷贝n个字节到目标dest所指的内存地址的起始位置中,返回dest所指内存地址的起始位置. #include <string.h&g ...

  9. PHP面向对象的继承

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Interview----求 1+2+...+n, 不能用乘除法、for、while if、else、switch、case 等关键字以及条件判断语句 (A?B:C)

    题目描述: 求 1+2+...+n, 要求不能使用乘除法.for.while.if.else.switch.case 等关键字以及条件判断语句 (A?B:C). 分析: 首先想到的是写递归函数,但是遇 ...