Detaillierte Erläuterung der JSONP-Implementierungsprinzipien und -fälle

Dieses Mal werde ich Ihnen die Prinzipien und Fälle der JSONP-Implementierung ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die JSONP-Implementierung?

Domänenübergreifende Probleme waren schon immer ein häufiges Problem im Frontend. Wenn wir über domänenübergreifende Probleme sprechen, muss die erste Technologie, die auftaucht, JSONP sein.

Nach meinem Verständnis ist JSONP nicht Ajax, sondern ein Skript-Tag in das Dokument einfügen, eine _callback-Methode erstellen, die _callback-Methode über den Server ausführen und einige Parameter übergeben

Die Einschränkung von JSONP besteht darin, dass das Skript-Tag eingefügt wird. Die Parameter können nur über die URL übergeben werden, sodass sie nur die Get-Anforderung erfüllen können, insbesondere wenn die Ajax-Methode von jQuery verwendet wird, solange dataType: „jsonp“ festgelegt ist Die GET-Anfrage wird automatisch verwendet, wenn

Logik implementieren

Schritt 1: _callback-Methode erstellen (Skript-Tag und _callback-Methode können in _callback gelöscht werden)

Schritt2: Skript-Tag einfügen

Schritt3: Der Server gibt js aus

Implementierung:

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!');
}
});

Das Verhalten des Browsers besteht darin, das Skript-Tag einzufügen , führen Sie den JS-Code aus und löschen Sie das Skript-Tag

Der Implementierungscode berücksichtigt nicht die Kompatibilität und das Problem der URL-Generierung nach der Datenübergabe.

Lassen Sie mich Ihnen die Vor- und Nachteile von JSONP erläutern:

Die Vorteile von JSONP sind: Das ist nicht der Fall wie XMLHttpRequest object implementierte Ajax-Anfrage unterliegt derselben Ursprungsrichtlinie und kann in älteren Browsern ohne die Unterstützung von XMLHttpRequest oder ActiveX ausgeführt werden das Ergebnis durch Aufruf von Callback.

Die Nachteile von JSONP sind: Es unterstützt nur GET-Anfragen, aber keine anderen Arten von HTTP-Anfragen wie POST; es unterstützt nur domänenübergreifende HTTP-Anfragen und kann das Problem verschiedener Domänen nicht lösen . So führen Sie JavaScript-Aufrufe zwischen zwei Seiten durch.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Eine Zusammenfassung von Fällen, in denen JSONP verwendet wird

Wie man JSON als Parameter in JS verwendet

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JSONP-Implementierungsprinzipien und -fälle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!