Detailed explanation of JSONP implementation principles and cases

This time I will bring you a detailed explanation of the principles and cases of JSONP implementation. What are the precautions of JSONP implementation? The following is a practical case, let’s take a look.

Cross-domain issues have always been a common problem in the front-end. Whenever we talk about cross-domain, the first technology that emerges must be JSONP

In my understanding, JSONP is not ajax, it is Insert a script tag into the document, create a _callback method, execute the _callback method through the server, and pass in some parameters

The limitation of JSONP is that because the script tag is inserted, the parameters can only It is passed in through the url, so it can only satisfy the get request. Especially when using jQuery's ajax method, even if type: 'POST' is set, as long as dataType: 'jsonp' is set, the GET request will be automatically used when requesting

Implement logic

step1: Create _callback method (script tag and _callback method can be deleted in _callback)

step2: Insert script tag

step3: Server output js

Implementation:

var requestJsonp = function (opt) {
var funName, script;
/*
* step1 创建_callback方法
*/ 
//_callback函数名
funName = '_cb' + (Math.random() * 1000000);
//创建_callback方法
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 插入script标签
*/
script = document.createElement('script');
script.type = 'text/javascript';
script.src = opt.url + (opt.url.indexOf('?') > -1 ? '&' : '?') + '_callback=' + funName;
document.body.appendChild(script);
/*
* step3 服务器输出js
* 服务器应接受url参数中_callback的值,作为函数名执行输出js
* 类似输出
* _callback({"name":"jsonp","description":"jsonp test"});
*/ 
/*
* 处理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!');
}
});

The behavior of the browser is to insert script tags, execute js code, and delete script tags

The implementation code does not consider compatibility and the problem of generating url after passing in data.

Let me tell you the advantages and disadvantages of jsonp:

The advantages of JSONP are: It is not like XMLHttpRequestObject The Ajax request implemented is subject to the same origin policy; it has better compatibility and can run in older browsers without the support of XMLHttpRequest or ActiveX; and after the request is completed, it can Return the result by calling callback.

The disadvantages of JSONP are: It only supports GET requests but not other types of HTTP requests such as POST; it only supports cross-domain HTTP requests and cannot solve the problem of different domains. How to make JavaScript calls between two pages.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Summary of cases using JSONP

How to use json as a parameter in js

The above is the detailed content of Detailed explanation of JSONP implementation principles and cases. For more information, please follow other related articles on the PHP Chinese website!