Home > Article > Backend Development > Detailed examples of the principles of Ajax cross-domain requests
Detailed examples of the principles of Ajax cross-domain requests
- 小云云Original
- 2018-05-17 16:27:111802browse
This article mainly introduces the principle of Ajax cross-domain requests in detail. How does Ajax make cross-domain requests? It has certain reference value. Interested friends can refer to it. I hope it can help everyone better master Ajax cross-domain requests.
Let’s build two local sites to demonstrate
The first step is to build an Apache server locally; download address;
The second step is after the server is configured, in Configure two virtual domain names locally;
The third step is to create a folder on the C drive and name it "HTML5";
The fourth step is to find the configuration file of the Apache virtual host, and then open the configuration file
The fifth step is to create a folder a and a folder b respectively under the HTML5 folder created in the third step;
The sixth step is to modify the Apache virtual host Configuration file, as shown in the figure
The seventh step is to modify the host file and add the URLs of a and b. Usually the host file path is C:\Windows\System32\ Under drivers\etc
We create a 7.ajax.html file under the HTML5/a folder
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>获取同域下内容</title>
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
// 忽略IE6
oBtn.onclick = function() {
//创建一个ajax对象
var xhr = new XMLHttpRequest();
//监听事件
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
}
}
}
xhr.open('get', 'Detailed examples of the principles of Ajax cross-domain requests', true);
xhr.send();
}
}
</script>
</head>
<body>
<input type="button" value="获取同域下内容" id="btn" />
</body>
</html>We first Take a look at the requests under the same domain
We create a php file under HTML5/a and return 'hello';
At this time, we are opening the current page Detailed examples of the principles of Ajax cross-domain requests , and clicking the button we find that the data is requested;
http://www.a .com/7.ajax.html
But if it is cross-domain, that is, the data you requested and the current file are not under the same domain, then it will Cross-domain requests are generated, and usually in this case you will be prohibited from accessing
For example, we will now put the Detailed examples of the principles of Ajax cross-domain requests file just in the HTML5/a folder into the b folder
After clicking at this time, we found that the request reported an error, which means that cross-domain requests were restricted
At this time we The backend needs to cooperate. You need to tell the backend to add an "Access-Control-Allow-Origin" header when outputting
For example: As shown in the figure, it means that as long as the cross-domain request of this domain name is cross-domain Impact of the strategy
When I click this time, I can obtain cross-domain data normally
If you want to be compatible with IE, you need
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax跨域请求</title>
<script>
window.onload = function() {
/*
在标准浏览器下，XMLHttpRequest对象已经是升级版本，支持了更多的特性，可以跨域了
但是，如果想实现跨域请求，还需要后端的相关配合才可以
XMLHttpRequest : 增加很多功能，他也不推荐使用onreadystatechange这个事件来监听，推荐使用onload
*/
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
// 这是标准浏览器写法
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
}
}
}
xhr.open('get', 'http://www.b.com/Detailed examples of the principles of Ajax cross-domain requests', true);
xhr.send();
/*
如果你想兼容IE浏览器,可以特地为IE做兼容,忽略IE6
XDomainRequest : IE如果想实现跨域请求，则需要使用这个对象去实现
var oXDomainRequest = new XDomainRequest();
oXDomainRequest.onload = function() {
alert(this.responseText);
}
oXDomainRequest.open('get', 'http://www.b.com/Detailed examples of the principles of Ajax cross-domain requests', true);
oXDomainRequest.send();
*/
}
}
</script>
</head>
<body>
<input type="button" value="获取同域下内容" id="btn" />
</body>
</html>Related recommendations:
Examples explaining the four methods of AJAX cross-domain request data
Detailed explanation of how to implement Javascript cross-domain request code
Detailed introduction of AJAX cross-domain request
The above is the detailed content of Detailed examples of the principles of Ajax cross-domain requests. For more information, please follow other related articles on the PHP Chinese website!