Heim > Artikel > Web-Frontend > Zusammenfassung der domänenübergreifenden AJAX-Anforderungsdatenmethoden (praktische Erklärung)
Zusammenfassung der domänenübergreifenden AJAX-Anforderungsdatenmethoden (praktische Erklärung)
- php中世界最好的语言Original
- 2018-03-31 13:32:211219Durchsuche
Dieses Mal werde ich Ihnen eine Zusammenfassung der domänenübergreifenden AJAX-Datenanforderungsmethoden geben (praktische Erklärung). Was sind die Vorsichtsmaßnahmen für die domänenübergreifende AJAX-Datenanforderung? Schauen Sie mal rein.
Aufgrund der Same-Origin-Richtlinie des Browsers kann die Ajax-Anfrage die in der Anfrageantwort zurückgegebenen Daten nicht empfangen
Die Anfragedaten müssen die integrierte Funktion des Browsers aufrufen Konstruktor XMLHttpRequest(). Instanzobjekt
var xhr = new XMLHttpRequest();
Beachten Sie, dass ActiveXobject ("Microsoft. Schrieb
, um über dieses Objekt
vier Zustände des Datenabrufs xhr.readyState Dieses Attribut speichert mehrere Zustände der angeforderten Daten
1.xhr.open(request method , Adresse anfordern, Synchronisation/asynchron einstellen);
2.xhr.send(null);// Anfrage senden Wenn es sich um eine Post-Anfrage handelt, dann die Parameter müssen in gesendet werden
3 Es wird immer geprüft, ob die Daten zurückgegeben werden
4 Der Wert von xhr.readyState ist 4, was anzeigt, dass die Daten erfolgreich zurückgegeben wurden
Dann müssen wir eine domänenübergreifende Anfrage stellen, wie das gehtLösung 1:
Verwenden Sie das src-Attribut des Skript-Tags, um Daten anzufordern. Die vom src-Attribut angeforderten Daten werden vom Browser nicht abgefangen < script srrc="http://jiang.com/AJAX/data.php">Auf diese Weise können wir die Daten anfordern, aber das hat einige Nachteile1. Wir können nicht steuern, was die Anfrage sendet, wenn die Seite hier geladen wird. 2. Auf diese Weise ist die Anfragemethode synchron, bevor der nächste Schritt des Codes erfolgt Dadurch kann sich die Ladezeit der Seite verlängern 3 Daher wird empfohlen, diese Methode nicht zu verwendenOption 2:
Erstellen Sie dynamisch ein Skript-Tag in js, um die Anforderungsschnittstelle anzugeben var script =document.createELement("script");
//Skript an das Head-Tag anhängen document.getElementsTagName( "head")[0].appendChild(script);Vorteile: Wir können den Zeitpunkt der Anfrage und die steuern Die Anfrage ist asynchron und verlängert nicht die Ladezeit der SeiteWichtiger Punkt: Wir können die Funktion auf der Anfrageseite in den Anfragedaten aufrufenVerwenden Sie die formalen Parameter der Funktion , um die Daten zu empfangen von der Anfrage zurückgegeben
Option 3:
Einfach einen Anfrageheader in der Backend-Schnittstelle der Anfrage festlegenZugriff -Control-Allow-OriginDie Daten der domänenübergreifenden Anforderung der Front-End-Seite, die diesen Anforderungsheader enthält, werden nicht vom Browser abgefangenOption 4:
Verwenden Sie das