简单描述
JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写。
JSONP实现跨域请求的原理简单的说,就是动态创建标签,然后利用
的src 不受同源策略约束来跨域获取数据。
JSONP 由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
动态创建标签,设置其src,回调函数在src中设置:
var script = document.createElement("script"); script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; document.body.insertBefore(script, document.body.firstChild);
在页面中,返回的JSON作为response参数传入回调函数中,我们通过回调函数来来操作数据。
function handleResponse(response){ // 对response数据进行操作代码 }
上面是简单直接的对JSONP 的描述,可能有些人不是很懂,我们下面一步一步分析
层层深入
先通过一个简单的实例简单的理解一下同源策略的作用
首先我们在本地写入
1.html
GoJSONP
我服务器上的test.php会返回json 格式的数据给客户端
test1.php
19,'name'=>'jianshu'); exit(json_encode($data)); ?>
如果正常访问的话,那么我们的浏览器应该会弹出对话框,结果我们会得到这样的结果
此处输入图片的描述
可以看到,浏览器发现这是一个跨域的请求,但是他在服务器的返回头中缺没有发现
Access-Control-Allow-Origin 值允许 http://localhost 的访问,于是就拦截了。
也就是说,虽然浏览器受到了同源策略的限制,不允许实现跨域访问,但是由于在开发过程中前后端的交互过程中不可避免地会涉及到跨域的请求(设计同源策略的人想必也发现了这个问题),于是设计者给我们留了一个后门,就是只要服务器响应头中返回允许这个源的选项,那么跨域请求就会成功。(这里纠正一个误区,不要认为浏览器默认支持同源策略就意味着不同源的请求就不能发出去,其实还是能发出去的,只是要看响应头而已。)
我们知道在页面中有几个东西是对同源策略免疫的,那就是 的src 、 的 href 还有就是