Summary of AJAX cross-domain request data methods (practical explanation)

This time I will bring you a summary of AJAX cross-domain request data methods (practical explanation), what are the precautions for AJAX cross-domain request data, the following is a practical case, let's take a look.

Due to the browser's same-origin policy, ajax requests cannot receive data returned from the request response

The request data needs to call the browser's built-in constructor XMLHttpRequest() Instance object

var xhr = new XMLHttpRequest();

Note that ActiveXobject("Microsoft. Wrote

Get through this object

Four states of obtaining data xhr.readyState This attribute saves several states of request data

1.xhr.open(request method, request address, set synchronous/asynchronous);

2.xhr.send(null);// Send request If it is a post request then the parameters need to be passed in send

3. It will always check whether the data is returned

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

So how do we make a cross-domain request?

Solution 1:

Use the src attribute of the script tag to request data. The data requested by the src attribute will not be intercepted by the browser.

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

1. We cannot control what The request is sent when the page is loaded here.

2. In this way, the request method is synchronous. The request needs to request data before the next step of the code is executed. In this way, the page loading time may be extended

3. Therefore, it is recommended not to use this method.

Option 2:

Dynamicly create a script tag in js to specify the request Interface

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

//Append script to the head tag

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

Advantages: We can control the timing of the request and the request is asynchronous and will not extend the page loading time

Important points : We can call the function in the request page in the request data Use the formal parameters of the function to receive the data returned from the request

Option 3:

Set a request header in the back-end interface of the request

Access-Control-Allow-Origin

The data of the cross-domain request of the front-end page containing this request header will not be It will be intercepted by the browser

Option 4:

Use the

This method does not appear in ajax. It is to use this tag to request data.

I believe I have read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How Ajax+php performs data interaction and refreshes partial pages

Ajax method to implement Form form Submission method

The above is the detailed content of Summary of AJAX cross-domain request data methods (practical explanation). For more information, please follow other related articles on the PHP Chinese website!