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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.