[Reprint 1] jquery ajax and getJson obtain json data across domains, jqueryjson

[Reprint 1] jquery ajax and getJson obtain json data across domains, jqueryjson

Currently, there are two common cross-origin access methods for browsers:

1. Cross-origin through jQuery ajax, which is actually implemented in jsonp mode.

Jsonp is short for json with padding. It allows the server to generate script tags to return to the client, that is, dynamically generate javascript tags, and read data through javascript callback.

Html code:

1 $ (function () {2 3 $ ("# ww "). click (function () {4 5 $. ajax ({6 type: 'get', // jquey is 7 async: false, 8 url: "http://zenphoto.1youku.org/zp-core/getimg1.php ", // URL 9 dataType of the Cross-origin request: 'jsonp', 10 // The parameter name passed to the request processing program for obtaining the jsonp callback function name (default: callback) 11 jsonp: 'jsoncallback', 12 // custom jsonp callback function name. The default value is the random function name automatically generated by jQuery 13 jsonpCallback: "success_jsonpCallback ", 14 // After the json data on the Cross-origin server is obtained successfully, the callback function 15 success: function (result) {16 alert (result. img_url); 17} 18}); 19 20}); 21 22 });

Sample code on the server, php code:

$data['status'] = "1";  
$data['img_url'] = "http://www.baidu.com/img/baidu_jgylogo3.gif";
$jsoncallback = $_GET['jsoncallback'];  
echo $jsoncallback."(".json_encode($data).")";

 

Jsonp principle:

Register a callback (for example, 'jsoncallback') on the client, and pass the callback name (for example, success_jsonpCallback) to the corresponding processing function on the server.

The json data that the server returns to the client. Then, a function is generated in javascript syntax. The function name is the value of the passed parameter jsoncallback (success_jsonpCallback ).

Finally, place the json data directly in the function as an input parameter. In this way, a js syntax document is generated and returned to the client.
The client browser parses the script tag and uses the data returned by the server as a parameter,
Passed in to the pre-defined callback function of the client (success: function (json) encapsulated by the jquery $. ajax () method in the preceding example.

In fact, cross-origin loads data by dynamically adding scripts, and data cannot be directly obtained. Therefore, a callback function is required.

 

2. Use getJson of jquery to read data across domains

In fact, the basic principle of getJson is the same as that of ajax using jsonp.

GetJson is commonly used in jquery to obtain remote data and return data in json format. The function prototype is as follows:

1 jQuery. getJSON (url, data, success (data, status, xhr ))

Parameters
Description

Url 
Required. Specifies the URL of the request.

Data 
Optional. Specifies the data sent to the server together with the request.

Success (data, status, xhr)

Optional. Specifies the function that runs when the request is successful.

Additional parameters:

• Response-Contains the result data from the request
• Status-Contains the Request status.
• Xhr-Contains the XMLHttpRequest object.

This is an abbreviated ajax function, which is equivalent:

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

Next we will look at how to use getJson to retrieve data across domains.

Sample html page code:

 $(function(){  $("#ww").click(function(){  $.getJSON("http://zenphoto.1youku.org/zp-core/getimg1.php?&cid=257&square=9&jsoncallback=?",  function (result) {  alert(result.img_url);  }  );   });   });

Execution principle:

When sending a request, you need to pass a callback function name to the server. The server obtains the callback function name and returns the returned data to the client in the form of parameters, in this way, the client can be tuned.

Therefore, jsoncallback =? For such a parameter, jquery will? 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

Therefore, we want to compare it with the ajax method, that is, the callback function is an automatically generated function name, and the other is a manually specified function name.