jquery's ajax and getJson cross-domain to obtain json data (graphic tutorial)

This article mainly introduces the implementation method of jquery's ajax and getJson to obtain json data across domains. Friends in need can come and refer to it. I hope it will be helpful to everyone.

Many developers are Use jquery to interact with data on the front-end and server-side, so it is easy to think that you can use jquery on the front-end to read data from 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 cross-domain access on the browser side:

1. Through jQuery’s ajax Cross-domain, 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:

//首先要引入jquery的js包
jQuery(document).ready(function(){
$.ajax({
type : "get", //jquey是不支持post方式跨域的
async:false,
url : "http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL
dataType : "jsonp",
//传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonp: "jsoncallback",
//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
jsonpCallback:"success_jsonpCallback",
//成功获取跨域服务器上的json数据后,会动态执行这个callback函数
success : function(json){
alert(json);
}
});
});

Server-side sample code, taking java as an example:

Server-side code is the key point. I initially thought that as long as the client passes jsonp You can directly access across domains. In fact, this is not the case and requires server-side support.

public void jsonpTest() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//根据html指定的jsonp回调函数的参数名，获取回调函数的名称
//callbackName的值其实就是：success_jsonpCallback
String callbackName = (String)request.getAttribute("jsoncallback");
//简单模拟一个json字符串，实际可使用google的gson进行转换，次数通过字符串拼接
//{"name":"张三","age":28}
//\是对"号进行转义
String jsonStr = "{\"name\":\"张三\",\"age\":28}";
//最终返回的数据为：success_jsonpCallback({"name":"张三","age":28})
String renderStr = callbackName+"("+jsonStr+")";
response.setContentType("text/plain;charset=UTF-8");
response.getWriter().write(renderStr);
}

The principle of jsonp:

First register a callback on the client (such as: 'jsoncallback'), and then change the name of the callback ( Such as: success_jsonpCallback) is passed 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 data is loaded by dynamically adding scripts. Data cannot be obtained directly, so a callback function is required.

2. Use jquery's getJson to read data across domains

In fact, the fundamental 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)	Optional. Specifies a function to run when the request succeeds. Extra parameters: ##response - Contains the result data from the request status - Contains the status of the request xhr - Contains the XMLHttpRequest object

This function is the abbreviated ajax function, which is actually equivalent to:

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

Let’s get back to the point, let’s look at how to use getJson to obtain data across domains.

html page sample code:

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

Execution principle:

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 adjust it.

So the address that sends the request URL must be followed by a parameter such as 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 to say, one of the callback functions is an automatically generated function name, and the other is a manually specified function name.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

jquery ajaxMake it adaptive to height when applying iframe

AJAX What are the implementation methods for secondary linkage

##jquery

ajaxHow to deal with the Chinese garbled json returned

The above is the detailed content of jquery's ajax and getJson cross-domain to obtain json data (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!