Analisis mendalam prinsip JSONP merentas domain_Pengetahuan asas

JavaScript ialah teknologi skrip dinamik bahagian hadapan yang sering digunakan dalam pembangunan web. Dalam JavaScript, terdapat sekatan keselamatan yang sangat penting yang dipanggil "Dasar Asal Sama". Dasar ini meletakkan sekatan penting pada kandungan halaman yang boleh diakses oleh kod JavaScript, iaitu, JavaScript hanya boleh mengakses kandungan dalam domain yang sama dengan dokumen yang mengandunginya.

Strategi keselamatan JavaScript amat penting apabila melaksanakan pengaturcaraan berbilang iframe atau berbilang tetingkap, serta pengaturcaraan Ajax. Menurut dasar ini, kod JavaScript yang terkandung dalam halaman di bawah baidu.com tidak boleh mengakses kandungan halaman di bawah nama domain google.com malah halaman antara subdomain yang berbeza tidak boleh mengakses satu sama lain melalui kod JavaScript. Kesan pada Ajax ialah permintaan Ajax yang dilaksanakan melalui XMLHttpRequest tidak boleh menyerahkan permintaan ke domain yang berbeza Contohnya, halaman di bawah abc.example.com tidak boleh menyerahkan permintaan Ajax ke def.example.com, dsb.

Walau bagaimanapun, apabila melakukan beberapa pengaturcaraan bahagian hadapan yang mendalam, operasi merentas domain tidak dapat tidak diperlukan Pada masa ini, "dasar asal yang sama" nampaknya terlalu keras. Permintaan GET merentas domain JSONP ialah penyelesaian biasa Mari kita lihat cara merentas domain JSONP dilaksanakan dan membincangkan prinsip merentas domain JSONP.

Kaedah menyerahkan permintaan HTTP ke domain yang berbeza dengan membuat nod dalam halaman dipanggil JSONP. JSONP berfungsi seperti yang diterangkan di bawah:

Andaikan permintaan GET diserahkan kepada http://example2.com/getinfo.php dalam halaman http://example1.com/index.php, kita boleh Kod JavaScript berikut diletakkan dalam halaman http://example1.com/index.php untuk dilaksanakan:

Salin kod Kod adalah seperti berikut:

var eleScript= document.createElement("skrip");
eleScript.type = "text/javascript";
eleScript.src = "http://example2.com/getinfo.php";
document.getElementsByTagName("HEAD")[0].appendChild(eleScript);

Apabila permintaan GET kembali daripada http://example2.com/getinfo.php, sekeping kod JavaScript boleh dikembalikan secara automatik dan boleh digunakan untuk memanggil http: //example1.com/index.phpFungsi panggil balik dalam halaman.

Kelebihan JSONP ialah : Ia tidak dihadkan oleh dasar asal yang sama seperti permintaan Ajax yang dilaksanakan oleh objek XMLHttpRequest ia mempunyai keserasian yang lebih baik dan boleh dijalankan dalam penyemak imbas yang lebih lama diperlukan; dan selepas permintaan selesai, hasilnya boleh dikembalikan dengan memanggil balik.

Kelemahan JSONP ialah : ia hanya menyokong permintaan GET tetapi bukan jenis permintaan HTTP lain seperti POST ia hanya menyokong permintaan HTTP merentas domain dan tidak dapat menyelesaikan masalah dua halaman dalam domain yang berbeza . Cara membuat panggilan JavaScript antara.

Contoh lain:

Salin kod Kod adalah seperti berikut:

var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':
$("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")};
$.ajax({
async:false,
URL: http://cross-domain dns/document!searchJSONResult.action,
Taip: "DAPAT",
Jenis Data: 'jsonp',
jsonp: 'jsoncallback',
Data: qsData,
Tamat masa: 5000,
beforeSend: function(){
//Kaedah ini tidak dicetuskan dalam mod jsonp Sebabnya mungkin jika dataType ditentukan sebagai jsonp, ia bukan lagi acara ajax
},
Kejayaan: fungsi (json) {//Fungsi panggil balik yang dipratakrifkan oleh jquery pada bahagian klien Selepas berjaya mendapatkan data json pada pelayan merentas domain, fungsi panggil balik ini akan dilaksanakan secara dinamik
. If(json.actionErrors.length!=0){
alert(json.actionErrors);            }
genDynamicContent(qsData,type,json); },
Lengkap: fungsi(XMLHttpRequest, textStatus){
          $.unblockUI({ fadeOut: 10 }); },
ralat: function(xhr){
//Kaedah ini tidak dicetuskan dalam mod jsonp Sebabnya mungkin jika dataType ditentukan sebagai jsonp, ia bukan lagi acara ajax
//Minta pengendalian ralat
alert("Ralat permintaan (sila semak status rangkaian yang berkaitan.)"); }
});




Kadang-kadang anda akan melihatnya ditulis seperti ini:

Salin kod

Kod adalah seperti berikut: $.getJSON("http://cross-domain dns/document!searchJSONResult.action?name1=" value1 "&jsoncallback=?", Fungsi(json){

If(json.Attribute name==value){

// Laksanakan kod
}
});



Kaedah ini sebenarnya ialah enkapsulasi lanjutan bagi api $.ajax({..}) dalam contoh di atas Beberapa parameter asas api $.ajax dirangkumkan dan tidak kelihatan.

