### JSONP格式前后端交互详解
#### 一、JSONP简介
JSONP（JSON with Padding）是一种跨域数据请求的方法，通常用于解决浏览器同源策略限制下的数据获取问题。同源策略是浏览器的一种安全措施，它限制了一个网页脚本只能读取来自同一源的文档或数据，这导致了跨域数据请求变得复杂。
#### 二、JSONP的工作原理
1. **跨域限制**：
- 浏览器同源策略限制了不同域名之间的资源访问。
- 使用`XMLHttpRequest`等技术进行跨域请求会受到限制。
2. **利用`<script>`标签实现跨域**：
- `script`标签的`src`属性可以加载任何来源的JavaScript文件。
- 利用这一点，可以向另一个域名发起请求，获取JSON数据。
3. **JSONP流程**：
- 客户端构造一个`<script>`标签，其`src`属性指向服务端提供数据的URL。
- 在请求的URL中，客户端通常会附加一个回调函数名作为参数。
- 服务端接收到请求后，将数据嵌入到回调函数中，并返回一段JavaScript代码。
- 客户端执行这段JavaScript代码，通过预先定义好的回调函数处理数据。
#### 三、JSONP的具体实现
##### 1. 前端发送示例
```html
<button id="button1">发送请求</button>
<script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
<script>
document.querySelector('#button1').onclick = function () {
$.ajax({
url: 'http://localhost:8000/test',
type: 'GET',
dataType: 'jsonp',
data: { // 注意内容必须为字典
"aaa": "aaa" // 字典里内容前面key可以不加"",默认会给你加上""变成字符串但是不会当成变量
},
success: function (data) {
console.log(data);
}
});
};
</script>
```
**解释**：
- 使用jQuery的`$.ajax`方法发送请求。
- 设置`dataType`为`jsonp`告诉jQuery使用JSONP方式进行请求。
- 请求成功后，通过`success`回调函数处理数据。
##### 2. 后台接收示例（Python Django框架）
```python
from django.shortcuts import render, HttpResponse
def test(request):
callback = request.GET.get('callback')
print(dict(request.GET))
# 传过来的内容会被打散，具体的看实际情况
# 注意点：返回的字符串必须是'callback+("返回的字符串")'这样的一个字符串，否则前端不会接收
return HttpResponse(f'{callback}("ok")')
```
**解释**：
- Django视图函数`test`接收GET请求。
- 从请求中获取`callback`参数。
- 将数据封装在回调函数内返回给客户端。
#### 四、JSONP与JSON的区别
- **JSON**：一种轻量级的数据交换格式，通常用于服务器与客户端之间传输数据。
- **JSONP**：不是一种标准的数据格式，而是一种使用JSON数据格式的技巧，用于解决跨域问题。
#### 五、JSONP的优缺点
**优点**：
- 简单易用，无需额外配置。
- 可以绕过同源策略限制，实现跨域数据请求。
**缺点**：
- 安全性较低，容易受到XSS攻击。
- 只能实现GET请求，无法使用POST等其他HTTP方法。
#### 六、注意事项
- JSONP仅适用于GET请求。
- 跨域请求的安全性和性能需要综合考虑。
- 对于现代Web应用来说，CORS（跨源资源共享）机制是更好的选择，因为它提供了更精细的控制。
通过上述介绍，我们可以看到JSONP作为一种解决跨域问题的有效手段，在某些场景下依然具有不可替代的作用。然而，随着现代Web技术的发展，CORS等技术逐渐成为主流，开发者们在实际项目中应根据具体需求合理选择合适的技术方案。
