When encountering cross-domain problems in project development, they are generally solved through JSONP. But what exactly is JSONP and what is the implementation principle? You can study it carefully during the free time of the project.
1. What is JSONP?
To understand JSONP, I have to mention JSON, so what is JSON?
JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.
JSONP (JSON with Padding) is an unofficial protocol that allows the integration of Script tags on the server side to return to the client, and cross-domain access is achieved through the form of javascript callback (this is just a simple implementation of JSONP).
2. What is the use of JSONP?
Due to the limitation of the same-origin policy, XmlHttpRequest only allows the request of the resources of the current source (domain name, protocol, port). In order to implement cross-domain requests, cross-domain requests can be implemented through script tags, and then output JSON data on the server and execute callback functions, thus solving cross-domain data requests.
The generation of JSONP
1. As we all know, Ajax request resources are restricted by the same domain, whether they are static resources, dynamic pages, or web services.
2. At the same time, we found that when calling JS files on the web page, they are not affected by cross-domain (not only that, we also found that all tags with the attribute ‘src’ have cross-domain capabilities, such as <script>, <img>, <iframe>, etc.)
3. It can be imagined that at present, if you want to access data across domains through the web (ActiveX controls, server agents, HTML5 websockets, etc.) there is only one possibility, that is, the server will load the data into a JS format file for client to call and process
4. Data transmission. We know that a pure character data format called JSON can concisely describe complex data structures, and is also natively supported by JS. It can easily process data in this format on the client.
5. The solution is clear at a glance. The web side calls the dynamically generated JS files on the cross-domain server in the same way as the calling script. The reason why the server wants to generate JS files dynamically is to obtain the client's callback function name and pass the data required by the client into JSON (or pure string) format.
6. After the client successfully calls the JS file, the parameters in the callback function are obtained. The rest is the processing of the data. This method looks very similar to Ajax, but it is not the same (Jquery encapsulates JSONP and Ajax together, and if you don’t understand, you will confuse it)
7. In order to facilitate the client to use data, an informal transmission protocol has been gradually formed. People call it JSONP. One of the key points of this protocol is to allow users to pass a callback parameter to the server. When the server returns data, the callback parameter will be used as a function name to wrap the JSON data, so that the client can customize its own functions to automatically process the return data.
Okay, I don’t know if you understand JSONP. If not, I will summarize it. If you don’t have it, don’t hit me.
In fact, the principle is that the client requests a link and adds the required parameters. Callback means that it is a JSONP request (the front-end and the back-end can be unified by themselves). The background parses the request link and finds that it is a JSONP request. Then generates a call method, and dynamically generates a string (can be JSON or pure string) according to the request parameters. In this way, the client can access the data and perform subsequent processing.
Having said so much, it is not my style to not add code, but to add code. .
function test(data){
(data)
}
var url="/test?a=1&callback=test"//Pass the parameter a value of 1 to /test and tell him that the function name to be called is "test"//The background intercepts the callback and knows that you want to generate a calling method, the method name is test, and the parameters are passed. The background processing generates it as follows (data is fictional)test("aaaaaa")
test({a:1,b:2})
//Then the front end accesses and executes the above stuff through the script tag.var script = ('script');
('src', url);
// Add the script tag to the head, and the call starts('head')[0].appendChild(script);
//Then the page will be calledtestmethod，This isjsonpThe implementation principle。
About the reality of JSONP in Jquery
$.ajax({
type: "GET",
url: "/asych/?loc=8&callBack=?",//Tell the background that this is a jsonp request, what method needs to be called? If it is "?", jq will automatically generate it for you (if you use jq, it is generally set to "?", so that the callback function of jq can be triggered when successful)type:"post",//jsonp can only send get requests, even if I set the request type to postdataType:"jsonp",//Tell jquery this is a jsonp data, and a script tag needs to be generated to load jsdata:{
a:"1"
},
/*success: function (data) {//The method that jq will execute after success (if the callback parameter is "?")
$("body").append(data);
},*/
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert(errorThrown);
}
}).done(function(data){
$("body").append(data);
});
After reading the above code and comments, I believe everyone understands it. Although Jquery encapsulates JSONP into Ajax, it is essentially different.
The core of Ajax is to obtain contents other than this page through XmlHttpRequest, while the core of JSONP is to dynamically add <script> tags to call the js scripts provided by the server.
Therefore, the difference between Ajax and JSONP is not whether it cross-domain. Ajax can also achieve cross-domain through server-side proxy, and JSONP itself does not exclude the acquisition of data in the same domain.
As mentioned above, the data formats of JSONP and Ajax do not have to be JSON, but can also be pure strings.
In short, JSONP is not a subset of Ajax, and even if Jquery encapsulates JSONP into Ajax, it cannot change this.
The above is a detailed explanation of the cross-domain request example of JS JSOP introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!