Dengan cara ini, jquery akan dihimpunkan ke dalam permintaan dapatkan url berikut:

Salin kod

Kod adalah seperti berikut: http://cross-domain dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord= Use case¤tUserId=5351&conditionBean.pageSize=15

Verwenden Sie auf der Antwortseite (http://cross-domain dns/document!searchJSONResult.action) jsoncallback = request.getParameter("jsoncallback"), um den Namen der js-Funktion abzurufen, der später auf der Jquery-Seite zurückgerufen werden soll : jsonp1236827957501 und dann der Inhalt der Antwort Für ein Skript-Tags: „jsonp1236827957501(“ JSON-Array gemäß Anforderungsparametern generiert)“; erreicht den Zweck des domänenübergreifenden Datenaustauschs.

JSONP-Prinzip

Das grundlegendste Prinzip von JSONP besteht darin, dynamisch ein <script>-Tag hinzuzufügen, und das src-Attribut des script-Tags unterliegt keinen domänenübergreifenden Einschränkungen. Auf diese Weise hat diese domänenübergreifende Methode nichts mit dem Ajax-XmlHttpRequest-Protokoll zu tun. </script>

Auf diese Weise ist „jQuery AJAX Cross-Domain-Problem“ zu einer falschen Aussage geworden. Der Name der jquery $.ajax-Methode ist irreführend.

Wenn diese $.ajax-Methode auf dataType: 'jsonp' festgelegt ist, hat sie nichts mit Ajax XmlHttpRequest zu tun und wird durch das JSONP-Protokoll ersetzt. JSONP ist ein inoffizielles Protokoll, das die Integration von Skript-Tags auf der Serverseite und deren Rückgabe an den Client ermöglicht und so einen domänenübergreifenden Zugriff in Form von Javascript-Rückrufen ermöglicht.

JSONP ist JSON mit Padding. Aufgrund der Einschränkungen der Same-Origin-Richtlinie darf XmlHttpRequest nur Ressourcen von der aktuellen Quelle (Domänenname, Protokoll, Port) anfordern. Wenn wir eine domänenübergreifende Anfrage stellen möchten, können wir eine domänenübergreifende Anfrage stellen, indem wir das Skript-Tag von HTML verwenden und den auszuführenden Skriptcode in der Antwort zurückgeben, wobei das Javascript-Objekt direkt mit JSON übergeben werden kann. Diese domänenübergreifende Kommunikationsmethode heißt JSONP.

jsonCallback-Funktion jsonp1236827957501(...): Sie wird vom Browser-Client registriert, nachdem die JSON-Daten auf dem domänenübergreifenden Server abgerufen wurden

Der Ausführungsprozess von Jsonp ist wie folgt:

Registrieren Sie zunächst einen Rückruf (z. B. „jsoncallback“) auf dem Client und übergeben Sie dann den Rückrufnamen (z. B. jsonp1236827957501) an den Server. Hinweis: Nachdem der Server den Rückrufwert erhalten hat, muss er jsonp1236827957501(...) verwenden, um den auszugebenden JSON-Inhalt einzuschließen. Zu diesem Zeitpunkt können die vom Server generierten JSON-Daten korrekt vom Client empfangen werden.

Verwenden Sie dann die Javascript-Syntax, um eine Funktion zu generieren. Der Funktionsname ist der Wert des übergebenen Parameters „jsoncallback“ jsonp1236827957501.

Schließlich werden die JSON-Daten direkt als Parameter in die Funktion eingefügt, wodurch ein JS-Syntaxdokument generiert und an den Client zurückgegeben wird.

Der Client-Browser analysiert das Skript-Tag und führt das zurückgegebene Javascript-Dokument aus. Zu diesem Zeitpunkt werden die Javascript-Dokumentdaten als Parameter an die vom Client vordefinierte Rückruffunktion übergeben (z. B. die jquery-Methode $.ajax()). das obige Beispiel) Gekapselter Erfolg: Funktion (json)).

Man kann sagen, dass die JSONP-Methode im Prinzip mit übereinstimmt (qq space verwendet diese Methode). umfangreich, um einen domänenübergreifenden Datenaustausch zu erreichen). JSONP ist ein Skript-Injection-Verhalten und birgt daher bestimmte Sicherheitsrisiken.

Warum

warum unterstützt jquery dann kein domänenübergreifendes Posten?

Obwohl die Verwendung von Post zum dynamischen Generieren von IFrames den Zweck einer domänenübergreifenden Post erreichen kann (so hat ein JS-Experte jquery1.2.5 gepatcht), ist dies eine relativ extreme Methode und wird nicht empfohlen.

Man kann auch sagen, dass die domänenübergreifende Get-Methode legal ist und die Post-Methode aus Sicherheitsgründen als illegal gilt. Es ist am besten, als letzten Ausweg nicht den falschen Ansatz zu wählen.

Die Nachfrage nach domänenübergreifendem Zugriff auf der Clientseite scheint die Aufmerksamkeit von w3c geweckt zu haben. Den Informationen zufolge unterstützt der html5-WebSocket-Standard den domänenübergreifenden Datenaustausch und soll eine optionale Lösung für den domänenübergreifenden Datenaustausch sein in der Zukunft.

Nehmen wir ein supereinfaches Beispiel:

Code kopieren Der Code lautet wie folgt:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml"

>