Zusammenfassung mehrerer Methoden zum Erwerb domänenübergreifender JS-Kenntnisse (Picture Ping, JSONP und CORS)_javascript

Domänenübergreifend

Obwohl es eine Same-Origin-Richtlinie gibt, ist Cross-Domain in js immer noch sehr verbreitet, einschließlich document.domain, window.name, image ping, jsonp und CORS. Hier ist eine kurze Zusammenfassung von image ping, jsonp, und CORS-Vorbereitungen vergessen.

Bild-Ping

Bilder können von jeder URL geladen werden, sodass durch Festlegen der Quelle von img auf die URL einer anderen Domäne eine einfache domänenübergreifende Funktion erreicht werden kann. Sie können die Ereignisse onload und onerror verwenden, um festzustellen, ob eine Antwort empfangen wurde.

var img=new Image();
img.src='http://www.jb51.net';
img.onerror=function(){
 alert('error');
}
img.onload=function(){
 alert('success');
}

Hier wird ein neues IMG-Objekt erstellt. Dies ist ein Fehlerereignis. Wenn die URL in ein Bild geändert wird, wird http://images.jb51 angezeigt. net//710118 /o_MacBook Air.png, der Onload-Ladeinformationserfolg wird angezeigt, wodurch eine einfache domänenübergreifende Implementierung erreicht wird.

Mit dem domänenübergreifenden Bild-Ping können Sie nur Get-Anfragen senden und nicht auf den Text der Antwort zugreifen. Sie können nur überwachen, ob eine Antwort vorliegt, die zum Verfolgen von Anzeigenklicks verwendet werden kann.

jsonp

jsonp ist JSON mit Rückruffunktion. Der ursprüngliche Name ist JSON mit Auffüllung. Er wird als aufgefüllter JSON und Parameter JSON übersetzt.

Da der src des Skripts domänenübergreifend sein kann, fügen Sie nach der gesendeten URL einen Rückrufparameter hinzu und übergeben Sie ihn an den Server. Dann werden die vom Server zurückgegebenen Daten als Parameter des Rückrufs verwendet Wir selbst können JSON-Daten zur Verarbeitung empfangen.

Der einfache Code lautet wie folgt:

<script type="text/javascript">
function call(data){
 alert(data.city);
}
</script>
<script type="text/javascript" src='http://freegeoip.net/json/&#63;callback=call'></script>

Hier setzen wir den Quellcode des Skripts auf http://freegeoip.net/json/?callback=call, eine API zum Abrufen der IP-Adresse des Benutzers (bei Interesse können Sie dies tun). Klicken Sie hier, um anzuzeigen), und fügen Sie dann den Rückruf als Parameter in die URL ein. Die zurückgegebenen JSON-Daten werden als Parameter des Rückrufs verwendet. Hier definieren wir den Rückruf als Aufruffunktion, d. h. die zurückgegebenen JSON-Daten werden Als Parameter des Aufrufs übergeben. Bei dieser Aufruffunktion wird nur die Stadt des Benutzers angezeigt. Das Ausgabeergebnis hier ist Hebei. Weitere IP-Informationen finden Sie auf der offiziellen Website. Dort finden Sie eine detaillierte Liste, z. B. Ländername, Zeitzone usw.

CORS (Cross Resource Sharing)

CORS ist ungefähr das Gleiche wie Ajax. Das einzige, worauf wir zugreifen können, ist „load“ und „error“. Die Methode ist ungefähr die gleiche wie xhr, außerdem sind Öffnen und Senden erforderlich.

Für andere Browser wie ff und Chrome wird xhr hier nur zur Demonstration verwendet. Wenn Sie eine browserübergreifende Funktion erreichen möchten, können Sie mit xdr zusammenarbeiten, um Kompatibilität zu erreichen.

xhr lautet wie folgt:

var xhr=new XMLHttpRequest();   
var url="http://www.jb51.net";
xhr.open('GET', url); 
xhr.send(null);

Die hier verwendete URL ist http://www.jb51.net. Der einzige Unterschied zu Ajax besteht darin, dass die URL eine domänenübergreifende absolute Adresse verwendet Adresse oder absolute Adresse.

Sehen Sie sich die Konsole an, hier wird ff40.0.3 verwendet und die angezeigten Informationen lauten wie folgt:

Cross-Origin-Anfrage blockiert: Die Same-Origin-Richtlinie verbietet das Lesen der Remote-Ressource unter http://www.jb51.net. (Ursache: CORS-Header „Access-Control-Allow-Origin“ fehlt).

Es gibt also noch einen weiteren Schritt zur domänenübergreifenden Implementierung mit CORS, nämlich das Festlegen von Access-Control-Allow-Origin auf der Serverseite.