"Reprint 1" jquery Ajax and Getjson cross-domain to get JSON data

There are two common approaches to browser-side cross-domain access:

1, through the Ajax of jquery cross-domain, which is actually used in the JSONP way to achieve.

JSONP is an abbreviation for English json with padding. It allows script tags to be generated on the server side to return to the client, that is, to dynamically generate JavaScript tags and to read data in the form of JavaScript callback.

HTML code:

1 $ (function () {2 3 $ ("#ww"). Click (function () {4 5 $.ajax ({6 type: ' Get ',//jquey is not supported for post-mode cross-domain 7 async:false, 8 URL: "http:/ /zenphoto.1youku.org/zp-core/getimg1.php ",//cross-domain request URL 9 dataType: ' Jsonp ', 10//pass to the request handler to get the parameter name of the JSONP callback function name (default: Callback) Jsonp: ' Jsoncallback ', 12///Custom JSONP callback function name, default to jquery automatically generated random function name of Jsonpcallback: "Success_jsonpcallback" , 14//successfully obtained JSON data on a cross-domain server, this callback function is executed dynamically success:function (result) {alert (result.img_url); 17} 18}); 19 20}); 21 22});

Server-side sample code, PHP code:

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

The principle of Jsonp:

First register a callback (for example: ' Jsoncallback ') on the client, and then pass callback's name (for example: Success_jsonpcallback) to the server-side corresponding handler function.

The server becomes the JSON data that needs to be returned to the client. Then, in JavaScript syntax, a function is generated, and the function name is the value of the parameter (jsoncallback) passed up (Success_jsonpcallback).

Finally, the JSON data is placed directly into the function in the form of a parameter, so that a document of JS syntax is generated and returned to the client.
The client browser, parsing the script tag, and returning the server-side data as parameters,
Passed into the client's pre-defined callback function (as in the previous example, the jquery $.ajax () method encapsulates the Success:function (JSON)).

In fact, cross-domain loading data by dynamically adding script, unable to get data directly, so we need to use callback function.

2. Using jquery's Getjson to read data across domains

In fact, the fundamental principle of the getjson approach is the same as the way Ajax uses JSONP.

jquery is commonly used in Getjson to invoke the acquisition of remote data and return it in JSON format. The prototype of the function is as follows:

1 Jquery.getjson (Url,data,success (DATA,STATUS,XHR))

Parameters
Describe

URL
Necessary. Specifies which URL to send the request to.

Data
Optional. Specifies the data that is sent to the server along with the request.

Success (DATA,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 state of the request
• xhr -Contains XMLHttpRequest objects

The function is a shorthand Ajax function, which is actually equivalent to:

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

Let's look at how to get data across domains using Getjson.

HTML Page Sample 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);  });   });   });

　　

Principle of execution:

When sending a request, it is necessary to pass a callback callback function name to the server side, the server side to get the callback function name, and then return the data in the form of parameters back to the client, so that the client can be transferred to.

So send the request URL after the address must be on the jsoncallback=? This parameter, jquery automatically replaces the number 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 with the Ajax way to compare, that is, the callback function is an automatically generated function name, one is a manually specified function name.

"Reprint 1" jquery Ajax and Getjson cross-domain to get JSON data