jquery ajax jsonp calls instance code across domains

May 08, 2021 JSON

3. The principle of JSONP across domains

4. How to get data across domains through JSONP in jQuery

6. jquery ajax jsonp calls instance code across domains

What is cross-domain?

Simply put, for security reasons, JavaScript on the page does not have access to data on other servers, known as "same-origin policies." Cross-domain is the use of some means to bypass the same-origin policy restrictions, to achieve the effect of communication between different servers.

The following table can be seen for specific policy restrictions:

Url	Description	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	The domain name corresponds to the ip of the domain name	Not allowed
http://www.a.com/a.js http://script.a.com/b.js	The primary domain is the same and the sub-domains are different	Not allowed
http://www.a.com/a.js http://a.com/b.js	Same domain name, different secondary domain name (i.e.)	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, while JSON with Padding is a "usage mode" of JSON that enables cross-domain acquisition of data.

The principle of JSONP across domains

Under the same-origin policy, a page under a server cannot get data outside of that server, except for labels such as img, iframe, script, which can request data from other servers through the src property. W ith the open policy of the script tag, we can request data across domains and, of course, require service-side cooperation. When we normally request a JSON data, the service side returns a string of JSON-type data, and when we use the JSONP pattern to request data, the service side returns an executable JavaScript code.

For example, if you need to get data http://www.a.com/user?id=123 server (or server):

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

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

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

Of course, if the service side is more well thought out, the data returned might be as follows:

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

At this point we just define a foo() function and dynamically create a script tag so that its src property 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)

You can use the foo function to call the returned data.

How to get data across domains through JSONP in jQuery

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

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

The second method is to use getJSON to implement, as long as the address is added to the callback?

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

You can also simply use the getScript method:

//此时也可以在函数外定义foo方法
function foo(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 applications, and many applications are often on the developer's server rather than on the Sina Weibo server, so cross-domain request data has become a major problem that developers need to solve, the vast number of open platforms should implement support for JSONP, which Sina Weibo open platform does very well (although some APIs do not explain, But it can actually be called using the JSONP method).