jquery domänenübergreifende HTTP-Anforderungsdaten

jquery ist eine beliebte JavaScript-Bibliothek, die zur Vereinfachung von DOM-Vorgängen, Ereignisverarbeitung, Animationseffekten usw. verwendet wird. Die häufigste Anwendung besteht darin, Back-End-Daten über Ajax anzufordern, um ein Erlebnis ohne Seitenaktualisierung zu erreichen. In einigen Fällen müssen wir jedoch Daten von mehreren verschiedenen Domänennamen erhalten. In diesem Fall sind domänenübergreifende Anfragen erforderlich. In diesem Artikel wird erläutert, wie Sie mit jquery domänenübergreifende HTTP-Anforderungsdaten ausführen.

1. Was ist eine domänenübergreifende Anfrage?

Auf der Browserseite ist es aufgrund der Einschränkungen der Same-Origin-Richtlinie des Browsers nicht zulässig, von einer Seite in einem Domänennamen aus auf Daten unter einem anderen Domänennamen zuzugreifen, d. h. auf die Same-Origin-Richtlinie. Homologie bedeutet, dass Protokoll, Domänenname und Portnummer genau gleich sein müssen. Beispielsweise haben https://www.example.com und https://example.com unterschiedliche Ursprünge und http://www.example.com und http://www.example.org unterschiedliche Ursprünge.

Cross-Origin Request bezieht sich auf den Prozess der Anforderung von Daten von einer Quelle (Domänenname, Protokoll, Portnummer) an eine andere Quelle. Um domänenübergreifende Anfragen zu implementieren, muss der Browser eine Reihe von Sicherheitsüberprüfungen durchführen, um sicherzustellen, dass die angeforderten Daten zulässig sind.

2. Methoden zur domänenübergreifenden Anfrage

Derzeit sind die beliebtesten domänenübergreifenden Anfragemethoden die folgenden: ;script> tag So greifen Sie auf JS-Dateien zu und implementieren die domänenübergreifende Kommunikation zwischen verschiedenen Domänen. JSONP kann das src-Attribut des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags verwenden, um HTTP-Anfragen an andere Domänennamen zu stellen, und die zurückgegebenen Daten enthalten Code zum Ausführen einer Rückruffunktion, wodurch ein domänenübergreifender Datenanforderungs- und Rückrufmechanismus realisiert wird.

1. CORS

CORS ist eine standardmäßige Cross-Origin-Ressourcenfreigabetechnologie, die es dem Server ermöglicht, über neue HTTP-Header auf Webseitenanfragen von anderen Quellen zu reagieren. CORS erfordert Browser- und Serverunterstützung. Solange der Server erkennt, dass andere Domänen auf die Antwort zugreifen können, lässt der Browser diese domänenübergreifende Anfrage zu.

2. Proxy

Die Proxy-Methode bezieht sich auf die Bereitstellung eines Proxyservers unter demselben Domänennamen, das anschließende Anfordern von Daten durch den Proxyserver von anderen Domänennamen und das schließliche Zurücksenden der Anforderungsergebnisse an das Frontend. Voraussetzung für die Machbarkeit dieser Methode ist, dass es keine domänenübergreifenden Einschränkungen für die Schnittstellen gibt, auf die zugegriffen wird. Sie eignet sich für Situationen, in denen das JSONP-Protokoll nicht unterstützt wird und CORS die domänenübergreifenden Anforderungen nicht erfüllen kann.

3. PostMessage

PostMessage ist eine API für die dokumentübergreifende Kommunikation zwischen Fenstern. Sie bietet eine Möglichkeit zur quellenübergreifenden Kommunikation, die es einem Dokument ermöglicht, Nachrichten an ein anderes Dokument zu senden, unabhängig davon, ob die beiden Dokumente denselben Ursprung haben.

4. WebSocket

WebSocket ist ein bidirektionales Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine domänenübergreifende Kommunikation ermöglichen kann. WebSocket erstellt eine TCP-Verbindung für Daten Übertragung und Herstellung Beim Herstellen einer Verbindung ist ein Protokoll-Upgrade erforderlich.

Die oben genannten Methoden haben jeweils ihre eigenen Vor- und Nachteile. Wählen Sie je nach Szenario die geeignete domänenübergreifende Anforderungsmethode.
5. 3. Verwenden Sie jquery für domänenübergreifende Anforderungen. Die Verwendung von jquery für domänenübergreifende Anforderungen erfordert hauptsächlich die Verwendung der Ajax-Methode in jquery. Diese Methode unterstützt asynchrone Anforderungen und synchrone Anforderungen sowie zwei gängige Anforderungsmethoden: GET und POST. Unterstützung. Die spezifische Verwendung ist wie folgt:

JsonP-Anfrage

Jsonp-Datenanforderung muss angeben, dass das vom Server zurückgegebene Datenformat das JSONP-Format ist, einschließlich eines Parameters namens Callback, dessen Wert der Name der Callback-Funktion ist Der Name der Rückruffunktion wird über JSONP übergeben. Dies wird durch die Verwendung des Rückrufparameters des src-Parameters des Skript-Tags erreicht.

$.ajax({

url: 'http://example.com/jsonp',
type: 'GET',
dataType: 'jsonp', //指定数据类型为jsonp
jsonp: 'callback', //指定回调函数名称
success: function(res) {
    console.log(res);
}

});

Cors-Anfrage

Die Cors-Anfrage wird durch Hinzufügen des Felds „Access-Control-Allow-Origin“ im Header implementiert. Wenn Sie in JQuery eine domänenübergreifende Anforderung über die Ajax-Methode senden, können Sie die domänenübergreifende Anforderung implementieren, indem Sie den Parameter xhrFields festlegen. Unter anderem wird der Parameter withCredentials verwendet, um zu steuern, ob der Browser Cookie-Informationen trägt.

$.ajax({

url: 'http://example.com/cors',
type: 'GET',
xhrFields: {
    withCredentials: true //允许携带cookie信息
},
success: function(res) {
    console.log(res);
}

});
2. IV. Domänenübergreifende Anforderungen sind eine sehr häufige Anforderung in der Front-End-Entwicklung. In diesem Artikel werden gängige domänenübergreifende Anforderungsmethoden und die Verwendung von JQuery vorgestellt domänenübergreifende http-Methode zum Anfordern von Daten. Verschiedene domänenübergreifende Anforderungsmethoden haben ihre eigenen Vor- und Nachteile. Wählen Sie die geeignete Methode entsprechend den spezifischen Anforderungen. Bei der Implementierung domänenübergreifender Anfragen müssen Sie auf Sicherheitsaspekte achten, um böswillige Angriffe zu vermeiden.

Das obige ist der detaillierte Inhalt vonjquery domänenübergreifende HTTP-Anforderungsdaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!