JSONP instance parsing in AngularJS

Concept

First of all, Json and JSONP are different. Json is one of many data storage formats and one of the data writing methods. It's like one of the many poetry styles in Greater China (for example, seven-character poetry). This poetry style stipulates: This poetry style must include the title, the number of words per line of poetry (7 words), etc. The text format. The text format specified by Json is like this

(Json format diagram)

As for JSONP, it is a special communication method that can easily bypass the browser's same-origin security restrictions. Achieve the effect of loading resources (scripts, pictures, others) from different sources. For example, you are the prince of a kingdom, and you unexpectedly fall in love with a beautiful young girl in a nearby small town (resources). You want to meet her and develop further (obtain resources). However, your father, Mr. King (browser), does not agree. The king believes that this girl is not a royal girl (non-original resource) and is not worthy of the prince. While trapping the prince in the castle, he also released it outside the castle. There are many soldiers monitoring it, and outsiders are prohibited from entering (the same origin security restriction of the browser). But the prince was very persistent in love. He tried many ways to contact the girl, such as asking the eunuch Oba to bring a letter to the beautiful girl (PUT, GET, POST, etc.), but whenever he arrived at the city gate, , the soldier would find that the address of the letter was for the little girl, so he repeatedly banned the eunuch from going out (PUT, GET, and POST did not work when obtaining external resources). So the prince thought of a special communication method, which is JSONP. The little pigeon can fly across the castle, thus avoiding the supervision of soldiers (bypassing the browser's same-origin security restrictions) to communicate with the girl. The effect (communication with cross-domain resource sharing CORS is realized! O(∩_∩)O). In the end, after going through the difficulties of 9981, the prince fell in love with the eunuch (∑(っ°Д °;)っLife is full of surprises...)

Specific implementation method

To achieve this communication effect, the prince (The way to send the request) and the girl (the server) must be prepared.

When the prince sends a JSONP request, he first needs a pigeon (using Jsonp). Next, he needs a letter tied to the pigeon (callback parameter in the address bar)

$http.jsonp("https: //api.github.com?callback=CALLBACK").success(function(data){//...})

When the girl receives the letter from the little pigeon, she should also write the content in the small Letter from the pigeon, reply to the letter (package the response content into a JavaScript parameter through the callback parameter, and call it by the callback function corresponding to the request)

　 Method of packaging data

res.send([callback function]+ '('+ JSON.stringify(result) + ')');

Other details

When using JSONP, AngularJS will generate a <script> tag and insert it into the DOM for request. After the response is successful, it will Node deletion (deleting nodes may vary depending on the Angular version) </script>

　 Among them, CALLBACK will be replaced with a custom function generated specifically for this request, which is

$http.jsonp("https ://api.github.com?callback=CALLBACK")...) becomes

Therefore, when we develop JSONP backend services ourselves, we must ensure that the response data is included in the callback function specified in the request

Notes

There are potential security risks in using JSOPN, because JSONP allows backend services Calling the application's JavaScript makes the site vulnerable and may also expose user privacy