Ajax跨域访问发送请求处理办法

最新推荐文章于 2023-03-02 11:50:28 发布

帅气的刘某人

最新推荐文章于 2023-03-02 11:50:28 发布

阅读量189

点赞数

分类专栏：超前技术文章标签： Ajax跨域访问

本文链接：https://blog.csdn.net/qq_41581154/article/details/103058655

版权

超前技术专栏收录该内容

12 篇文章 0 订阅

订阅专栏

如果有两个项目，项目 A 的 index.jsp 页面通过Ajax访问项目 B 的控制层

最传统的ajax请求虽然可以得到返回数据（在响应体里可以看到，但是我们却得不到这个数据）

为什么？在Ajax异步访问的时候，浏览器只能接受js代码，就是好比我们远程使用js的库一样，这就是异步的Ajax访问，这个时候是没有问题的。

所以方式一就是返回一段js代码，这样浏览器才可以读取到

方式一（最原始的笨办法）：

在访问路径的url的路径上加上请求参数和callback=funName（这个后台会接受到，并且把这个请求名称按照当作方法，响应到浏览器上，直接执行，然后我们自己在jsp页面写的funName方法中的data就是响应回来的js代码中的数据）

Jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<base href="<%=request.getContextPath()+"/"%>">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script type="text/javascript">
 
	/* function sendAjax(){
			$.post("http://localhost:8081/selectOrder01","id=898989",function(data){
				alert(data.remark);
			},"jsonp");
	} */
 	/*对返回值改变成json代码  */
	function funName(data){
		alert(data.remark+"-------"+data.odate);
	}
 </script>
</head>
<body>
	<!-- <a href="javascript:sendAjax()">发送ajax请求</a> -->
	
	<!-- 异步发送ajax请求  jsonp -->
	<script src="http://localhost:8081/selectOrder02?id=9090900&callback=funName"></script>
 </body>
</html>

控制层对应的方法（将数据转化为json字符串，并且用js代码的方式返回）

	@RequestMapping("selectOrder02")
	@ResponseBody
	public String selectOrder02(Integer id,String callback) {
		Orders order = ordersService.selectOrder(id);
		String json = JSON.toJSONString(order);
		String result=callback+"("+json+")";
		return result;
	}

缺点:同样一种方法，我需要写两种方式来对应本地项目的ajax请求还需要写一个跨域项目的请求（不合理！）

方式二：控制层响应回（MappingJacksonValue对象）Ajax发送Jsonp格式的数据

JSP页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<base href="<%=request.getContextPath()+"/"%>">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script type="text/javascript">
 
	function sendAjax(){
			$.post("http://localhost:8081/selectOrder01","id=898989",function(data){
				alert(data.remark);
			},"jsonp");
	}
 	/*对返回值改变成json代码  */
/* 	function funName(data){
		alert(data.remark+"-------"+data.odate);
	} */
 </script>
</head>
<body>
	<a href="javascript:sendAjax()">发送ajax请求</a>
	
	<!-- 异步发送ajax请求  jsonp -->
	<!-- <script src="http://localhost:8081/selectOrder02?id=9090900&callback=funName"></script> -->
 </body>
</html>

跨域的控制层

	//spring提供、只需要添加springweb的依赖即可
	@RequestMapping("selectOrder01")
	@ResponseBody
	public MappingJacksonValue selectOrder01(Integer id,String callback) {
		Orders order = ordersService.selectOrder(id);
		
		MappingJacksonValue mappingJacksonValue=new MappingJacksonValue(order);
		//判断是否跨域访问，如果有callback就是跨域，如果没有就是当前项目
		if(!StringUtils.isEmpty(callback)) {
			mappingJacksonValue.setJsonpFunction(callback);
		}
		return mappingJacksonValue;
	}

方式三：使用cors-filter过滤器，修改web.xml配置不管是本地项目，还是跨域ajax请求都可以访问了

添加依赖：

	  	<!-- 添加corsFilter过滤器依赖 -->
		<dependency>
		    <groupId>com.thetransactioncompany</groupId>
		    <artifactId>cors-filter</artifactId>
		    <version>2.5</version>
		</dependency>

配置web.xml


	  <!-- 处理跨域访问的过滤器 -->
  <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.allowGenericHttpRequests</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowOrigin</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowSubdomains</param-name>
            <param-value>false</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

帅气的刘某人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax跨域访问发送请求处理办法

如果有两个项目，项目 A 的 index.jsp 页面通过Ajax访问项目 B 的控制层最传统的ajax请求虽然可以得到返回数据（在响应体里可以看到，但是我们却得不到这个数据）为什么？在Ajax异步访问的时候，浏览器只能接受js代码，就是好比我们远程使用js的库一样，这就是异步的Ajax访问，这个时候是没有问题的。所以方式一就是返回一段js代码，这样浏览器才可以读取到方式一（最原始...
复制链接

扫一扫