jsonp跨域原理。
概念:
JSONP=JSON with Padding
JSON是一种数据格式,JSONP是一种数据获取方式
JSONP原理
-
利用script的src可以跨域的漏洞
-
在本地动态生成script标签,设计一个接受数据的回调函数,src中定义服务端地址及回调函数的名字
如客户端拼接script和设计回调函数的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 创建script标签,设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head,此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
flightHandler 为回调函数
- 服务端将数据做成JSON格式,并传给回调函数
如在服务端的json数据给回调函数的代码:
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
过程
在服务端动态构造script,设计带有接收参数的回调函数,利用src可以跨域的漏洞,将远程地址(非本域的目标资源所在域)和回调函数拼接成url,以此去访问远程的资源。 在远程处定义json格式数据,并传给回调函数。 经过acript的src请求后,回调函数成功跨域拿到其他域的数据