一、前置知识

页面与服务器的交互

在 AJAX 出现之前，页面与服务器的交互是怎么完成的呢？

通过提交 form 表单，但页面会被刷新，用户体验不好；
通过嵌入 iframe 页面，实现只在 iframe 窗口刷新。
用 img 发请求，但 img 只能知道成功或失败，不能获得更多的数据。
用 script 发请求，通过 SRJ（Server rendered javascript），即服务器返回的 javascript，实现无刷新局部更新页面内容。

a、img、link、script 等都可以发请求；
script 标签只有放在 body 或 head 里才会发请求，且只能发 get 请求。
script 是不受域名限制的，任何一个网站都可以使用另一个网站的 JS。

二、JSONP

1. 自己理解 JSONP

JSONP 要解决的问题是两个网站之间如何交流。
因为 script 标签不受域名限制，所以 JSONP 用 script 标签发请求（跨域 SRJ）。

JSONP
请求方：frank.com 的前端（浏览器）
响应方：jack.com 的后端（服务器）
1、请求方创建 script 标签，src 指向响应方，同时传一个查询参数
?callbackName===xxx。
2、响应方根据查询参数 callbackName，构造形如 xxx.call(undefined, '需要的数据') / xxx('需要的数据') 的函数调用的响应。
3、浏览器接收到响应，就会执行 xxx.call(undefined, '需要的数据')。
4、那么请求方就得到了需要的数据。
这就是 JSONP。

约定：
1、callbackName --> callback
2、xxx --> 随机数

JSONP 核心：script + callback 参数

2. JSONP 定义

JSONP（JSON with Padding）是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。其核心思想是利用 JS 标签里面的跨域特性进行跨域数据访问，在 JS 标签里存在的是一个跨域的 URL，实际执行的时候通过这个 URL 获得一段字符串，这段返回的字符串必须是一个合法的 JS 调用，通过 EVAL 这个字符串来完成对获得数据的处理。