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.


Related articles: