JSONP扫盲篇

参考资料

• JSONP-w3cschools
• JSONP的工作原理是什么
• JSONP详解
• 说说JSON和JSONP，也许你会豁然开朗，含jQuery用例
• 浏览器同源政策及其规避方法

JSONP的起源

1. 普通的Ajax请求不能跨域
2. Web上拥有src属性的标签（例如<script>、<img>、<iframe>）拥有跨域的能力
3. 想要通过Web端跨域访问数据，就需要在服务端设法把数据装进js文件，然后让Web端去调用
4. 刚好JSON格式流行起来了，而且原声JS支持JSON格式
5. Web端请求服务器上动态生成的JS文件，来解决Web端跨域请求的问题
6. 慢慢就形成了一种非正式协议，叫做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的基础。
• 可以在不重新加载整个网页的情况下，对网页的某部分进行更新。