jquery domänenübergreifende Anforderungsdaten abrufen

Bei der Webentwicklung müssen wir normalerweise Daten von einem anderen Domainnamen anfordern, um bestimmte Geschäftsanforderungen zu erfüllen. In diesem Fall sind domänenübergreifende Anfragen erforderlich. In diesem Prozess ist die Get-Anfrage des jQuery-Frameworks eine sehr häufige Methode. In diesem Artikel wird erläutert, wie Sie mit der get-Methode von jQuery domänenübergreifende Anforderungen stellen und Daten abrufen können.

1. Was ist eine domänenübergreifende Anfrage? Wenn sich der Domänenname, der Port oder das Protokoll der angeforderten Ressource vom aktuellen Dokument unterscheidet, wird dies als domänenübergreifende Anfrage bezeichnet. Dies ist auf die Richtlinienbeschränkung des Browsers für den gleichen Ursprung zurückzuführen. Das heißt, nur wenn das Protokoll, der Hostname und die Portnummer der beiden URLs identisch sind, können Daten vom gleichen Ursprung übertragen werden. Bei einer domänenübergreifenden Anfrage löst der Browser automatisch einen Sicherheitsmechanismus aus, um Anfragen vom aktuellen Domänennamen auf andere Domänennamen zu beschränken.

2. Die get-Methode von jQuery

jQuery ist eine browserübergreifende JavaScript-Bibliothek, die auf JavaScript basiert. Es wird häufig zur Entwicklung dynamischer Seiten, eigenständiger JavaScript-Anwendungen und asynchroner Anforderungen verwendet. In jQuery gehört die get-Methode zum Ajax-Modul und wird verwendet, um Daten vom Server über eine HTTP-GET-Anfrage abzurufen.

Bei der Implementierung einer domänenübergreifenden Anfrage müssen wir die get-Methode in jQuery verwenden, um eine Anfrage zu senden und Antwortdaten zu empfangen. Diese Methode muss die folgenden drei Parameter übergeben:

URL: die URL-Adresse der angeforderten Ressource;

1. Erfolg: die Rückruffunktion, nachdem die Anfrage erfolgreich war; Dabei ist die Erfolgsrückruffunktion Erforderlich und wird zur Verarbeitung der nach erfolgreicher Anforderung zurückgegebenen Daten verwendet.
2. 3. Beispiel für eine domänenübergreifende Anforderung
3. Nun gehen wir davon aus, dass es eine API-Schnittstelle gibt, die einen Datensatz im JSON-Format bereitstellt, und wir müssen diesen Datensatz von einem anderen Domänennamen anfordern. Das Folgende ist ein einfaches JSON-Datenformat:

{
    "name": "Apple",
    "color": "Red, Yellow, Green",
    "shape": "Round"
}

Lassen Sie uns diese Daten im JSON-Format über die get-Methode von jQuery abrufen:

$.get("https://api.example.com/fruits/apple", function(data) {
    console.log(data);
});

Hier übergeben wir die angeforderte URL als ersten Parameter an die get-Methode. Mit dieser Methode senden wir eine Get-Anfrage an die API-Schnittstelle und erhalten die von der Schnittstelle zurückgegebenen JSON-Daten, nachdem die Anfrage erfolgreich war. Diese JSON-Daten werden an den Datenparameter in der Rückruffunktion übergeben und wir können die Daten in dieser Funktion verarbeiten.

Allerdings kann es bei der tatsächlichen Verwendung dazu kommen, dass die Anfrage mit einer Fehlermeldung fehlschlägt. In diesem Fall können wir die fail-Methode von jQuery verwenden, um die Fehlermeldung abzurufen.

$.get("https://api.example.com/fruits/apple", function(data) {
    console.log(data);
}).fail(function() {
    console.log("请求失败");
});

In diesem Beispiel verwenden wir die Methode fail, um die Fehlerinformationen der Anfrage abzurufen. Wenn die Anfrage fehlschlägt, gibt die Konsole die Fehlermeldung „Anfrage fehlgeschlagen“ aus. Auf diese Weise können wir die Fehlermeldung entsprechend behandeln.

4. Voraussetzungen für domänenübergreifende Anfragen

Bei domänenübergreifenden Anfragen muss der Server einige Einstellungen vornehmen, um Anfragen von anderen Domainnamen zuzulassen, andernfalls blockiert der Browser die Anfrage und zeigt eine Fehlermeldung an. Um dieses Problem zu lösen, können wir CORS-Header-Informationen (Cross-Origin Resource Sharing) auf der Serverseite hinzufügen, um Anfragen von anderen Domänennamen zu ermöglichen.

In der API-Schnittstelle können wir „Access-Control-Allow-Origin“ im HTTP-Antwortheader hinzufügen, um den Ursprung der zulässigen Anfrage anzugeben. In PHP können wir beispielsweise den folgenden Code hinzufügen:

header("Access-Control-Allow-Origin: *");

In diesem Beispiel bedeutet das Sternchensymbol, dass Anfragen von jedem Domänennamen zulässig sind. Wenn Sie nur bestimmten Domänennamen erlauben, Daten anzufordern, können Sie das Sternchen durch den Zieldomänennamen ersetzen. Wenn Sie beispielsweise nur example.com erlauben, Daten anzufordern, können Sie dies wie folgt festlegen:

header("Access-Control-Allow-Origin: https://example.com");

Wenn Sie Node.js verwenden, können Sie natürlich Frameworks wie Express und Koa verwenden, um die CORS-Header-Informationen festzulegen . Das Folgende ist ein einfacher Express-Beispielcode:

const express = require('express');
const app = express();

// 添加CORS头信息
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

// 返回JSON数据
app.get('/fruits/apple', (req, res) => {
    res.json({"name": "Apple", "color": "Red, Yellow, Green", "shape": "Round"});
});

// 监听端口
app.listen(3000, () => console.log('Example app listening on port 3000!'));

In diesem Beispiel verwenden wir das Express-Framework, um einen HTTP-Dienst zu erstellen und CORS-Header-Informationen in der Middleware hinzuzufügen. In der Get-Anfrage geben wir einen Datensatz im JSON-Format an den Client zurück. Wenn alles in Ordnung ist, sollte der Client in der Lage sein, die Daten erfolgreich abzurufen.

5. Zusammenfassung

Durch die Einleitung dieses Artikels haben wir gelernt, was domänenübergreifende Anfragen sind, wie man die get-Methode von jQuery verwendet, um domänenübergreifende Anfragen durchzuführen, und einige notwendige Einstellungen auf dem Server eingeführt. Domänenübergreifende Anfragen sind ein häufiges Problem bei der Webentwicklung, und durch die Verwendung des jQuery-Frameworks können wir dieses Problem leicht lösen und Daten auf sehr effiziente Weise abrufen.

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