JSONP 是 JSON with Padding 的略称。
它是一个非官方的协议，允许在服务器端集成Script tags返回至客户端，通过 javascript callback 的形式实现跨域访问。
产生的背景：
- 浏览器限制 ajax 跨域请求
- json 格式数据被浏览器原生支持
- <script> 标签 src 可以跨域 GET 方式获取服务器脚本
1、开发一个 servlet 根据参数返回学生信息的数据。把 callback 参数作为 js 的函数调用
package constxiong; import java.io.IOException; import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse; /** * jsonp servlet * @author ConstXiong * @date 2019-07-03 09:56:37 */@WebServlet("/jsonp")public class JsonpServlet extends HttpServlet {private static final long serialVersionUID = 1L; public JsonpServlet() {super();} protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {StringBuilder jsonp = new StringBuilder();String sid = request.getParameter("sid");String function = request.getParameter("callback");jsonp.append(function).append("(");jsonp.append(getStudent(sid));jsonp.append(")");response.getWriter().write(jsonp.toString());} /** * 根据学号获取学生信息 * @param sid * @return */private String getStudent(String sid) {String student = null;if ("1".equals(sid)) {student = "{'sid':'1', 'name':'ConstXiong'}";}return student;} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {} }请求
http://localhost:8081/web/jsonp?sid=1&callback=aaa返回
aaa({'sid':'1', 'name':'ConstXiong'})2、修改 hosts 文件，模拟跨域访问。本机 win7 操作系统，修改 C:WindowsSystem32driversetchosts
最后一行添加
127.0.0.1 www.aaa.com访问，模拟跨域url
http://www.aaa.com:8081/web/jsonp?sid=1&callback=alertStudent返回
alertStudent({'sid':'1', 'name':'ConstXiong'})3、添加 html 页面，测试后台返回的 js 是否能调用到 html 中 js 定义 的 alertStudent 方法
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jsonp test</title></head><body> <script>//学生idvar sid = 1;//定义函数显示学生信息var alertStudent = function(data) {if (data == null) {alert('没有该学生信息');} else {alert('学号：' + data.sid + ', 姓名：' + data.name);}}//动态生成 <script> 标签，后端调用alertStudent 函数var script = document.createElement('script');script.src = 'http://www.aaa.com:8081/web/jsonp?sid='+sid + '&callback=alertStudent';document.getElementsByTagName('head')[0].appendChild(script);</script></body></html>访问页面，能够显示出学生信息
注意事项
- ajax 是通过 XmlHttpRequest 方式进行请求，JSONP 的核心是动态添加 <script> 标签来调用服务器提供的 js 脚本，两者功能很相似，实现是有区别的。
- JSONP 没有域的限制
- JSONP 的浏览器兼容性较好
- JSONP 只支持 GET 请求，只能添加超时进行异常处理
- 使用 JSONP 存在 js 注入的风险