Summary of several methods for implementing cross-origin in js (image ping, JSONP, and CORS) _ javascript skills

I used jQuery. ajax and other methods, but often ignored the implementation behind it. This article is some of the gains after learning about AJAX basics and several cross-origin solutions. Cross-Origin

Although the same-origin policy exists, cross-origin is still very common in js, including document. domain, window. name, image ping, jsonp, and CORS. Here we will briefly summarize ping, jsonp, and CORS memos.

Image ping

Images can be loaded from any URL. Therefore, you can set the src of img to URLs of other domains to implement simple cross-origin. You can use the onload and onerror events to determine whether a response is received.

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

An img object is created here, And the url given is the blog address, which is an error event, so an error is displayed. If you change the URL to an image watermark.

You can only send get requests to ping images across domains and cannot access the response text. You can only listen for responses and track ad clicks.

Jsonp

Jsonp is the json with callback function callback, formerly known as json with padding. The translation is the filling json, and the parameter json.

Because the src of the script can be cross-origin, a callback parameter is added after the URL is sent to the server, and the data returned by the server is used as the callback parameter, because this callback is implemented by ourselves, we can process the received json data.

The simple code is as follows: