Using script to perform Http cross-domain requests: JSONP implementation principles and codes_javascript skills

The src attribute of the element can set the URL and initiate an HTTP GET request. Use the element to implement script operations. HTTP can communicate across domains without being restricted by the same-origin policy. Usually, Ajax based on is used When transmitting the protocol, the server response uses JSON-encoded data format. When executing the script, the JavaScript parser can automatically decode it. Because it uses the JSON data format, this Ajax transmission protocol is also called "JSONP". Therefore, jsonp technology is used , just set the src attribute of and insert it into the document, and then the browser will send an http request to download the url executed by the src attribute.

When called using the element data, the response content must be wrapped in JavaScript function names and parentheses (that is, it can only be used as parameters of the function), rather than a direct piece of json data:

Copy code The code is as follows: response( [1, 2, {"hello", "world"}] ) For this to work, we must somehow tell the service that it is being called from a element and must return a jsonp response instead of plain json. This can be done by adding a query parameter to the url. To do this: For example, append "?json" (or &json)

In practice, services that support jsonp do not enforce a callback function name that the client must implement, such as response. Instead they use query parameters value, allowing the client to specify a function name and then use the function name to populate the response. Copy code The code is as follows: //Send a json request based on the specified url //Then pass the parsed response data to the callback function //Add a query parameter named jsonp to the url, using Specify the name of the callback function for this request function getJSONP(url, callback){ //Create a unique callback function name for this request var cbnum = "cb" getJSONP.counter; var cbname = "getJSONP." cbnum; //As an attribute of the jsonp function //Add the callback function name to the url query part in the form of form encoding if(url.indexOf("?" ) === -1){ url = "?jsonp=" cbname; }else{ url = "&jsonp=" cbname; } //Create var script = document.createElement("script"); //Define the callback function executed by the script getJSONP[cbnum] = function(response){ try{ callback(response); //Process the response } finally{ //Delete the function and remove the corresponding script element delete getJSONP[cbnum]; script. parentNode.removeChild(script); } } //Trigger http request immediately script.src = url; document.body.appendChild(script); } getJSONP.counter = 0;