How to implement jQuery+JSONP cross-domain requests

This time I will bring you jQuery+ JSONP cross-domain request How to implement it, what are the notes to implement jQuery+JSONP cross-domain request, the following is a practical case, let’s take a look one time.

JSONP (JSON with Padding) is a "usage mode" of JSON that can be used to solve the problem of cross-domain data access by mainstream browsers. Due to the same-origin policy, generally speaking, web pages located at server1.example.com cannot communicate with servers other than server1.example.com, with the exception of the HTML element. Using the open policy of the element, web pages can obtain JSON data dynamically generated from other sources, and this usage pattern is called JSONP. The data captured with JSONP is not JSON, but arbitrary JavaScript , which is executed with a JavaScript interpreter instead of parsed with a JSON parser.

The above paragraph comes from Baidu Encyclopedia. Concepts are always so abstract and difficult to understand. Looking at examples is the most intuitive expression. After seeing too many examples and understanding that point, you will naturally learn to describe it abstractly. This is why it is often said that "learning knowledge is a process from thin to thick, and from thick to thin." Okay, let’s go too far. Let’s look directly at an example.

Problem: There is a local page demo.html that needs to obtain data from http://localhost:3561/User/GetAllNames and display it.

Answer: Since the two parties in the question are not on the same server, jsonp needs to be used for cross-domain access.

① Client writing

The client uses the $.getJson method provided in jQuery for cross-domain access. getJson has 3 parameters:

plicity I. url: request address;

plicity II. data: parameters sent to the server;

plicity III. callback: ## on success #Callback .

The usage method of getJson is basically the same as the ordinary $.get method. The difference is that getJson needs to add callback=? to the parameter part after the url. This fixed part, jQuery will automatically replace ? with the correct one. Function name to execute the callback function. Then operate the json object returned from the foreign domain in the callback function, and the parameter of the callback function callback is the json object.

$.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) { for (var i = 0; i " + json[i] + " "); } }); ② Server-side writing

The logic of the server-side is mainly to serialize the data into json string , and then encapsulate it into the form of "callback(json)", callback The function name automatically generated for jQuery and passed to the server. The following is implemented using C#:

public class UserController : Controller { public string GetAllNames(string callback) { string[] names = new string[] { "张三丰", "张无忌", "令狐冲", "杨过", "郭靖" }; JavaScriptSerializer jss = new JavaScriptSerializer(); string json = jss.Serialize(names); return string.Format("{0}({1})", callback, json); } } At this point, the problem has been successfully solved.

Thinking: If the server has hard-coded callback (such as: return string.Format("moty({0})", json);), then the client How to write it?

Reference:

$.ajax("http://localhost:3561/User/GetAllNames", { jsonpCallback: "moty", dataType: "jsonp", success: function(json) { for (var i = 0; i " + json[i] + " "); } } }); I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!