Details of js jsop cross-origin request instances, jsjsop

Details of js jsop cross-origin request instances, jsjsop

Cross-origin problems encountered during project development are generally solved through JSONP. But what exactly is JSONP and the principle of implementation. You can take a good look at the project's free time.

1. What is JSONP?

To understand JSONP, I have to mention JSON. 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 server to integrate Script tags to return to the client, cross-origin access is implemented through javascript callback (this is only a simple implementation form of JSONP ).

2. What is JSONP used?

Due to the restrictions of the same-origin policy, XmlHttpRequest only allows requests to resources of the Current Source (domain name, protocol, Port). To implement cross-origin requests, you can use the script tag to implement cross-origin requests, then, the server outputs JSON data and executes the callback function to resolve cross-Origin data requests.

JSONP generation

1. As we all know, Ajax request resources are restricted by the same domain. No matter static resources or dynamic pages, web services can work.

2. at the same time, we found that when calling JS files on the web page, it is not affected by cross-origin (In addition, we also found that all tags with the 'src' attribute have cross-origin capabilities, for example, <script>, , and <iframe>)

3. it is conceivable that in the current stage, cross-Origin data access is only possible if you want to use web terminals (ActiveX controls, server proxies, HTML5 websocket, etc, that is, the server puts the data in a JS file for the client to call and process.

4. for data transmission, we know that a pure JSON character data format can describe complex data structures in a concise manner and is also supported by JS native, the client can easily process data in this format.

5. The solution is clear at a glance. The web end uses the same method as the call script to call the JS files dynamically generated on the Cross-origin server. The purpose of the server to dynamically generate a JS file is to obtain the callback function name of the client and pass the data required by the client in the JSON (or pure string) format.

6. after the client successfully calls the JS file, it obtains the parameters in the callback function. The rest is data processing. This method looks like Ajax, but they are not the same (Jquery encapsulates JSONP and Ajax together, and will be confused if you don't know it)

7. to facilitate the use of data on the client, an informal transmission protocol is gradually formed, which is called JSONP. One of the main points of this Protocol is to allow users to pass a callback parameter to the server, then, when the server returns data, the callback parameter is wrapped in JSON data as the function name, so that the client can customize its own function to automatically process the returned data.

Well, I don't know if you have understood JSONP. If you don't have it, let me summarize it. It's not good. Don't hit me.

The principle is that the client requests a link and adds the required parameters. callback indicates a JSONP request (the frontend and backend can be customized). The backend parses the request link, a jsonp request is found, and a call method is generated, and a string (either JSON or pure string) is dynamically generated based on the request parameters is inserted into the call method, in this way, the client can get the data and perform subsequent processing.

I have said so much, but it is not my style to go to code ..

Function test (data) {console. log (data)} var url = "http://www.x.com/test? A = 1 & callback = test "// send data to Principal (Data fiction) test (" aaaaaa ") test ({a: 1, B: 2 }) // then the front end accesses and executes the script through the script tag. The above things var script = document. createElement ('script'); script. setAttribute ('src', url); // Add the script tag to the head. At this time, the document is called. getElementsByTagName ('head') [0]. appendChild (script); // then the test method of the page is called, which is the implementation principle of jsonp.

The reality of JSONP in Jquery

$. Ajax ({type: "GET", url: "http://x.d.cn/asych/adv.html? Loc = 8 & callBack =? ", // Tell the background that this is a jsonp request. What method should be called?", Jq will automatically generate for you (if jq is usually set to "?", In this way, the jq callback function can be triggered upon success.) type: "post", // jsonp can only send get requests, even if I set the request type to postdataType: "jsonp ", // tell jquery That This Is a jsonp data, and generate a script tag to load jsdata: {a: "1"},/* success: function (data) {// method that jq will execute after the call is successful (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 use XmlHttpRequest to obtain content not on this page, while the core of JSONP is to dynamically Add the <script> tag to call the js script provided by the server.

Therefore, the difference between Ajax and JSONP is not about cross-origin. Ajax can implement cross-origin through the server proxy, and JSONP itself does not reject the acquisition of data from the same domain.

As mentioned above, the data formats of JSONP and Ajax may not be JSON or pure strings.

All in all, JSONP is not a subset of Ajax. This cannot be changed even if Jquery encapsulates JSONP into Ajax.

The above is a detailed description of the js jsop cross-origin request instance introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!