ajax的json和jsop的区别，解决json报错问题

注：本文欢迎转载，以下为本人亲测，转载请注明：http://blog.csdn.net/wqmain/article/details/8905287

插件介绍：众所周知，使用ajax直接发起请求存在跨域无权限访问的问题，这时候，需要使用jsonp协议（非官方的协议）处理，jQuery中的$.ajax方法也直接支持使用该协议进行跨域访问。下面首先介绍使用jQuery的$.ajax方法进行跨域访问，然后再介绍使用其它jQuery插件（jQuery-JSONP）实现样的功能。

1、新建一个jsp页面，加入一段js代码内容如下：

[javascript]  view plain  copy

1. <script type="text/javascript">    
2. function ajaxtest() {    
3. $.ajax({    
4.    url:'http://192.168.10.111/demo/testjson',    
5.    data:{rel:13},    
6.    dataType:"jsonp",    
7.    jsonp:"callback",    
8.    jsonpCallback:"success_jsonp",    
9.    timeout:3000,    
10.    dataFilter:function(json){    
11.        console.log("jsonp.filter:"+json);    
12.        return json;    
13.    },    
14.    success:function(json,textStatus){    
15.        console.log("jsonp.success:"+json.name);    
16.    },    
17.    error:function(XMLHttpRequest,textStatus,errorThrown){    
18.        console.log("jsonp.error:"+textStatus);    
19.    }    
20. });    
21. }    
22. </script>   

再添加一个按钮用来测试该js方法，如下：

[html]  view plain  copy

1. <input type="button" value="ajaxtest" onclick="ajaxtest()"/>  

说明：当点击 ajaxtest 按钮时，就会发起一个请求，由url、dataType、jsonp等参数可知，ajax使用jsonp协议向 http://192.168.10.111/demo/testjson 这个地址发起请求，并自动在url后追加callback参数，实际请求的url地址应为：http://192.168.10.111/demo/testjson?rel=13&callback=success_jsonp，请求超时时间为3秒，接收的数据为json格式字符串。如果成功接收到远程方法返回的json数据并且格式正确的话，首先会进入dataFilter方法（你可以在这个方法内对返回的json数据进行预处理，比如过滤、更改json数据等），然后进入success方法；如果请求失败或者返回的json数据格式不正确的话会直接进入error方法。

那么服务端的testjson方法应该返回什么样的数据呢？直接返回json对象或json字符串是不对的！还需要在之前加上请求时传过来的callback的参数值，后台（以servlet为例）应类似如下处理：

[java]  view plain  copy

1. public void testjson(HttpServletRequest request, HttpServletResponse response) {  
2.     String callback = (String)request.getParameter("callback");  
3.     String jsonData = "{\"id\":\"3\", \"name\":"zhangsan", \"telephone\":"13612345678"}";//为了演示效果，json数据是写死的  
4.     String retStr = callback + "(" + jsonData + ")";  
5.     response.getWriter().print(retStr);  
6. }  

这样后台响应的的数据实际为：success_jsonp({"id":"3", "name":"zhangsan", "telephone":"13612345678"})    其中success_jsonp取决于ajax参数值的设定，如果未设定，jQuery将会自动生成一个名字作为callback的参数值。总之，后台只需request接收parameter后，动态拼接callback变量的值就可以了。

如果返回的数据格式不按上述讲的这样，请求就会失败并直接进入ajax的error方法。像 Uncaught SyntaxError: Unexpected token :类似这种错误就是返回的json数据没用“(”和“)”小括号包起来或者前面没加callback值而引起的。

跨域调用功能除了用Query的$.ajax方法可以实现外，网络上还有其它众多的jQuery插件可以完成，下面就来看一下使用jQuery的jsonp插件来进行跨域调用：

首先在之前创建的jsp页面中引入jQuery-JSONP插件并加入jsonptest测试方法，下载地址：https://github.com/jaubourg/jquery-jsonp

[javascript]  view plain  copy

1. <script type="text/javascript" src="jquery.jsonp.js"></script>  
2. <script type="text/javascript">  
3. function jsonptest(){  
4. $.jsonp({  
5.    url:'http://192.168.10.111/demo/testjson',  
6.    data:{rel:13},  
7.    callbackParameter:"callback",  
8.    timeout:3000,  
9.    dataFilter:function(json){  
10.     console.log("jsonp.filter:"+json.name);  
11.     json.name = "测试123435";  
12. return json;  
13. },  
14.    success:function(json,textStatus,xOptions){  
15.        console.log("jsonp.success:"+json.name);  
16.    },  
17.    error:function(xOptions,textStatus){  
18.     console.log("jsonp.error:"+textStatus+", rel="+xOptions.data.rel);  
19.    }  
20. });  
21. }  

再添加一个按钮用来测试该js方法，如下：

[html]  view plain  copy

1. <input type="button" value="jsonptest" onclick="jsonptest()"/>  

说明：点击jsonptest按钮后，控制台打印出来的效果和使用$ajax方法时的基本一致，不同的是dataFilter方法：虽然二者都提供了dataFilter方法，但$.jsonp的dataFilter中数据已经直接转换成json对象了，而$.ajax的dataFilter中获取的却是原生的带callback方法名的json字符串(测试时控制台打印出来的是undefined)。如果需要对返回的数据做预处理的话，建议使用jQuery-JSONP插件的$.jsonp方法。

前面介绍了用servlet编写testjson方法，假设你对nutz框架（ http://www.nutzam.com/ ）熟悉的话，下面贴出使用nutz框架编写testjson方法：

[java]  view plain  copy

1. @At("/testjson")  
2. @Ok("raw")  
3. public String testjson(HttpServletRequest req, String callback, String rel) throws Exception {  
4.     Map<String, String> jsonMap = new LinkedHashMap<String, String>();  
5.     jsonMap.put("id", "3");  
6.     jsonMap.put("name", "zhangsan");  
7.     jsonMap.put("telephone", "13612345678");  
8.     jsonMap.put("rel", rel);  
9.     String jsonp = callback + "(" + Json.toJson(jsonMap) + ")";  
10.     return jsonp;  
11. }  

注意：如果你在MainModule中设置了全局的返回类型为json的话（@Ok("json")），那么testjson方法上需要加上 @Ok("raw") 注解，不做解释，不明白可以看nutz官方文档。