ajax的jsonp跨域示例

最新推荐文章于 2021-08-06 11:54:57 发布

原创最新推荐文章于 2021-08-06 11:54:57 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsonp #ajax #jquery

前端小结专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种解决浏览器跨域请求的方法——JSONP，并通过一个实战案例展示了如何使用jQuery发起JSONP请求以及后端Java服务如何响应这些请求。前端通过自定义函数处理回调，后端则需返回特定格式的JSONP数据。

由于浏览器安全策略限制跨域请求，jsonp的ajax请求适合数据量小的跨域请求

前端引用jquery框架，js脚本如下：

<script>
$(function(){
          var url="http://127.0.0.1:8080/sys/getUsrInfo.do";
          //自定义一个有处理回调函数的函数
          getRequest(url,function(data){
	 	   var last=JSON.stringify(data); // 将JSON对象转化为JSON字符
           alert(last);
	 	 });
 });
	 	 	
function getRequest(url,callback){ 
  
	 $.ajax({
  		async : false,
  		url :url,
  		type : "GET",
  		dataType : 'jsonp',// 注意：解决跨域，只能写成该类型
        jsonp : 'pCallBack',// 注意：该参数指定为pCallBack,服务器端才能接收，解决跨域问题
  		timeout : 50000,
  		beforeSend : function() {
  		},
  		success : function(json) {
  		  callback(json); // 注意：必须以callback作为函数名,跟参数的回调函数名保持一致
  		},
  		complete : function(XMLHttpRequest, textStatus) {
  			return false;
  		},
  		error: function (XMLHttpRequest, textStatus){
  			return false;
  		}
  	   });
 };
</script>

以java服务端为例：jsonp与ajax区别在于后台要拼接一个jsonp格式的数据发送给前台（如:"jQuery18309841({"name":"超级管理员","dept":"测试部门"})"）

    @Autowired
	private UserService userService;

	@RequestMapping(value = "/getUsrInfo", method = RequestMethod.GET)
    public void getUsrInfo(HttpServletRequest request, HttpServletResponse response) {
		try {
			String id = request.getParameter("id");
			User user = userService.getUsrInfo(id);
			//利用jackson将对象转json
			ObjectMapper mapper = new ObjectMapper();
			String json= mapper.writeValueAsString(user);
			response.setContentType("text/html;charset=utf-8");
			response.setHeader("Pragma", "No-cache");
			response.setHeader("Cache-Control", "no-cache");
			response.setDateHeader("Expires", 0);
			PrintWriter write = response.getWriter();
			// 解决jquery跨域问题
			String pCallBack = request.getParameter("pCallBack");
			if (pCallBack != null && (!"".equals(pCallBack))) {
				write.write(pCallBack + "(" + json + ")");
			} else {
				write.write(json);
			}
			response.getWriter().flush();
			write.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}