Detailed examples of the principles of Ajax cross-domain requests-PHP Tutorial-php.cn

Detailed examples of the principles of Ajax cross-domain requests

小云云

Release： 2023-03-18 11:22:01

Original

1834 people have browsed it

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

Detailed examples of the principles of Ajax cross-domain requests

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

修改Detailed examples of the principles of Ajax cross-domain requests

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

Detailed examples of the principles of Ajax cross-domain requests

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(&#39;btn&#39;);
 // 忽略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(&#39;get&#39;, &#39;Detailed examples of the principles of Ajax cross-domain requests&#39;, true);
 xhr.send();
 }
}
</script>
</head>
<body>
 <input type="button" value="获取同域下内容" id="btn" />
</body>
</html>

Copy after login

We first Take a look at the requests under the same domain

We create a php file under HTML5/a and return 'hello';

Detailed examples of the principles of Ajax cross-domain requests

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

Detailed examples of the principles of Ajax cross-domain requests

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

Detailed examples of the principles of Ajax cross-domain requests

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

Detailed examples of the principles of Ajax cross-domain requests

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(&#39;btn&#39;);
 oBtn.onclick = function() {
 // 这是标准浏览器写法
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function() {
 if (xhr.readyState == 4) {
 if (xhr.status == 200) {
 alert(xhr.responseText);
 }
 }
 }
 xhr.open(&#39;get&#39;, &#39;http://www.b.com/Detailed examples of the principles of Ajax cross-domain requests&#39;, true);
 xhr.send();
 /*
 如果你想兼容IE浏览器,可以特地为IE做兼容,忽略IE6
 XDomainRequest : IE如果想实现跨域请求，则需要使用这个对象去实现
 var oXDomainRequest = new XDomainRequest();
 oXDomainRequest.onload = function() {
 alert(this.responseText);
 }
 oXDomainRequest.open(&#39;get&#39;, &#39;http://www.b.com/Detailed examples of the principles of Ajax cross-domain requests&#39;, true);
 oXDomainRequest.send();
 */
 }
}
</script>
</head>

<body>
 <input type="button" value="获取同域下内容" id="btn" />
</body>
</html>

Copy after login

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!