JSONP（JSON with Padding）是一种解决跨域请求的方法，主要用于解决不同域之间因浏览器同源策略限制而无法进行AJAX请求的问题。在AJAX请求中，浏览器的同源策略限制了与当前页面不同域的服务器进行数据交互，而JSONP通过动态创建`<script>`标签的方式绕过了这一限制。
### JSONP请求实现原理
JSONP的核心在于`<script>`标签不受同源策略的限制，可以跨域加载和执行代码。在JSONP请求中，客户端首先定义一个回调函数，然后通过GET请求方式向服务器请求数据，服务器响应时，不是返回JSON格式的数据，而是将数据放入到这个回调函数中作为参数，并返回一个函数调用的字符串。
### JSONP的实现步骤
1. **客户端实现**：
- 定义一个回调函数，例如`jsonpCallback`，在函数体内处理服务器返回的数据。
- 创建一个`<script>`元素并设置其`src`属性为跨域资源的URL，并通过URL参数`jsonpCallback`指定上述定义的函数名。
- 将`<script>`元素插入到HTML文档中，当脚本加载完成时，浏览器会自动执行返回的函数，并将数据作为参数传入。
- 当回调函数执行完后，即可处理返回的数据。
2. **服务端实现**：
- 服务端接收到带有`jsonpCallback`参数的GET请求后，根据回调函数名构造相应的函数调用语句。
- 将数据封装到这个函数调用语句中，并返回给客户端。
- 返回的是一段完整的JavaScript代码，其中包含了对客户端定义回调函数的调用。
### JSONP与jQuery结合使用
在jQuery中，使用`$.ajax`方法可以方便地实现JSONP请求。通过设置`dataType`为`jsonp`，并且指定`jsonpCallback`参数，jQuery会自动创建一个`<script>`标签并插入到文档中执行。如下是jQuery中发起JSON请求的示例代码：
```javascript
$.ajax({
type: "get",
async: false,
url: "***",
dataType: "jsonp",
jsonpCallback: "jsonpCallback",
success: function(data) {
alert(data.name + "\n" + data.tel);
}
});
```
### JSONP服务端代码示例
服务端的实现一般是在Web服务器上配置相应的路由处理逻辑。以下是使用Java Servlet实现JSONP服务端的一个简单例子：
```java
@WebServlet("/jsonp")
public class JsonpServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/json;charset=utf-8");
String json = "{\"name\":\"刘德华\",\"tel\":\"***\"}";
String jsonp = "jsonpCallback(" + json + ")";
PrintWriter pw = resp.getWriter();
pw.print(jsonp);
}
}
```
### JSONP注意事项
- JSONP只能用于GET请求。
- JSONP请求中，需要保证回调函数的安全性，避免注入攻击。
- 服务端返回的数据格式需要确保与客户端回调函数处理的数据格式一致。
- 在使用JSONP之前，应考虑服务器端是否支持CORS（跨源资源共享），CORS是现代浏览器推荐的解决方案。
通过上述的实现原理和示例代码，我们可以看到JSONP是一种相对简单且高效的跨域请求解决方案，特别适用于那些不能修改CORS配置的老旧API接口。然而，随着现代浏览器对CORS的支持越来越好，开发者们更倾向于使用CORS来实现跨域请求。
