Detailed explanation of the steps for using jQuery+JSONP cross-domain requests

This time I will bring you a detailed explanation of the steps for using jQuery JSONP cross-domain request. What are the precautions for using jQuery JSONP cross-domain request? Here is the actual combat Let’s take a look at the case.

JSONP(JSON with Padding) is a "usage pattern" 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 located in The web page of server1.example.com cannot communicate with a server that is not server1.example.com, and HTML The <script> element is an exception. Using this open policy of the <script> element, web pages can get dynamically generated scripts from other sources. JSON data, and this usage pattern is called JSONP. The data captured using JSONP is not JSON, but arbitrary <a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript. Use JavaScript interpreter executes instead of parsing with JSON parser. </script>

The above paragraph comes from Baidu Encyclopedia. Concepts are always so abstract and difficult to understand. The most intuitive expression is to look at examples. 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.

① Client writing

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

I. url: request address;

II. data: parameters sent to the server;

III. callback: Callback function upon success.

The usage method of getJson is basically the same as the ordinary $.get method. The difference is that getJson needs to add the fixed part callback=? to the parameter part after the url. jQuery Will be replaced automatically? is the correct 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.

nbsp;html>


<meta>
  <title></title>


  

  <script></script>   <script> $.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) { for (var i = 0; i < json.length; i++) { $("#nameList").append("<li>" + json[i] + ""); } }); </script>

② Server-side writing

The logic of the server is mainly to serialize the data into jsonstring, and then encapsulate it into the form of "callback(json)". The callback is the function name automatically generated by 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 callback has been written hard on the server (for example: return string.Format("moty({0})", json);), then how should the client 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!

Recommended reading:

Detailed explanation of the use of node's process and child_process modules

vue2.0 loops through and loads all images Methods

The above is the detailed content of Detailed explanation of the steps for using jQuery+JSONP cross-domain requests. For more information, please follow other related articles on the PHP Chinese website!