浅谈 JSONP

什么是跨域

简单理解就是因为 JavaScript 同源策略的限制，通过 js 从站点 A.com 访问 B.com 或者 C.com 域名下的对象是不允许的。详见下表。

URL	说明	是否允许通信
http://www.a.com/a.js – http://www.a.com/b.js	同一域名下	允许
http://www.a.com/a.js – http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js – http://www.a.com/b.js	同一域名下不同端口	不允许
http://www.a.com:8000/a.js – http://www.a.com/b.js	同一域名下不同端口	不允许
http://www.a.com/a.js – http://172.16.7.93/b.js	域名和域名对应的IP	不允许
http://www.a.com/a.js – https://www.a.com/b.js	同一域名下不同协议	不允许
http://www.a.com/a.js – https://script.a.com/b.js	主域相同、子域不同	不允许
http://www.a.com/a.js – https://www.b.com/b.js	不同域名	不允许

特别注意亮点：
+ 在跨域问题上，域仅仅是通过 “URL首部”来识别而不会去尝试判断相同 IP 地址对应两个域或两个域是同一个IP

什么是 JSONP

JSONP（JSON with Padding）是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。另一个解决这个问题的新方法是跨来源资源共享。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通，而 HTML 的

什么是同源策略

基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止一个源加载的文档或脚本或设置另一个源加载文档的属性。好绕，实践一下

1. 建两个网页，一个端口是 8080 ，一个端口是 8081。

2. 用 jQuery 发送跨域请求

$('#redBtn').click(function() {
        $.get("http://localhost:8081/js/jquery-3.1.1.min.js",function(data) {
            console.log(data)
        })
    });

根据同源策略，浏览器会阻止请求。

JSONP 要解决的就是这个问题。

拥有 src 属性一类 HTML 标签的跨域能力

试着用

<script type="text/javascript" src="http://localhost:8081/js/jquery-3.1.1.min.js"></script>

200，请求成功。8080端口向8081端口请求资源，通过 src 请求成功，这就是 JSONP 的基础。

利用 Script 获取 JSON 数据源

8081端口新建一个 JOSN 文件，JS 加载完

jsonpcallback({"Email":"issacyoung@msn.cn","Name":"Issac Young"})

从 8080 端口访问 8081 的 JSON 文件，约定俗成的再 QueryString 后加上 callback 参数。

<script type="text/javascript"> function jsonpcallback(data){ console.log(data) } function CreateScript(src) { $("<script><//script>").attr("src",src).appendTo("body") } $('#redBtn').click(function() { CreateScript("http://localhost:8081/jsondata.json?callback=jsonpcallback"); }); </script>

输出成功！

jQuery 获取 JSONP

上面的方式略显繁琐，庆幸的是 jQuery 已经帮我们做好的封装。

function jsonpcallback(data) {
        console.log(data)
    }

    $('#redBtn').click(function() {
        $.ajax({
            url: 'http://localhost:8081/jsondata.json',dataType: "jsonp",jsonp: "callback",success: function(data) {
                console.log(data)
            }
        })
    });

输出成功。