参考资料
JSONP的起源
- 普通的Ajax请求不能跨域
- Web上拥有src属性的标签(例如<script>、<img>、<iframe>)拥有跨域的能力
- 想要通过Web端跨域访问数据,就需要在服务端设法把数据装进js文件,然后让Web端去调用
- 刚好JSON格式流行起来了,而且原声JS支持JSON格式
- Web端请求服务器上动态生成的JS文件,来解决Web端跨域请求的问题
- 慢慢就形成了一种非正式协议,叫做JSONP。
什么是JSONP
JSONP(JSONP - JSON with Padding)
利用script标签的src属性,通过动态创建一个script标签,指定src属性为跨域的api,在返回的字符串中使用自定义函数形式包装起来,然后在html中调用自定义函数,拿到返回的字符串。
允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
JSONP的前端实现方式
- 本人太懒,此处套用一下阮老师的代码
<script>
function addScriptTag(src) {
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function () {
addScriptTag('http://example.com/ip?callback=foo');
}
function foo(data) {
console.log('Your public IP address is: ' + data.ip);
};
</script>
- 不得不提的jQuery中的实现方式
- jQuery在处理JSONP类型的请求时,自动帮你生成回调函数并把数据取出来供success属性方法来调用。
- 在jQuery中,使用JSONP感觉就和使用Ajax没有区别,但实际上它们的底层实现实现是完全不一样的。
- 通常都会把JSONP封装到了ajax中,但是JSONP不是Ajax的一个特例。
需要后台支持什么
当使用script请求地址时,会将返回的字符串,默认当成js解析。由于后端返回是的callback(xxx),所以会调用本地的callback函数。
从原理上来看,要使用JSONP,必须要后端返回相应的数据,这个就是JSONP的模式了,允许客户端传递一个callback函数,后端将数据包裹在callback函数中返回。
容易混淆的概念之xhr
- XMLHttpRequest 用于在后台与服务器交换数据,是Ajax的基础。
- 可以在不重新加载整个网页的情况下,对网页的某部分进行更新。