jsonp其核心思想是利用JS标签里面的跨域特性进行跨域数据访问,在JS标签里面存在的是一个跨域的URL,实际执行的时候通过这个URL获得一段字符串,这段返回的字符串必须是一个合法的JS调用,通过EVAL这个字符串来完成对获得的数据的处理。
JSONP(JSON with Padding(填充))是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
相关信息:
由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp即是为了解决这个问题出现的一种简便解决方案。
同源策略即:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域问题。
跨域是JavaScript出于安全方面的考虑,不允许浏览器在当前访问的域名的页面中的javascript的调用其他域名页面中的对象。跨域请求就是为了解决禁止跨域访问的问题。
用jsonp的原因是json是javascript中的对象,而跨域访问中有图片、css、javascript脚本文件等是不限制,因此你可以在页面渲染时动态在<script>标签设置src路径,而这个路径返回回来的就是json对象。
jsonp是英文json with padding的缩写。它允许在服务器端生成script tags至返回至客户端,也就是动态生成javascript标签,通过javascript callback的形式实现数据读取。html页面端示例代码:
复制代码代码如下:
//首先要引入jquery的js包
jQuery(document).ready(function(){
$.ajax({
type : "get", //jquey是不支持post方式跨域的
async:false,
url : "http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL
dataType : "jsonp",
//传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback)
jsonp: "jsoncallback",
//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
jsonpCallback:"success_jsonpCallback",
//成功获取跨域服务器上的json数据后,会动态执行这个callback函数
success : function(json){
alert(json)
}
})
})
服务器端示例代码,以java为例:
服务器端代码,是重点,开始以为,只要客户端通过jsonp就可以直接跨域访问,其实不然,需要服务器端的支持才行。
复制代码代码如下:
public void jsonpTest() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest()
HttpServletResponse response = ServletActionContext.getResponse()
//根据html指定的jsonp回调函数的参数名,获取回调函数的名称
//callbackName的值其实就是:success_jsonpCallback
String callbackName = (String)request.getAttribute("jsoncallback")
//简单模拟一个json字符串,实际可使用google的gson进行转换,次数通过字符串拼接
//{"name":"张三","age":28}
//\是对"号进行转义
String jsonStr = "{\"name\":\"张三\",\"age\":28}"
//最终返回的数据为:success_jsonpCallback({"name":"张三","age":28})
String renderStr = callbackName+"("+jsonStr+")"
response.setContentType("text/plaincharset=UTF-8")
response.getWriter().write(renderStr)
}