最近项目中用到了JSONP,说起来也会用,至少完成了我想要的功能,但是呢,当朋友突然问起我:哎,JSONP是什么啊,表示竟无从说起,突然就词穷了。
首先从同源策略说起,基于安全原因,浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。
script标签时具备跨域的能力的,利用script标签的跨域能力,就是jsonp的基础。
JSONP的基本思想实现:网页通过添加一个<script>元素,向服务器请求JSON数据,不受同源政策限制,服务器收到请求,将数据放在一个指定名字的回调函数中传递
回来。 当通过<script>元素调用数据,相应内容必须用javascript函数名和圆括号包裹。
JSONP由两部分构成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。数据就是传入回调函数中的
数据。
JSONP是通过动态<script>元素来使用的,使用时可以为src属性指定一个跨域URL,这里的<script>元素与<img>元素类似,都有能力不受限制地从其他域加载资源,
因为JSONP是有效的js代码,在请求完成后,即在JSONP相应加载到页面中后,会立刻执行。
function handleResponse(response){
console.log(response);
}
var script=document.createElement('script');
script.src="http://freegeoip.net/json/?callback=handLeResponse";
document.body.insertBefore(script,document.body.firstChild);
JSONP简单易用,老式浏览器全部支持,服务器改造很小,能直接访问相应文本,支持在浏览器与服务器之间双向通信。
使用<script>元素进行ajax传输,不受同源策略的影响,因此可以使用它们从其他的服务器请求数据,而且,包含JSON
编码数据的相应体会自动解码(即执行)。
不足:JSONP是从其他域中加载代码执行,如果其他域不安全,可能或在响应中夹带一些恶意代码,因此不是在自己运维
的web服务时,一定要保证安全可靠。
其次,要确定JSON请求是否请求失败并不容易,目前使用计时器检测指定时间内是否接受到了响应。
两点问题-->
1. JSONP是需要动态创建script标签的,是否需要处理这些script元素。
2. JSONP请求的时候,服务器发生错误怎么办,前端怎样处理这个错误。
关于1--> jsonp动态创建的节点是需要删除的,主要处理方法有两种:
(1) onload/complete时,删除节点,例如JQuery
(2)暂不删除节点,积累到一定数目时才删除,比如yui。
jsonp创建script节点后,通常会挂上onload,onreadystatechange,onerror 等事件。
当删除script标签时,元素的属性还是可以获取到的。要回收这段js可以手动清除script元素所有属性:
var jsonp=document.getElementById('myJson');//取得script元素
for(var prop in jsonp){
delete jsonp[prop];
}
关于2:设定一段延时,超过设定时间无响应则进行超时处理。
来源:http://www.cnblogs.com/xiaohuochai/p/6568039.html
https://segmentfault.com/q/1010000000483131