Three ways to ajax--cross-domain access

Original address: http://www.cnblogs.com/mylove103104/p/4600779.html

One, what is cross-domain

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

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

/HTTP (Protocol number)

www (sub-domain)

Google (primary domain)

8080 (port number)

Script/jquery.js (requested address)

* When any of the protocols, subdomains, primary domain names, or port numbers are different, the "domain" is counted.

* Different domains request resources from each other, called "cross-domain".

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 a detailed introduction)

For example, in Beijing (www.beijing.com/sever.php) and Shanghai (www.shanghai.com/sever.php) each have a server, Beijing's back end (www.beijing.com/ sever.php) directly accesses the service in Shanghai and then returns the acquired response value to the front end. That is, Beijing's services in the background to do a proxy, the front-end only need to visit the server in Beijing is quite similar to the server visited Shanghai. This kind of agent belongs to the backstage technology, so does not unfold the narration.

Iii. ways to handle cross-domain 2-- JSONP

Assuming that a GET request is submitted to http://www.bbb.com/getinfo.php on this page of http://www.aaa.com/index.php, we add the following code to the www.aaa.com page:

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

Elescript.type = "Text/javascript"; Claim type,

ELESCRIPT.SRC = "http://www.bbb.com/getinfo.php"; Add src attribute to introduce cross-domain access URLs

document.getElementsByTagName ("HEAD") [0].appendchild (Elescript); Add a newly created script element to a page

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

In the www.aaa.com page:

<script> function  JSONP (JSON) {document.write (json.name);   // output Stephen Chow } <script> <script src= "http://www.bbb.com/getinfo.php" ></script>

In the www.bbb.com page:

Jsonp ({"Name": "Stephen 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 "POST" requests are not supported.

Iii. ways to handle cross-domain 2-- XHR2(recommended method)

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

* IE10 versions 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 on "XHR2" You can view the official documentation, which is not described in detail here, in short, this is a very useful method.

Three ways to ajax--cross-domain access