jsonp

jsonp跨域原理

Posted by Lan on June 3, 2019

jsonp跨域原理。

概念:

JSONP=JSON with Padding

JSON是一种数据格式,JSONP是一种数据获取方式

JSONP原理

  1. 利用script的src可以跨域的漏洞

  2. 在本地动态生成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 为回调函数

  1. 服务端将数据做成JSON格式,并传给回调函数

如在服务端的json数据给回调函数的代码:


flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

过程

在服务端动态构造script,设计带有接收参数的回调函数,利用src可以跨域的漏洞,将远程地址(非本域的目标资源所在域)和回调函数拼接成url,以此去访问远程的资源。 在远程处定义json格式数据,并传给回调函数。 经过acript的src请求后,回调函数成功跨域拿到其他域的数据