Four AJAX cross-origin request data methods (for example)

Four AJAX cross-origin request data methods (for example)

Because the browser's same-origin policy ajax request cannot receive the data returned from the request

To request data, you need to call the browser's built-in constructor XMLHttpRequest () for instance objects.

Var xhr = new XMLHttpRequest ();

Note the ActiveXobject ("Microsoft. XMLHTTP") supported before IE8. Remember to perform compatibility processing. I will not write it here.

Obtain from this object

Four statuses for retrieving data xhr. readyState this attribute stores several statuses of request data

1. xhr. open (Request Method, request address, set same/asynchronous );

2. xhr. send (null); // If a post request is sent, the parameter must be passed in send.

3. Always checks whether data is returned

4. If the data is returned, the value of xhr. readyState is 4, indicating that the data is returned successfully.

What should we do with cross-origin requests?

Solution 1:

The data browser that uses the src attribute of the script tag to request the src attribute will not intercept the request.

<Script srrc = "http://jiang.com/AJAX/data.php"> <script/>

In this way, we can request data, but this has some disadvantages.

1. We cannot control when the page for sending the request is loaded here.

2. In this way, the synchronization request needs to request data before executing the next code, so that the page loading time may be extended.

3. We recommend that you do not use this method.

Solution 2:

Dynamically create a script tag in js to specify the requested Interface

Var script = document. createELement ("script ");

// Append the script to the head tag.

Document. getElementsTagName ("head") [0]. appendChild (script );

Advantage: we can control the request timing and the request method is asynchronous without extending the page loading time.

Important: we can call the functions on the request page in the request data to use the form parameters of the function to receive the data returned from the request.

Solution 3:

Set a request header on the requested backend interface.

Access-Control-Allow-Origin

Data containing cross-origin requests on the front-end page of the request header will not be intercepted by the browser.

Solution 4:

If you use the <iframe> label to place a page with variable content in the tag, the request will be refreshed. ajax is not counted strictly.

If this method does not appear in ajax, the tag is used to implement the request data.

The above four AJAX cross-origin request data methods (examples) are all the content shared by Alibaba Cloud. I hope you can give us a reference and support for the customer's home.