Analysis of JSONP instances in Angularjs _jquery

Concept

First of all, JSON and JSONP are not the same. JSON, one of the many data storage formats, is one of the ways in which data is written. It is like one of the many poetic styles in greater China (for example, seven-word poems). This verse stipulates: This verse should contain the text format of the topic, the number of words (7 words) in each line of verse, etc. and the format of the text that JSON prescribes is this

(JSON format diagram)

And Jsonp, it is a special way of communication, it can easily bypass the browser's homologous security restrictions, to load from different sources of resources (script, pictures, other) effect. For example, you are the Prince of a kingdom, and you accidentally like a beautiful young girl (Resource) in a small town nearby, and you want to meet with her and further develop (get resources). But then, your father, Mr. King (browser) does not agree, the king that the girl is not a royal girl (not homologous resources), not worthy of the prince, the prince trapped inside the castle, but also to the castle outside a lot of soldiers to monitor, prohibit outsiders to enter (browser's homologous security restrictions). But the prince is very insistent on love, he tried many ways to contact the girl, for example, let the eunuch Obadhai with a letter to the beautiful Girl (put,get,post, etc.), but, whenever the gate, the soldiers will find the address of the letter to the little girl, so repeatedly forbade the eunuch out ( Put,get,post does not work when acquiring external resources. So the prince thought of a special way of communication, that is, the Flying Pigeon Book (JSONP), small pigeons can leap the castle, so as to avoid the monitoring of soldiers (bypassing the browser's homologous security restrictions), to achieve the effect of communication with the girl (and Cross-domain resource sharing cors Communication implementation!) O (∩_∩) o). Finally, after 9,981 difficult, the Prince likes the eunuch (∑ っ°д°;) っ life everywhere full of surprises ...)

The realization method of the concrete

To achieve this communication effect, the Prince (the way to send the request) and the Girl (service side) must be prepared.

Prince in sending Jsonp request, the first need a pigeon bar (use Jsonp), again, need a letter tied to the pigeon (the address bar of the callback parameters)

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

When the girl received the letter from the small Dove, but also to write the content on the small pigeon letter, back letter (through the callback parameter, the response content wrapped into a JavaScript parameter, and the request corresponding to the callback function to invoke)

Ways to wrap data

res.send(【callback函数】+ '('+ JSON.stringify(result) + ')');

Other details

When using JSONP, Angularjs generates a <script> tag and inserts it into the DOM to make a request, which is deleted after a successful response (deleting a node angular version may vary)

Where the callback is replaced by a custom function that is specially generated for this request, i.e.

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

<script src="https://api.github.com?callback=angular.callback._0"></script>

So when we develop our own JSONP backend services, make sure that the response data is included in the request-specific callback function

Attention matters

The use of JSOPN has potential security implications because JSONP allows back-end services to invoke the application's JavaScript, making the site vulnerable and potentially exposing user privacy

Article reference

"Angularjs Authority Course"

The above is the entire content of this article, I hope to help you, but also hope that a lot of support cloud Habitat community!