JSONP 模拟实现

最新推荐文章于 2023-07-11 11:39:05 发布

ConstXiong

最新推荐文章于 2023-07-11 11:39:05 发布

阅读量5.2k

点赞数 2

文章标签： JSONP 实现原理

本文链接：https://blog.csdn.net/meism5/article/details/90414287

版权

自做 Java 面试题同时被 2 个专栏收录

235 篇文章 59 订阅

订阅专栏

面试

121 篇文章 66 订阅

订阅专栏

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

【Java面试题与答案】整理推荐

ConstXiong

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JSONP 模拟实现

JSONP 模拟实现JSONP 是 JSON with Padding 的略称。它是一个非官方的协议，允许在服务器端集成Script tags返回至客户端，通过 javascript callback 的形式实现跨域访问。产生的背景：浏览器限制 ajax 跨域请求json 格式数据被浏览器原生支持<script> 标签 src 可以跨域 GET 方式获取服务器...
复制链接

扫一扫