最近项目中用到了JSONP,提及来也会用,至少完成了我想要的功能,可是呢,当朋友忽然问起我:哎,JSONP是什么啊,表示竟无从提及,忽然就词穷了。javascript
首先从同源策略提及,基于安全缘由,浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另外一个源加载的文档的属性。html
script标签时具有跨域的能力的,利用script标签的跨域能力,就是jsonp的基础。前端
JSONP的基本思想实现:网页经过添加一个<script>元素,向服务器请求JSON数据,不受同源政策限制,服务器收到请求,将数据放在一个指定名字的回调函数中传递java
回来。 当经过<script>元素调用数据,相应内容必须用javascript函数名和圆括号包裹。web
JSONP由两部分构成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字通常是在请求中指定的。数据就是传入回调函数中的ajax
数据。json
JSONP是经过动态<script>元素来使用的,使用时能够为src属性指定一个跨域URL,这里的<script>元素与<img>元素相似,都有能力不受限制地从其余域加载资源,segmentfault
由于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:设定一段延时,超过设定时间无响应则进行超时处理。