I haven't written an essay for a long time, and I always feel like I don't have time, but in fact, time is... Enough nonsense, a few days ago, there was a new requirement at work, which required the front-end web page to call the backend Webservice method asynchronously to return information. There are many ways to implement it, this example uses jQuery+Ajax, after completion, everything is OK to debug locally, but there is a problem after deploying to the server, and the background service call is not responsive, what's going on? The code hasn't changed much, the only thing that has changed is the URL address in jQuery's ajax method. Could it be that the problem here is that after checking and debugging, it turns out that the homologous policy is at fault, we know that Javascrip{filtering}t or jQuery is a dynamic scripting technique often used in web front-end development. In Javascrip{filtering}t, there is an important security limitation known as the "Same-Origin Policy". This policy imposes an important restriction on the content of the page that Javascrip{filter}t code can access, i.e., Javascrip{filtering}t can only access content under the same domain name as the document or script that contains it. Scripts under different domains cannot access each other, not even subdomains. Regarding the homologous strategy, readers can explain it in more detail on Baidu, which will not be repeated here.
But sometimes it is inevitable to carry out cross-domain operations, and the "homologous policy" is a limitation, what should we do? Let's take a look at how JSONP cross-domain is implemented and discuss the principle of JSONP cross-domain.
JSONP is mentioned here, then someone asked, what is the difference and difference between it and JSON, let's take a look, Baidu Encyclopedia has the following explanation:
JSON (Javascrip{filtering}t Object Notation) is a lightweight data exchange format. It is based on a subset of Javascrip{filter}t (Standard ECMA-262 3rd Edition - December 1999). JSON uses a completely language-independent text format, but also uses habits similar to the C family (including C, C++, C#, Java, Javascrip, Perl, Python, etc.). These features make JSON an ideal language for data exchange. Easy to read and write by humans, but also easy to parse and generate by machine (fast network transmission).
JSONP (JSON with padding) is a "usage pattern" of JSON, which can be used to solve the problem of cross-domain data access in mainstream browsers. Due to the same-origin policy, pages generally located on server1.example.com cannot communicate with servers that are not server1.example.com, with the exception of the <scrip{filter}t> element of HTML. Using this open strategy of the <scrip{filter}t> element, web pages can get JSON data dynamically generated from other sources, and this usage pattern is known as JSONP. The data captured with JSONP is not JSON, but arbitrary Javascrip{filter}t, which is executed with the Javascrip{filter}t translator instead of parsed by the JSON parser.
At this point, it should be understood that JSON is a lightweight data exchange format, like xml, which is used to describe data between data. JSONP is a way to use JSON data, and instead of returning a JSON object, it is a javascrip{filtering}t script that contains a JSON object.
So how does JSONP work, we know that due to the limitations of the same-origin policy, XmlHttpRequest only allows requests for resources from the current source (domain name, protocol, port). Cross-domain requests are not possible for security reasons, but we found that when js files are called on web pages, they are not affected by cross-domain or not, and tags with the "src" attribute have cross-domain capabilities, such as <scrip{filter}t>, <img>, ,<iframe>If you want to make a cross-domain request, make a cross-domain request by using the scrip{filter}t tag of html, and return the scrip{filtering}t code to be executed in the response, in which you can directly use JSON to pass the javascrip{filter}t object. That is, generating JSON data on the cross-domain server and then wrapping it into a scrip{filtering}t script back, which breaks through the limitations of the same-origin policy and solves the problem of cross-domain access.
Let's take a look at how to achieve it:
Front-end code:
|
Posted on 12/28/2015 2:22:00 PM
|
|
|
