Heim >Web-Frontend >js-Tutorial >Sprechen Sie kurz über die domänenübergreifenden Javascript-Fähigkeiten von JSON
Dieser Artikel ist hauptsächlich darauf zurückzuführen, dass ich schon andere über JSON Cross-Domain und Cross-Domain sprechen gehört habe, aber ich bin immer noch verwirrt und weiß nur eines. Also habe ich voller Wut verschiedene Informationen durchgelesen und herausgefunden, ob es sie gibt war etwas falsch, bitte korrigieren Sie mich^_^
Verstehen Sie zunächst, dass Browser eine sehr wichtige Sicherheitsbeschränkung haben, nämlich die Same-Origin-Richtlinie: Client-Skripte in verschiedenen Domänen können ohne ausdrückliche Genehmigung nicht gegenseitig die Ressourcen lesen. Domainübergreifend bedeutet verschiedene Quellen~
Um es einfach auszudrücken: Solange Protokoll, Port und Domänenname unterschiedlich sind, ist es domänenübergreifend!
Bei einer detaillierten Front-End-Programmierung sind jedoch zwangsläufig domänenübergreifende Vorgänge erforderlich. Derzeit scheint die „Same-Origin-Politik“ zu streng zu sein.
Lösung:
1. Verwenden Sie JSONP, um domänenübergreifende Probleme zu lösen: (nur für GET-Anfragen)
Implementierungsprinzip: Das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag ist nicht durch die Same-Origin-Richtlinie eingeschränkt. Es kann JavaScript-Dateien von überall laden, ohne dass derselbe Ursprung erforderlich ist.
Die Idee von JSONP besteht also darin, dass ich mit dem Server einen Funktionsnamen vereinbare und wenn ich eine Datei anfordere, gibt der Server ein Stück JavaScript zurück. Dieses JavaScript ruft die von uns vereinbarte Funktion auf und übergibt Daten als Parameter. Ein sehr zufälliger Punkt (nicht wirklich): Das Datenformat von JSON ist genau das gleiche wie das Format von Objekten in der JavaScript-Sprache. Somit kann dieses Objekt direkt in der von uns vereinbarten Funktion verwendet werden.
Verwenden Sie JavaScript-Code, um
zu lösenvar eleScript = document.createElement("script"); eleScript.type = "text/javascript"; eleScript.src = "http://example2.com/getinfo.php"; document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
Verwenden Sie jquery, um
zu lösen$.ajax({ url: http://跨域的dns/document!searchJSONResult.action, type: "GET", dataType: 'jsonp', //主要是这里和原来的json改变了! jsonp: 'jsoncallback', })
2. Verwenden Sie die window.postMessage-Methode von HTML5, um Daten domänenübergreifend zu übertragen (nur kompatibel mit IE8+, Firefox, Chrome, Opera und anderen Browsern)
Diewindow.postMessage(message,targetOrigin)-Methode ist eine neu eingeführte Funktion von HTML5. Sie können sie verwenden, um Nachrichten an andere Fensterobjekte zu senden, unabhängig davon, ob das Fensterobjekt zum gleichen Ursprung oder zu anderen Ursprüngen gehört.
--------------------- Lassen Sie uns zunächst diese beiden Lösungen vorstellen... Tatsächlich gibt es noch viele andere, ich werde sie später einzeln hinzufügen-- ----------- ----