JSONP扫盲篇

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/greenqingqingws/article/details/73743664

参考资料

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的基础。
  • 可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
展开阅读全文

没有更多推荐了,返回首页