Parsing JSONP instances in AngularJS

The concept of JSONP instance parsing in AngularJS

First, Json and JSONP are different. Json is one of the many data storage formats and one of the Data writing methods. For example, it is one of the many poems in Greater China (for example, seven poems ). This kind of poetry stipulates that this kind of poetry should contain the subject, the number of characters (7 words) of each line of verse, and so on. The text format specified by Json is as follows:

(Json format)

JSONP is a special communication method that can easily bypass the same-source security restrictions of the browser to load resources (scripts, images, and others) from different sources. For example, you are a prince of the kingdom. You accidentally liked a pretty young girl (Resource) in a small town nearby ), you want to meet her and further develop (obtain resources ). However, your father, Mr. King (browser), does not agree that the King thinks that this girl is not a girl of the Royal Family (not a resource of the same origin), not worthy of the prince, while keeping the prince inside the castle, there are also a lot of soldiers outside the castle to monitor and prohibit outsiders from entering (same-source security restrictions for browsers ). But the prince insisted on his love. He tried many ways to contact the girl. For example, he sent a letter to the pretty girl (PUT, GET, POST, and so on) from eunuch ouba, every time they arrive at the city gate, the soldiers will find that the address of this letter is for the girl, so they repeatedly prohibit the eunuch from going out (PUT, GET, POST does not work when obtaining external resources ). As a result, the prince thought of a special communication method, namely the Flying Pigeon book (JSONP). The little pigeon could jump over the castle, thus avoiding the supervision of soldiers (bypassing the browser's same-source security restrictions ), to achieve the effect of communicating with girls (sharing CORS with cross-origin resources is achieved! O (worker _ worker) O ). In the end, after difficult times, the prince liked the eunuchs (Σ (っ ° Д °;). Life is full of surprises ...)

Implementation Method

To achieve this communication effect, both the Prince and the girl (server) must be prepared.

When sending a JSONP request, the prince needs a pigeon first (using Jsonp). Then, a letter is required to be bound to the pigeon (the callback parameter in the address bar)

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

When a girl receives a letter from a pigeon, she also needs to write the content in the letter to the pigeon to reply (through the callback parameter, the response content is packaged into a JavaScript parameter, and called by the callback function corresponding to the request)

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 a successful response, the node will be deleted (the specific Angular version may be different if you delete the node)

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

$ Http. jsonp ("https://api.github.com? Callback = CALLBACK ")...)