Detailed explanation of the steps to implement cross-domain requests with Ajax

This time I will bring you a detailed explanation of the steps to implement Ajax cross-domain requests. What are the precautions for Ajax to implement cross-domain requests. Here are practical cases, let’s take a look.

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 of the Apachevirtual host File , 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 configuration file of the Apache virtual host, 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 in C :\Windows\System32\drivers\etc

We create a 7.ajax.html file in the HTML5/a folder

nbsp;HTML>


<meta>
<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 explanation of the steps to implement cross-domain requests with Ajax&#39;, true);
 xhr.send();
 }
}
</script>


 <input>

Let's first 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 explanation of the steps to implement cross-domain requests with Ajax , 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 explanation of the steps to implement cross-domain requests with Ajax 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 need the backend To cooperate, you need to tell the backend to add an "Access-Control-Allow-Origin" header information when outputting
For example: As shown in the figure, it means that as long as the cross-domain request of this domain name is not affected by the cross-domain policy

When I click this time, I can obtain cross-domain data normally

If you want compatibility IE requires

nbsp;HTML>


<meta>
<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 explanation of the steps to implement cross-domain requests with Ajax&#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 explanation of the steps to implement cross-domain requests with Ajax&#39;, true);
 oXDomainRequest.send();
 */
 }
}
</script>


 <input>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

kkpager Detailed explanation of the ajax paging query function (with code)

##How does Ajax realize dynamic loading combination Box (with code)

The above is the detailed content of Detailed explanation of the steps to implement cross-domain requests with Ajax. For more information, please follow other related articles on the PHP Chinese website!