转载自:http://blog.csdn.net/wqmain/article/details/8905287
一:问题引入
插件介绍:众所周知,使用ajax直接发起请求存在跨域无权限访问的问题,这时候,需要使用jsonp协议(非官方的协议)处理,jQuery中的$.ajax方法也直接支持使用该协议进行跨域访问。下面首先介绍使用jQuery的$.ajax方法进行跨域访问,然后再介绍使用其它jQuery插件(jQuery-JSONP)实现样的功能。
1、新建一个jsp页面,加入一段js代码内容如下:
- <script type="text/javascript">
- function ajaxtest() {
- $.ajax({
- url:'http://192.168.10.111/demo/testjson',
- data:{rel:13},
- dataType:"jsonp",
- jsonp:"callback",
- jsonpCallback:"success_jsonp",
- timeout:3000,
- dataFilter:function(json){
- console.log("jsonp.filter:"+json);
- return json;
- },
- success:function(json,textStatus){
- console.log("jsonp.success:"+json.name);
- },
- error:function(XMLHttpRequest,textStatus,errorThrown){
- console.log("jsonp.error:"+textStatus);
- }
- });
- }
- </script>
再添加一个按钮用来测试该js方法,如下:
- <input type="button" value="ajaxtest" onclick="ajaxtest()"/>
那么服务端的testjson方法应该返回什么样的数据呢?直接返回json对象或json字符串是不对的!还需要在之前加上请求时传过来的callback的参数值,后台(以servlet为例)应类似如下处理:
- public void testjson(HttpServletRequest request, HttpServletResponse response) {
- String callback = (String)request.getParameter("callback");
- String jsonData = "{\"id\":\"3\", \"name\":"zhangsan", \"telephone\":"13612345678"}";//为了演示效果,json数据是写死的
- String retStr = callback + "(" + jsonData + ")"; //解决问题方法
- response.getWriter().print(retStr);
- }
这样后台响应的的数据实际为: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
- <script type="text/javascript" src="jquery.jsonp.js"></script>
- <script type="text/javascript">
- function jsonptest(){
- $.jsonp({
- url:'http://192.168.10.111/demo/testjson',
- data:{rel:13},
- callbackParameter:"callback",
- timeout:3000,
- dataFilter:function(json){
- console.log("jsonp.filter:"+json.name);
- json.name = "测试123435";
- return json;
- },
- success:function(json,textStatus,xOptions){
- console.log("jsonp.success:"+json.name);
- },
- error:function(xOptions,textStatus){
- console.log("jsonp.error:"+textStatus+", rel="+xOptions.data.rel);
- }
- });
- }
再添加一个按钮用来测试该js方法,如下:
- <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://code.google.com/p/nutz/)熟悉的话,下面贴出使用nutz框架编写testjson方法:
- @At("/testjson")
- @Ok("raw")
- public String testjson(HttpServletRequest req, String callback, String rel) throws Exception {
- Map<String, String> jsonMap = new LinkedHashMap<String, String>();
- jsonMap.put("id", "3");
- jsonMap.put("name", "zhangsan");
- jsonMap.put("telephone", "13612345678");
- jsonMap.put("rel", rel);
- String jsonp = callback + "(" + Json.toJson(jsonMap) + ")";
- return jsonp;
- }