ajax中的跨域

ajax默认情况下只能请求同域名下的内容(即不能跨域)

ajax想要实现跨域，取决于对方服务器(需要对方服务器设置Access-Control-Allow-Origin)

http://127.0.0.1:8888/ajax/ajax20200712/ajax04.html

本项目的访问地址是http://127.0.0.1:8888

为了模拟跨域，在ajax中的请求url写成http://localhost:8888/JQuery/TestJson

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax中的跨域</title>
<link rel="stylesheet" type="text/css" href="../css/body.css" />
<link rel="stylesheet" type="text/css" href="../css/mark.css" />
<link rel="stylesheet" type="text/css" href="../css/input2.css" />
<link rel="stylesheet" type="text/css" href="../css/console.css" />
</head>
<body>
<h1>ajax中的跨域</h1>
<h2>ajax默认情况下只能请求同域名下的内容(即不能跨域)</h2>
<h2>
ajax想要实现跨域，取决于对方服务器(需要对方服务器设置Access-Control-Allow-Origin)
</h2>
<input type="button" value="跨域请求(请求地址https://blog.csdn.net/czh500)" onclick="fn1();" />
<br /><br />
<input type="button" value="跨域请求(请求地址http://localhost:8888/JQuery/TestJson)" onclick="fn2();" />
<br /><br />
<div id="div1"></div>
<br />
</body>
<script type="text/javascript">
//
function fn1(){
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if(this.readyState == 4 && this.status == 200){
			alert('服务端返回的内容：' + this.responseText);
			}
		}
	//ajax默认情况下只能请求同域名下的内容
	var url = 'https://blog.csdn.net/czh500'; //跨域
	xhr.open('get', url, true);
	xhr.send(null);
}

//ajax默认情况下只能请求同域名下的内容
//ajax想要实现跨域，取决于对方服务器(需要对方服务器设置Access-Control-Allow-Origin)
function fn2(){
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if(this.readyState == 4 && this.status == 200){
			alert('服务端返回的内容：' + this.responseText);
			var jsonObj = eval('(' + this.responseText + ')');
			var elementCount = jsonObj.length;
			var divNode = document.getElementById('div1');
			divNode.innerHTML = '';
			for (var index = 0; index < elementCount; index++) {
					divNode.innerHTML += jsonObj[index] + '<br />';
				}
			}
		}
//ajax默认情况下只能请求同域名下的内容	
/*
为了测试跨域访问的效果，在浏览器地址栏中输入本页面的url地
址http://127.0.0.1:8888/ajax/ajax20200712/ajax04.html
而ajax请求的url写成http://localhost:8888/JQuery/TestJson
这样的话，就可以模拟不同域名，即可以模拟跨域
*/
	var url = 'http://localhost:8888/JQuery/TestJson';
	xhr.open('get', url, true);
	xhr.send(null);
}
</script>
</html>

package com.test;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 使用jquery的ajax(返回json数据)
 */
@WebServlet("/TestJson")
public class TestJson extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		
		//解决ajax跨域的问题
		//允许所有来源访问
		response.setHeader("Access-Control-Allow-Origin", "*");
		//允许http://192.168.66.99来源访问
//		response.setHeader("Access-Control-Allow-Origin", "http://192.168.66.99");
		//允许访问的方式
		response.setHeader("Access-Control-Allow-Method", "POST,GET");
		
		//为了省事，我就自己造一个简单点的json数组,数组作为json对象,返回给浏览器客户端
		String news = "[\"杨幂被爆新恋情\", \"李现又上热搜\", \"杨幂被爆分手\"]";
		System.out.println(news);
		PrintWriter pw = response.getWriter();
		pw.print(news);//返回给浏览器客户端
		pw.flush();
		pw.close();
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

完！

猜你喜欢