Home > Article > Web Front-end > Implementation method of jquery's ajax and getJson to obtain json data across domains_jquery
Many developers are using jquery to interact with data on the front-end and server-side, so it is easy to think that using jquery on the front-end can read the data of any site. When I was developing recently, because I had to share data with a project of a third-party company, and because I was considering not occupying much server resources, I decided to read the data directly in HTML instead of transferring it through the server. Then I just encountered the problem of cross-domain access on the browser side.
Cross-domain security restrictions refer to the browser side, and there are no cross-domain security restrictions on the server side.
There are currently two commonly used methods for browser-side cross-domain access:
1. Cross-domain through jQuery’s ajax. This is actually implemented using jsonp.
jsonp is the abbreviation of English json with padding. It allows script tags to be generated on the server side and returned to the client, that is, javascript tags are dynamically generated and data is read through javascript callback.
HTML page side sample code:
type: "get", //jquey does not support post cross-domain
async:false,
url: "http://api.taobao.com/apitools/ajax_props.do", //Cross-domain request URL
dataType: "jsonp",
//Parameter name passed to the request handler to obtain the jsonp callback function name (default: callback)
jsonp: "jsoncallback",
//Customized jsonp callback function name, the default is a random function name automatically generated by jQuery
jsonpCallback:"success_jsonpCallback",
//After successfully obtaining the json data on the cross-domain server, this callback function will be dynamically executed
success : function(json){
alert(json);
Server-side code is the key point. I initially thought that as long as the client can directly access cross-domain access through jsonp, this is not the case and requires server-side support.
The code is as follows:
String callbackName = (String)request.getAttribute("jsoncallback");
//Simple simulation of a json string, you can actually use Google's gson for conversion, and the number of times is through string splicing
//{"name":"Zhang San","age":28}
//It is to escape the " sign
String jsonStr = "{"name":"Zhang San","age":28}";
//The final returned data is: success_jsonpCallback({"name":"Zhang San","age":28})
String renderStr = callbackName "(" jsonStr ")";
response.setContentType("text/plain;charset=UTF-8");
response.getWriter().write(renderStr);
}
Principle of jsonp:
First register a callback (such as: 'jsoncallback') on the client side, and then pass the callback name (such as: success_jsonpCallback) to the corresponding processing function on the server side.
The server first generates the json data that needs to be returned to the client. Then use javascript syntax to generate a function. The function name is the value of the passed parameter (jsoncallback) (success_jsonpCallback).
Finally, the json data is placed directly into the function as a parameter, thus generating a js syntax document and returning it to the client.
The client browser parses the script tag and uses the data returned by the server as a parameter.
passes in the callback function predefined by the client (as encapsulated by the jquery $.ajax() method in the above example success: function (json)).
In fact, cross-domain loading of data is done by dynamically adding scripts. Data cannot be obtained directly, so callback functions need to be used.
2. Use jquery’s getJson to read data across domains
In fact, the basic principle of the getJson method is the same as the way ajax uses jsonp.
GetJson is commonly used in jquery to obtain remote data and return it in json format. The prototype of the function is as follows:
jQuery.getJSON(url,data,success(data,status,xhr))
Parameters | Description | ||||||||
---|---|---|---|---|---|---|---|---|---|
url | Required. Specifies the URL to which the request will be sent. | ||||||||
data | Optional. Specifies the data to be sent to the server with the request. | ||||||||
success(data,status,xhr) |
Extra parameters:
|
Back to business, let’s look at how to use getJson to obtain data across domains.
When sending a request, you need to pass a callback function name to the server. The server gets the callback function name, and then returns the return data to the client in the form of parameters, so that the client can call it.
So the address that sends the request URL must be followed by a parameter like jsoncallback=?. jquery will automatically replace 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 I want to compare it with the ajax method, that is, one of the callback functions is an automatically generated function name, and the other is a manually specified function name.