什么是JSONP？

妹岛

Oct 28, 2019

以下回答来源于专否的《JSONP教程》：

JSON和JSONP是不同的；JSON是一种数据格式；JSONP是一种跨域交互数据的方法。

JSONP - 简介

JSONP的全称是“JSON with Padding”。
JSONP是一种客户端与服务器之间进行跨域交互数据的方法。（狭义上，是用来交互JSON格式的数据；广义上，则不限于交互数据的格式。JSONP侧重的是这种跨域交互的方法。）

什么是跨域？

不是同一个域名就叫跨域，比如sand-box.cn页面中的JavaScript脚本，向zhuanfou.com的web服务器程序进行AJAX，那就是跨域，默认情况下是行不通的。

同一个域名下，不同的子域名之间也算跨域，d.zhuanfou.com和zhuanfou.com之间也算跨域的。

JSONP的本质

既然不能跨域AJAX，但可以使用JavaScript或jQuery在当前HTML文档里添加一个<script>标签来引入外部JS脚本，而这个JS脚本可以是由服务器程序动态生成的。

• 请求这个外部的JS脚本时，就可以在url中带上各种想传送给服务器的参数与数据
• JS脚本是由服务器程序动态生成的，从而包含返回给客户端的相应数据

通过引入动态生成的JS脚本，就可以轻松地规避掉跨域问题，而实现客户端与服务器的数据交互。不过动态生成JS脚本的时候，返回时的头文件中要声明content-type属性为application/javascript或application/x-javascript或text/javascript；否则浏览器未必知道这是一个JavaScript脚本文件。

示例

首先，点击按钮，动态插入<script>标签：

function clickButton() {
  var s = document.createElement("script");
  s.src = "https://zhuanfou.com/demo_jsonp";
  document.body.appendChild(s);
}

服务器端动态生成JS脚本（以python的tornado框架的template模板为例）：

getResponse( {% raw data %} );

getResponse是JS中预设好处理返回结果的函数：

function getResponse(data) {
  var key, txt = "";
  for (key in data) {
    txt += key + " --> " + data[key] + "<br>";
  }
  document.getElementById("demo").innerHTML = txt;
}

运行一下

引入JS脚本的URL中添加参数和数据

JSONP不仅仅可以跨域接受服务器返回的数据，还可以跨域传递数据信息给服务器。而实现的方式就是在引入JS脚本的URL中添加上参数和数据。如下所示：

function clickButton() {
  var s = document.createElement("script");
  s.src = "https://zhuanfou.com/demo_jsonp?k1=v1&k2=v2&k3=v3";
  document.body.appendChild(s);
}

运行一下

JSONP是一种处理跨域的方法思路，重在知道这种方法思路；至于是否传输的是JSON格式字符串，这不重要；而真正重要的是活学活用，万变不离其宗。