Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of how to implement the cross-domain access of AJAX javascript, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to implement cross-domain access to AJAX javascript. Let's take a look at it.

All of a sudden, it feels like the problem here. After studying it, I actually feel that it is quite easy, but I still lack some knowledge. The solution is as follows:

Blocked AJAX request

Let's first confirm the congestion of the request. We use the following code:

Initiate three requests in a row

The copy code is as follows:

Function simpleRequest ()

{

Var request = new XMLHttpRequest ()

Request.open ("POST", "Script.ashx")

Request.send (null)

}

Function threeRequests ()

{

SimpleRequest ()

SimpleRequest ()

SimpleRequest ()

}

When threeRequests is executed, three requests for the same domain name will be sent in succession, or the effect of blocking will be checked through statistical charts:

The last request was blocked by the first two requests

Each request takes 1.5 seconds. It is clear that the third request cannot be executed until the end of the first request, so it takes more than three seconds to complete. That's what we're going to change.

Traditional solution of asynchronous request across domain names

The only guarantee of AJAX security seems to be the restrictions on cross-domain name (Cross-Domain) AJAX requests. Unless you open a web page on your local hard drive, or open the restrictions on transferring data across domain names in IE, sending AJAX requests to other domain names will be prohibited. Moreover, the judgment of cross-domain names is very strict. Different sub-domain names, or different ports of the same domain name, will be regarded as different domain names, and we cannot issue AJAX requests to their resources.

On the surface, there seems to be no way to break this limit, but fortunately we have a savior, that is iframe!

Iframe does not appear in the standard, but because it is so useful, FireFox "has to" support it (similar to innerHTML). There have been some practices of issuing asynchronous requests across domain names on the Internet, but they are not doing well. Their simple working principle is as follows: a specific page file is placed as a Proxy in another domain name, and the main page transmits the information of the asynchronous request to the Proxy page in the iframe through Query String. After the AJAX request is executed, the Proxy page puts the result in the hash of its own location, and the main page polls the src hash value of the iframe. Once it is found that it has changed, the required information is obtained through the hash value.

The implementation of this method is complex and its function is limited. In IE and FireFox, you can support about 2000 characters for the length of URL. It may be enough for ordinary requirements, but if you really want to pass a lot of data, it's not enough. Perhaps its only advantage over the solution we will propose later is the ability to make asynchronous requests across any domain name, while our solution can only break through the limitations of sub-domain names.

Gracefully break through the restrictions of subdomain names

The key for us to break through the restrictions on sub-domain names is iframe.

Iframe is a good thing, and we can access page objects in iframe across subdomains, such as window and DOM structures, including calling JavaScript (through window objects)-we just make the document.domain of the internal and external pages the same. Then make different requests on the pages of different sub-domain names, and pass the results through JavaScript. All you need is a simple static page as a Proxy.

Let's start writing a prototype now, which is simple but illustrative.

First, let's write a static page as a Proxy in iframe, as follows:

SubDomainProxy.html

The copy code is as follows:

Untitled Page

Document.domain = "test.com"; function sendRequest (method, url)

{

Var request = new XMLHttpRequest ()

Request.open (method, url)

Request.send (null)

}

Then we write our main page:

The copy code is as follows:

Untitled Page

Document.domain = "test.com"; function simpleRequest ()

{

Var request = new XMLHttpRequest ()

Request.open ("POST", "Script.ashx")

Request.send (null)

}

Function crossSubDomainRequest ()

{

Var proxy = document.getElementById ("iframeProxy") .contentWindow

Proxy.sendRequest ('POST',' http://sub0.test.com/Script.ashx');

}

Function threeRequests ()

{

SimpleRequest ()

SimpleRequest ()

CrossSubDomainRequest ()

}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.