JSONP 模拟实现
2019-09-22
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:\Windows\System32\drivers\etc\hosts
最后一行添加
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>
//学生id
var 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 注入的风险