什么是JSONP？

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 注入的风险 


原文链接
 

 

 

posted @ 2019-12-25 09:06  ConstXiong  阅读(478)  评论(0)  编辑  收藏  举报