Using script for Http cross-origin requests: implementation principle of JSONP and code _ javascript skills-js tutorial

The src attribute of the script element can be used to set the URL and initiate an HTTPGET request to implement the script operation. HTTP supports cross-origin communication without restriction and the same-origin policy. Next, we will introduce the implementation of Http cross-origin requests in detail, if you are interested, you can refer to the src attribute of the script element to set the URL and initiate an http get request, the script element can be used to implement HTTP cross-origin communication without restriction and same-origin policy. generally, when the Ajax transmission protocol based on script is used, the server response adopts the JSON-encoded data format. When the script is executed, the JavaScript parser can automatically decode it. because it uses the JSON data format, this Ajax transmission protocol is also called "JSONP ". therefore, to use jsonp technology, you only need to set the src attribute of script and insert it into document. Then, the browser will send an http request to download the url executed by the src attribute.

When using a script element to call data, the response content must be wrapped in JavaScript function names and parentheses (that is, the response content can only be used as a function parameter), rather than a direct json data segment:

The Code is as follows:

Response (
[1, 2, {"hello", "world"}]
)

For a feasible period, we must tell the service in some way that it is being called from a script element and must return a jsonp response instead of a normal json, this can be achieved by adding a query parameter to the url: for example, append "? Json "(OR & json)

In practice, services that support jsonp do not forcibly specify the name of the callback function required by the client, such as response. instead, they use the value of the query parameter to allow the client to specify a function name and then fill in the response with the function name.

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 to specify the name of the callback function of the request.
Function getJSONP (url, callback ){
// Create a unique callback function name for this request
Var cbnum = "cb" + getJSONP. counter ++;
Var cbname = "getJSONP." + cbnum; // serves as the attribute of the jsonp function.
// Add the callback function name in form encoding to the url query section.
If (url. indexOf ("? ") =-1 ){
Url + = "? Jsonp = "+ cbname;
} Else {
Url + = "& jsonp =" + cbname;
}
// Create a script for sending requests
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 );
}
}
// Immediately trigger the http request
Script. src = url;
Document. body. appendChild (script );
}
GetJSONP. counter = 0;