JSONP原理

script 标签

script 标签会根据 src 中的内容构建一个请求发出，然后将响应回来的包体作为一段 js 脚本(默认)进行执行。同时这个请求不受同源策略限制。

jsonp

jsonp 的原理中有几个要素组成：

1. 服务端将原本处理业务请求的 api 的返回结果(json格式)进行包装。例如以下是原本订单创建后返回订单号的一个例子：

   { orderNo: "1234" }
   

   现在改成：

   someCallBackFunction({ orderNo: "1234" })
   

   其中 someCallBackFunction 是客户端中要请求服务端返回的订单号的函数，这个函数要在客户端发起创建订单api的时候告诉服务端，如何告诉服务端需要双方约定，例如增加一个 URL query 参数 cb 指定回调函数名称。

2. 客户端根据双方约定好的指定回调函数名称的参数构建一个 script 标签，并在 src 中塞进服务端改造之后的创建订单 jsonp url，并指定 cb 参数为 someCallBackFunction。

3. 此时浏览器会构建请求发送到服务端。

4. 服务端收到请求后进行订单创建并返回第一步中返回的内容。

5. 浏览器收到返回内容后将其作为一个 js 脚本解析，随即调用 someCallBackFunction 函数。

参考阅读

Confused on how a JSONP request works

script标签原理