Brief Analysis of JSONP Technology Principle and Implementation
- 2021-06-28 08:20:46
- OfStack
Cross-domain Problem 1 has always been a common problem on the front end. Whenever it comes to cross-domain, the first technology that emerges is JSONP
JSONP, as I understand it, is not ajax. It inserts an script tag into the document and creates _callback method, executed with servercallback method, passing in some parameters
The limitation of JSONP is that because parameters can only be passed in through url by inserting the script tag, get requests can only be satisfied, especially when jQuery's ajax method is set, type:'POST', but as long as dataType:'jsonp'is set, GET requests are automatically used when requested.
Implementation logic
step1: Create_callback method (_script tags and _can be removed from callbackcallback method)
step2: Insert the script tag
step3: Server Output js
Realization:
var requestJsonp = function (opt) {
var funName, script;
/*
* step1 Establish _callback Method
*/
//_callback Function name
funName = '_cb' + (Math.random() * 1000000);
// Establish _callback Method
window[funName] = function (data) {
if (typeof opt.success == 'function') {
opt.success(data);
}
window[funName] = null;
delete window[funName];
document.body.removeChild(script);
script = null;
};
/*
* step2 insert script Label
*/
script = document.createElement('script');
script.type = 'text/javascript';
script.src = opt.url + (opt.url.indexOf('?') > -1 ? '&' : '?') + '_callback=' + funName;
document.body.appendChild(script);
/*
* step3 Server Output js
* Server should accept url In parameters _callback Value of , Execute output as function name js
* Similar output
* _callback({"name":"jsonp","description":"jsonp test"});
*/
/*
* Handle error
*/
script.addEventListener('error', function () {
window[funName] = null;
delete window[funName];
if (typeof opt.error == 'function') {
opt.error();
}
document.body.removeChild(script);
script = null;
});
};
requestJsonp({
url: 'http://www.url.org?tid=Jsx2',
success: function (data) {
console.log(data);
},
error: function () {
console.log('request error!');
}
});
For browsers, the behavior is to insert the script tag, execute the js code, and delete the script tag
The implementation code does not take into account compatibility and the generation of url after passing in data.
Here are the advantages and disadvantages of jsonp:
The advantage of JSONP is that it is not restricted by the same homology policy as the Ajax request implemented by the XMLHttpRequest object;It is more compatible and works in older browsers without the support of XMLHttpRequest or ActiveX;After the request is completed, the result can be returned by calling callback.
The disadvantage of JSONP is that it only supports GET requests and not other types of HTTP requests such as POST.It only supports cross-domain HTTP requests and does not solve the problem of how to make JavaScript calls between two pages in different domains.