Jquery ajax and getJson cross domain json data acquisition method

Many developers use jquery to interact with data on the front end and the server side, so it's easy to think that you can read data from any site on the front end using jquery. Recently, in the process of development, because of the need to share data with a project of a third party company, because of the consideration of not occupying server resources, decided to directly read the data in HTML, do not go through the server for transit. Then you run into the problem of cross-domain access on the browser side.

Cross-domain security restrictions refer to the browser side, there is no cross-domain security restrictions on the server side.

Currently, there are two common methods for cross-domain access on the browser side:

1. Cross-domain through ajax of jQuery, which is actually implemented in the way of jsonp.

Jsonp is short for json with padding. It allows the generation of script tags on the server to return to the client, that is, the dynamic generation of javascript tags, through the form of javascript callback to achieve data reading.

HTML page-side sample code:

 //The first step is to introduce the js package of jquery
 jQuery(document).ready(function(){ 
     $.ajax({ 
         type : "get", //Jquey does not support post across domains
         async:false, 
         url : "http://api.taobao.com/apitools/ajax_props.do", //The URL of the cross-domain request
         dataType : "jsonp", 
         //Passed to the request handler to get the parameter name of the jsonp callback function name (default :callback)
         jsonp: "jsoncallback", 
         //Custom jsonp callback function name, default to jQuery automatically generated random function name
         jsonpCallback:"success_jsonpCallback", 
         //Once the json data on the cross-domain server is successfully retrieved, the callback function is executed dynamically
         success : function(json){  
             alert(json); 
         } 
     }); 
 }); 

Server-side sample code, with Java as an example:

A callback (e.g., 'jsoncallback') is registered on the client side, and the name of the callback (e.g., success_jsonpCallback) is passed to the corresponding server-side handler.

The server needs to return json data to the client. Then, in javascript syntax, generate a function whose name is the value of the passed parameter (jsoncallback) (success_jsonpCallback).

Finally, the json data is directly placed into the function in the form of input, so that a js syntax document is generated and returned to the client.
The client browser parses the script tag and takes the data returned from the server as an argument.
Passed in to the pre-defined callback function (success: function (json) encapsulated by the jquery $.ajax() method in the example above) on the client side.

In fact, the cross-domain method is to dynamically load the data by adding script, so you can't get the data directly, so you need to use the callback function.

2. Use getJson of jquery to read data across domains

In fact, the fundamental principle of the getJson approach is the same as the way ajax USES jsonp.

GetJson is commonly used in jquery to call for remote data and return it in json format. The prototype of the function is as follows:

JQuery getJSON (url, data, success (the data, the status, XHR))

parameter describe The url A necessity. Specify which URL the request will be sent to. The data Optional. Specifies the data to be sent to the server along with the request. Success (data, the status, XHR)

Optional. Specifies the function to run when the request succeeds.

Additional parameters:

Response  - contains the result data from the request Status  - contains the status of the request Xhr  - contains the XMLHttpRequest object

This function is simply an ajax function, which is actually equivalent to:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
}); 

Anyway, let's look at how to use getJson to fetch data across domains.

HTML page sample code:

$.getJSON("http://api.taobao.com/apitools/ajax_props.do&jsoncallback=?",
    function (data) {
        alert(data);
    }
);

Operating principle:

When sending a request, the callback function name of a callback function needs to be passed to the server side. The server side gets the callback function name and then reverts the returned data back to the client in the form of parameters, so that the client can call to.

So the address that sends the request URL must be followed by a jsoncallback=? Such a parameter, jquery will be? The number is automatically replaced with the name of the automatically generated callback function.

So the final actual request is: http://api.taobao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697

So in contrast to the ajax approach, the callback function is an automatically generated function name and a manually specified function name.