前端：使用JSONP进行跨域

最新推荐文章于 2023-12-12 09:56:15 发布

weixin_33967071

最新推荐文章于 2023-12-12 09:56:15 发布

阅读量120

点赞数

文章标签：前端 javascript java ViewUI

原文链接：http://www.cnblogs.com/xuejianbest/p/10284950.html

版权

用JSONP可以跨域请求数据，原理如下：

有如下页面：

<html>
    <script type="text/javascript">
	    var callback = function(data){
		    alert(data);
	    }
    </script>
    <script src="http://10.10.10.10/remote.js"></script>
</html>

若remote.js内容为：

callback("hello");

则该页面会弹出内容为hello的alert窗口。

也就是说，我们可以通过这种形式来跨域获取数据：
跨域传递的数据要被封装到一个约定的函数参数里面。
通过src=""方式请求。

在本地就可以通过定义这个约定函数的方式来对数据进行处理。如：

<script type="text/javascript">
	var callback = function(data){
		$("input").val(data);
	}
</script>
<script src="http://10.10.10.10/remote.js"></script>

这样就能把远程数据放到input框里面显示。

jQuery对JSONP的封装：

$.ajax({
	type: "get",
	async: false,
	url: "http://10.10.10.10/remote.do?method=getData",
	dataType: "jsonp",
	success: function(data){
		console.log(data);
	},
	error: function(){
		alert('error');
	}
});

默认jQuery会自动生成一个回调函数名，并且传递给request的callback参数，所以后台可以这样写：

public class AdviceAdd {
	public void doGetData(HttpServletRequest request, HttpServletResponse response) throws Exception {
		String callback = request.getParameter("callback");
		String data = "...";
		response.getWriter().write(callback + "(" + data + ")");
	}
}

这样，js文件success回调函数中获取到的data参数就是提取出的Java类中的data内容。

转载于:https://www.cnblogs.com/xuejianbest/p/10284950.html

weixin_33967071

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端：使用JSONP进行跨域

用JSONP可以跨域请求数据，原理如下：有如下页面：<html> <script type="text/javascript"> var callback = function(data){ alert(data); } </script> <scr...
复制链接

扫一扫