Nutz 框架下 测试 jQuery-JSONP 插件跨域调用功能(Uncaught SyntaxError: Unexpected token : 出错原因解释)

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


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


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

 

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

说明:当点击 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为例)应类似如下处理:

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



                    
                    

你可能感兴趣的:(Javascript)