1. JSONP 的概念与特点
- 概念：浏览器端通过 <script> 标签的 src 属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据的方式叫做 JSONP。
- 特点：
① JSONP 不属于真正的 Ajax 请求，因为它没有使用 XMLHttpRequest 这个对象。
② JSONP 仅支持 GET 请求，不支持 POST、PUT、DELETE 等请求。
2. 创建 JSONP 接口的注意事项
- 如果项目中已经配置了 CORS 跨域资源共享，为了防止冲突，必须在配置 CORS 中间件之前声明 JSONP 的接口。否则 JSONP 接口会被处理成开启了 CORS 的接口。示例代码如下：
```js
// 优先创建 JSOP 接口
app.get('/api/jsonp', (req,res) => {})
// 再配置 CORS 中间件 【后续所有的接口都会被处理成 CORS 接口】
app.use(cors())
app.get('/api/get', (req,res) => {})
```
3. 实现 JSONP 接口的步骤
① 获取客户端发送过来的回调函数的名字
② 得到要通过 JSONP 形式发送给客户端的数据
③ 根据前两步得到的数据，拼接出一个函数调用的字符串
④ 把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析执行
4. 实现 JSONP 接口的具体代码
```js
app.get('/api/jsonp', (req, res) => {
// 1.获取客户端发送过来的回调函数的名字
const funcName = req.query.callback
// 2.得到要通过 JSONP 形式发送给客户端的数据
const data = { nameL 'zs', age: 22}
// 3.根据前两步得到的数据，拼接出一个函数调用的字符串
const scriptStr = `${funcName}(${JSON.stringify(data)})`
// 4. 把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析执行
res.send(scriptStr)
})
```
5. 在网页中使用 jQuery 发起 JSONP 请求
- 调用 $.ajax() 函数，提供 JSONP 的配置选项，从而发起 JSONP 请求，示例代码如下：
```js
$.ajax({
method: 'get',
url: 'http://127.0.0.1/api/jsonp',
dataType: 'jsonp', // 表示要发送 JSONP 的请求
success: function (res) {
console.log(res)
}
})
```
