Summary of several methods to achieve cross-domain js (picture ping, JSONP and CORS)_javascript skills

Cross domain

Although there is a same-origin policy, cross-domain is still very common in js, including document.domain, window.name, image ping, jsonp, and CORS. Here is a brief summary of image ping, jsonp, and CORS preparations. forget.

Picture ping

Images can be loaded from any URL, so setting the src of img to the URL of another domain can achieve simple cross-domain. You can use the onload and onerror events to determine whether a response has been received.

var img=new Image();
img.src='http://www.jb51.net';
img.onerror=function(){
 alert('error');
}
img.onload=function(){
 alert('success');
}

A new img object is created here. The URL given is the blog address. This is an error event, so an error pops up; if the URL is changed to an image http://images.jb51.net//710118 /o_MacBook Air.png, the onload loading information success will pop up, thus achieving simple cross-domain.

Using image ping across domains, you can only send get requests, and you cannot access the text of the response. You can only monitor whether there is a response, which can be used to track ad clicks.

jsonp

jsonp is json with callback function callback. Its original name is json with padding. It is translated as padded json and parameter json.

Because the src of the script can cross domains, add a callback parameter after the sent URL and pass it to the server. Then the data returned by the server will be used as the parameter of the callback. Because this callback is implemented by ourselves, it can be received json data for processing.

The simple code is as follows:

<script type="text/javascript">
function call(data){
 alert(data.city);
}
</script>
<script type="text/javascript" src='http://freegeoip.net/json/&#63;callback=call'></script>

Here, we set the src of the script to http://freegeoip.net/json/?callback=call, which is an API for obtaining the user’s IP address (if interested, you can click here to view ), and then splice callback as a parameter in the URL, and the returned json data will be used as a parameter of the callback. Here we define callback as a call function, that is, the returned json data will be passed in as a parameter of the call. This call function Only the user's city pops up. The output result here is Hebei. For other IP information, you can check the official website, which has a detailed list, such as country_name, time_zone, etc.

CORS (Cross Resource Sharing)

CORS is cross-site resource sharing. It is roughly the same as ajax. For IE, the xdr object, XDomainRequest, is instantiated. The only thing we can access is responseText. The triggered events are load and error. The writing method is roughly the same as xhr, and open and send are also required.

For other browsers such as ff and chrome, xhr is instantiated. Here myvin only uses xhr to demonstrate. If you want to achieve cross-browser, you can cooperate with xdr to achieve compatibility.

xhr is as follows:

var xhr=new XMLHttpRequest();   
var url="http://www.jb51.net";
xhr.open('GET', url); 
xhr.send(null);

The url used here is http://www.jb51.net. The only difference from ajax is that the url uses a cross-domain absolute address. The relative address within this page used in ajax address or absolute address.

Look at the console, ff40.0.3 is used here, and the displayed information is as follows:

Cross-origin request blocked: The same-origin policy prohibits reading the remote resource at http://www.jb51.net. (Cause: CORS header 'Access-Control-Allow-Origin' is missing).

So there is one more step to implement cross-domain using CORS, which is to set Access-Control-Allow-Origin on the server side.