Jquery ajax jsonp cross-domain call example code

What is cross domain?

To put it simply, for security reasons, JavaScript in the page cannot access data on other servers, that is, the "same origin policy". And cross-domain is to bypass the restrictions of the same-origin policy through some means to achieve the effect of communication between different servers.

The specific policy restrictions can be seen in the table below:

URL	illustrate	allow communication
http://www.a.com/a.js http://www.a.com/b.js	under the same domain name	allow
http://www.a.com/lab/a.js http://www.a.com/script/b.js	Different folders under the same domain name	allow
http://www.a.com:8000/a.js http://www.a.com/b.js	Same domain name, different ports	not allowed
http://www.a.com/a.js https://www.a.com/b.js	Same domain name, different protocols	not allowed
http://www.a.com/a.js http://127.0.0.100/b.js	Domain name and domain name corresponding ip	not allowed
http://www.a.com/a.js http://script.a.com/b.js	Same main domain, different subdomains	not allowed
http://www.a.com/a.js http://a.com/b.js	Same domain name, different second-level domain names (same as above)	not allowed
http://www.a.com/a.js http://www.b.com/b.js	different domain names	not allowed

What is JSONP?

JSON (JavaScript Object Notation) is a lightweight data exchange format, and JSONP (JSON with Padding) is a "usage mode" of JSON, through which data can be obtained across domains.

The principle of JSONP cross-domain

Under the same-origin policy, pages under a certain server cannot obtain data other than the server, but img, iframe, script and other tags are exceptions, and these tags can request data on other servers through the src attribute. Using the open strategy of the script tag, we can implement cross-domain request data. Of course, the cooperation of the server is also required. When we normally request a JSON data, the server returns a string of JSON data, and when we use the JSONP mode to request data, the server returns an executable JavaScript code.

For example, if the data to be obtained from the server (http://www.a.com/user?id=123) is as follows:

{"id": 123, "name" : 张三, "age": 17}

Then, the data requested using JSONP (http://www.a.com/user?id=123?callback=foo) will be as follows:

foo({"id": 123, "name" : 张三, "age": 17});

Of course, if the server considers it more fully, the returned data may be as follows:

try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}

At this time, we only need to define a foo() function, and dynamically create a script tag whose src attribute is http://www.a.com/user?id=123?callback=foo:

function executeJsonp(url){
　　var eleScript= document.createElement("script");
　　eleScript.type = "text/javascript";
　　eleScript.src = url;
　　document.getElementsByTagName("head")[0].appendChild(eleScript);
}

function foo(data){
    for(var p in data){
      console.log(data[p]);
    }
}

var url = "http://www.a.com/user?id=123?callback=foo";
executeJsonp(url)

Then you can use the foo function to call the returned data.

How to get data across domains through JSONP in jQuery

The first way is to set the dataType to 'jsonp' in the ajax function:

$.ajax({
dataType: 'jsonp',
url: 'http://www.a.com/user?id=123',
success: function(data){
//Process data data
}
});

The second method is to use getJSON to achieve, just add the callback=? parameter to the address:

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
//Process data data
});

It is also possible to simply use the getScript method:

// At this time, the foo method can also be defined outside the function
function foo(data){
//Process data data
}
$.getJSON('http://www.a.com/user?id=123&callback=foo');

Application of JSONP

JSONP can play a very important role in the open API. The open API is used in the developer's own application, and many applications are often on the developer's server instead of the Sina Weibo server. Therefore, cross-domain requests Data has become a major problem that developers need to solve. The majority of open platforms should implement support for JSONP. The Sina Weibo open platform does a very good job of this (although there is no description in some APIs, it can actually be used invoked in JSONP mode).