ajax学习记录【2】【跨域、API、实例】-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41670382/article/details/114558767

ajax学习记录【2】

4.Ajax跨域

4.1.基本内容

4.1.1.URL，跨域的概念

（1）一个完整的URL包括8个部分（protocol[http]、host[www.baidu.com]、port[:8080]、path[/admin]、resource[/index.html]、querystring[id=1&name=aa]、anchor[锚点]、auth[校验]）。以上部分若protocol、host、port中有不一样的地方，则认为跨域了。

4.1.2.资源访问路径问题

（1）使用相对路径（相对于当前页面，不适合有跳转请求的）
（2）使用绝对路径（不方便，以tomcat服务器作为起始路径）
（3）在路径前指定完整的url（例：http://localhost:8080/admin/index.html，不方便）
（4）在头部head中配置base标签，指定当前页面相对路径的根目录（即指定路径是相对于哪个页面的）
例：拼起来就是：http://localhost:8080/ajax03/jquery-3.4.1/jquery-3.4.1.js

<base href="http://localhost:8080/ajax03/">
<meta charset="utf-8">
<title>模板</title>
<script src="jquery-3.4.1/jquery-3.4.1.js"></script>

4.2.解决跨域

例如门户网站连接气象局网站获得天气信息,Ajax是不支持跨域请求的

4.2.1.JSONP

4.2.1.1.JSONP纯JS实现

HTML中标签是支持跨域的。<script src=""......>(地址写死)

4.2.1.2.JSONP服务器端实现

使用<script>，动态创建
HTML中：

<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>。。。</title>
	<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
	<script type="text/javascript">
		function handle(date){
			console.log(data);
		}
		
		function getorder(){
			var script=document.createElement("script");
			script.src="http://127.0.0.1:8080/ajax03/jsonp?callback=handle";
			//连接可以是外部连接，但必须自己将dtype改为jsonp，发送jsonp请求,同时在后面加上callback=handle（函数名）。必须是“callback”,否则会响应数据，但无法调用handle方法。
			document.body.appendChild(script);
		}
	</script>
	</head>
	<body>
        <button  onclick="getorder();">请求跨域请求</button>
    </form>
</body>
</html>

java Servlet中：

protect void service(HttpServletRequest req,HttpServletResponse res){
	String callback=req.getParameter("callback");
	res.setContentText("text/plain;charset=utf-8");
	PrintWriter out=res.getWriter();
	String str=callback+"("+"{\"id\":100,\"name\":jack}"+")";
	out.print(str);//返回时在前端调用了handle()函数
}

4.2.2.jQuery发送跨域请求

jsonp不支持post请求，即使发送post请求，也会自动变成get请求

		function getorder(){
			$.ajax({
				type:"get",
				url:"XXX",
				//回调函数名由jQuery自动生成，命名规则是jQueryxxx
				datatype:"jsonp",
				//也可以用“jsonCallback:"handle";”修改回调函数，但没意义，不设置，也会自己调用seccess中的函数。
				success:function(data){
					console.log(data);
				}
			});
		}

4.2.3.CORS实现跨域请求

CORS是一个W3C标准
实现：
客户端：浏览器会自动在请求头中添加一个Origin字段。
服务端：设置响应头Access-Control-Allow-Origin，值为*，允许任意域名的跨域资源。
在servlet中添加res.setHeader("Access-Control-Allow-Origin","*");