JSONP案例学习

最新推荐文章于 2024-06-21 00:21:30 发布

老实先生

最新推荐文章于 2024-06-21 00:21:30 发布

阅读量966

点赞数 1

分类专栏：前端框架文章标签： JSON JSON 跨域访问

本文链接：https://blog.csdn.net/pcbhyy/article/details/83757857

版权

前端框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JSONP案例学习

一、概述

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。
利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。
用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

二、案例

1. 演示JavaScript的跨域访问不允许

1）跨域：不同ip或相同ip但是端口号不同，即跨不同服务，即使用javascript不可访问不同域名下的json数据

2）同域访问：

a）创建一个maven项目（目的后续使用tomcat插件，启动两个端口号不同的tomcat服务）

其中tomcat插件的端口号设为：8089

b）Servlet：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	response.setContentType("application/json;charset=utf-8");
	response.getWriter().append("{\"name\":\"tom\",\"age\":20}");
}

c）导入jquery

<script type="text/javascript" src="js/jquery-3.2.1.js"></script>

d）jsp：

<script>
	function getData(){
		var url = "JSONPServlet";//http://localhost:8089/JSONPServlet
		$.get(url,function(data){
			alert(data.name);
		});
	}
</script>
</head>
<body>
	<input type="button" value="测试" onclick="getData()" >
</body>

e）结论：同域可以访问

3）跨域访问

a）拷贝上面的项目，修改项目名称，删除其中的Servlet，修改tomcat插件的端口号设为：8090

b）修改jsp中的url：

var url = "http://localhost:8089/JSONPServlet";

c）测试结论：跨域json无法访问

2.演示使用<script> 元素，进行跨域访问，并传递json数据

原理图

在这里插入图片描述

1）服务器端：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	response.setContentType("application/json;charset=utf-8");
	response.getWriter().append("getData({\"name\":\"tom\",\"age\":20})");
}

2）客户端：

<script>
	function getData(data){		
		alert(data.name);
	}
</script>
<script type="text/javascript" src="http://localhost:8089/JSONPServlet">

3）效果：不用点击按钮，直接调用了getData方法，并显示姓名：tom

3.使用jquery进行跨域访问

1）服务器端：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	String callback = request.getParameter("callback");//请求参数callback为使用jquery默认值
	
	response.setContentType("application/json;charset=utf-8");
	response.getWriter().append(callback+"({\"name\":\"tom\",\"age\":20})");
}

2）客户端：动态生成

<script>
	function showData(data){
		alert(data.name);
	}
	function getData(){	
		//注意：<script>结束标记中的正斜线需要转义
		$("head").append("<script src='http://localhost:8089/JSONPServlet?callback=showData'><\/script>");
	}
</script>
</head>
<body>
	<input type="button" value="测试" onclick="getData()" >
</body>

3）测试结论：能够实现跨域访问json数据

4）修改客户端，使用$.ajax(),发送异步请求，替代动态生成

<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script>
	function getData(){	
		$.ajax({
			type:"GET",
			url:"http://localhost:8089/JSONPServlet",
			dataType:"jsonp",//设置数据类型，跨域必须
			success:function(data){
				alert(data.name);
			}
		});
	}
</script>
</head>
<body>
	<input type="button" value="测试" onclick="getData()" >
</body>

5）设置回调函数：

jsp中修改为：

<script>
	//回调方法
	function showData(data){
		alert(data.name);
	}
	function getData(){	
		$.ajax({
			type:"GET",
			url:"http://localhost:8089/JSONPServlet",
			dataType:"jsonp",
			jsonpCallback:"showData"//设置回调函数名称
		});
	}
</script>