Examples to explain four methods of AJAX cross-domain request data

Due to the browser's same-origin policy, ajax requests cannot receive data returned from the request response. This article mainly brings you four methods of AJAX cross-domain request data, hoping to help you.

Requesting data requires calling the browser's built-in constructor XMLHttpRequest() to create an instance object

var xhr = new XMLHttpRequest();

Note that ActiveXobject is supported before IE8 ("Microsoft.XMLHTTP"); Remember to perform compatibility processing. I won't write it here.

Get through this object

The four states of obtaining data Saves several states of request data

1.xhr.open(request method, request address, setting synchronization/asynchronous);

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

3. It will always check whether the data is returned

4. If the 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?

Option 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. The

This way we can request the data but This has some disadvantages

1. We cannot control when the request is sent. When the page is loaded here, the request is sent

2. In this way, the request method is synchronous and the request needs to request data. The next code will be executed. In this way, the page loading time may be prolonged.

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

Option 2:

Dynamicly create script in js The tag specifies the requested interface

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

//Append the 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 point: We You can call the function in the request page in the request data and 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 intercepted by the browser

Option 4:

Use the

This method does not appear in ajax. That is Use this tag to implement request data

Related recommendations:

The most complete ajax cross-domain solution

ajax cross-domain Solution

Nginx implements AJAX cross-domain request

The above is the detailed content of Examples to explain four methods of AJAX cross-domain request data. For more information, please follow other related articles on the PHP Chinese website!