Ajax implements Cross-domain access in three ways _ajax related

One, what is cross-domain

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

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

http://(agreement number)

www (sub-domain)

Google (main domain)

8080 (port number)

Script/jquery.js (The requested address)

* When the protocol, subdomain, primary domain name, port number in any one of the different, are counted as "domain."

* Cross-domain is called "cross-domain" between different domains requesting resources from each other.

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

second, the processing of Cross-domain Method 1-Agent (this method is more "stupid" so do not do detailed introduction)

For example, in Beijing (www.beijing.com/sever.php) and Shanghai (www.shanghai.com/sever.php) each has a server, the back end of Beijing (www.beijing.com/ sever.php) direct access to services in Shanghai, and then return the retrieved response value to the front end. That is, Beijing's services in the background to do a proxy, front-end only need to visit the server in Beijing is quite the same with the visit to the Shanghai server. This agent belongs to the background of the technology, so do not expand the narrative.

Iii. methods of processing Cross-domain 2--JSONP

Suppose you submit a GET request to http://www.bbb.com/getinfo.php on the http://www.aaa.com/index.php page, we add the following code to the www.aaa.com page:

var elescript= document.createelement ("script"); Create a SCRIPT element

Elescript.type = "text/javascript";//declaration type,

elescript.src = "http://www.bbb.com/getinfo.php" ; Add src attribute introduce cross-domain access URL

document.getelementsbytagname ("Head") [0].appendchild (Elescript);//Add newly created SCRIPT element to page

When a GET request returns from http://www.bbb.com/getinfo.php, a section of JavaScript code can be returned, which is automatically executed and can be used to invoke the http://www.aaa.com/ Index.php a callback function in the page. Look at one of the following:

In the www.aaa.com page:

<script>

function Jsonp (JSON) {

document.write (json.name);//Output Chow

}

<script>

; script src= "http://www.bbb.com/getinfo.php" ></script>

In the www.bbb.com page:

Jsonp ({"Name": "Chow Chi", "Age": 45});

That is, it is declared in the Www.aaa.com page and called in the Www.bbb.com page. However, JSONP only supports "get" requests, but does not support "POST" requests.

Iii. methods of processing Cross-domain 2--XHR2 (recommended method)

The "XHR2" full name "XMLHttpRequest Level2" is a method provided by HTML5 that provides good support for cross-domain access and has some new features.

* IE10 version is 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 on "XHR2" You can view the official document, here is not a detailed description, in short this is a very useful method.

The above mentioned is the entire content of this article, I hope you can enjoy.