Skip to content

Latest commit

 

History

History
115 lines (87 loc) · 4 KB

JSONP详解.md

File metadata and controls

115 lines (87 loc) · 4 KB
Raw
title date
JSONP详解
2017/02/21 14:47:11

0、关于JSONP

什么的JSONP

JSONP（JSON with Padding）是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。另一个解决这个问题的新方法是跨来源资源共享。（参考：https://zh.wikipedia.org/wiki/JSONP）

JSONP的起源

  1. 曾经的Ajax不能跨域请求（现在的也不能，不过有cors）
  2. Web上使用script调用js文件不存在跨域问题（实际上，只要拥有src属性的标签都允许跨域，比如script,img,iframe）
  3. 那个时候，想要通过web端跨域访问数据，只可以在服务器端设法把数据装进js，然后客户端调用
  4. 刚好这个时候JSON大行其道
  5. 所以，解决方案就出来，web端像调用脚本一样来跨域请求服务器上动态生成的js文件
  6. 为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP。

JSONP用来做什么

通过JSONP的起源，我们大概也知道了JSONP就是为了跨域资源访问的。

1、JSONP实现原理

我们知道，在script标签中请求的js代码，到客户端之后，是能被自动执行的。

我们先构造一个后端（采用node实现）：

var http = require('http');

var server = http.createServer((req, res) => {
  var sendObj = {
    url: req.url,
    name: 'test'
  };
  res.write(`callback(${JSON.stringify(sendObj)})`);
  res.end();
});

server.listen(9999, () => {
  console.log('started.')
});

我们要使用这个这个数据呢？可以用Ajax，可能会产生跨域问题

另外，可以用如下写法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSONP TEST</title>
</head>
<body>
  <script>
  function callback(obj){
    console.log(obj);
  }
  </script>
  <script src="http://localhost:9999/abc"></script>
</body>
</html>

打开这个页面后，我们会看到控制台会输出一个对象Object {url: "/abc", name: "test"}, 也就是后端返回的对象。

当使用script请求地址时，会将返回的字符串，默认当成js解析。由于后端返回是的callback(xxx),所以会调用本地的callback函数。

从原理上来看，要使用JSONP，必须要后端返回相应的数据，这个就是JSONP的模式了，允许客户端传递一个callback函数，后端将数据包裹在callback函数中返回。

从原理也能看出，JSONP并不要求必须传递JSON格式的数据，只要是JS函数能够认可的数据都是可以传递的

2、封装JSONP调用JSONP

知道了原理，我们很容易能够实现一个jsonp的函数调用，代码如下：

window.JSONP = function(url, callback){
  callback = callback || 'callback';
  var result;
  return new Promise((resolve, reject) => {
    var overwritten;
    var scriptEl = document.createElement('script');
    scriptEl.src = url + '?callback=' + callback;
    //加载完成后，删除callback
    scriptEl.onload = function(){
      if(overwritten === undefined){
        delete window[callback];  
      }else{
        window[callback] = overwritten;
      }
      resolve(result);
    }
    //挂载一个callback到window上
    overwritten = window[callback]; //先保存一个，用完之后再还原
    window[callback] = function(data){
      result = data
    }
    document.head.appendChild(scriptEl);
  });
};

如何用？

window.JSONP('http://localhost:9999/abc').then((data) => {
  console.log(data);
});

3、扩展

在jQuery中，我们使用jsonp感觉就和使用ajax没有区别，但实际上它们的底层实现实现是完全不一样的，毕竟原理都不同。

虽然很多库和框架都把jsonp封装到了ajax中，但是一定要记得jsonp不是ajax的一个特例。

当前，除了用jsonp跨域之外，还可以采用服务端代理（通过不跨域的后端程序，发送webClient去请求数据，然后转发），CORS（API服务器允许跨域的一种设置）。