Summary of three methods to achieve cross-domain access with Ajax

This time I will bring you a summary of the three methods of Ajax to achieve cross-domain access. What are the precautions for Ajax to implement cross-domain access? . The following is a practical case, let's take a look.

1. What is cross-domain

Let’s first review the composition of the domain name address:

http:// www . google : 8080 / script /jquery.js

http:// (protocol number)

www (subdomain name)

google (main domain name)

        8080 (port number)

script/jquery.js (requested address)

* When any one of the protocol, subdomain name, main domain name, and port number is different, all Count different "domains".

* When different domains request resources from each other, it is called "cross-domain".

For example: http://www.abc.com/index.html requests http://www.def.com/sever.php

2. Processing cross-domain Method 1 -- Agent (This method is relatively "stupid" so I won't introduce it in detail)

For example, in Beijing (www.beijing.com/sever.php) and Shanghai (www.shanghai.com/ sever.php) each has a server. The backend in Beijing (www.beijing.com/sever.php) directly accesses the service in Shanghai, and then returns the obtained response value to the front end. That is to say, the service in Beijing acts as a proxy in the background, and the front end only needs to access the server in Beijing, which is equivalent to accessing the server in Shanghai. This kind of agent belongs to the background technology, so I will not elaborate on it.

3. Method 2 of dealing with cross-domain -- JSONP

Assume that in the page http://www.aaa.com/index.php, http: //www.bbb.com/getinfo.php submits a GET request, then we add the following code to the www.aaa.com page:

　　var eleScript= document.createElement("script"); //创建一个script元素
　　eleScript.type = "text/javascript"; //声明类型、
　　eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src属性 引入跨域访问的url
　　document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在页面中添加新创建的script元素

When the GET request comes from http://www.bbb.com/ When getinfo.php returns, it can return a piece of JavaScript code, which will be automatically executed and can be used to call a callback function in the http://www.aaa.com/index.php page. Look at the following example:

In the www.aaa.com page:

<script>
　　function jsonp( json ){
　　　　document.write( json.name ); //输出周星驰
}
<script>
<script src="http://www.bbb.com/getinfo.php"></script>

In the www.bbb.com page:

jsonp({ "name":" Stephen Chow","age":45 });

That is, it is declared on the www.aaa.com page and called on the www.bbb.com page. But JSONP only supports "GET" requests, but not "POST" requests.

3. Method 2 for dealing with cross-domain -- Access offers great support, and there are some new features.

* Versions below IE10 are not supported

* Just add the following two lines of code to the server-side header:

Header( "Access-Control-Allow- Origin:*" );

Header( "Access-Control-Allow-Methods:POST,GET" );

For more information about "XHR2", you can check the official documentation at I won’t go into details here, but this is a very useful method.

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:

The above is the detailed content of Summary of three methods to achieve cross-domain access with Ajax. For more information, please follow other related articles on the PHP Chinese website!