jquery inter-domaines obtenir des données de demande

Dans le développement Web, nous devons généralement demander des données à un autre nom de domaine pour répondre à certaines exigences commerciales spécifiques. Dans ce cas, des requêtes inter-domaines sont requises. Dans ce processus, la requête get du framework jQuery est une méthode très courante. Cet article explique comment utiliser la méthode get de jQuery pour effectuer des requêtes inter-domaines et obtenir des données.

1. Qu'est-ce qu'une requête cross-domain ? Dans un même navigateur, si le nom de domaine, le port ou le protocole de la ressource demandée est différent du document actuel, on parle de requête cross-domain. Cela est dû à la restriction de la politique de même origine du navigateur, c'est-à-dire que ce n'est que lorsque le protocole, le nom d'hôte et le numéro de port des deux URL sont identiques que les données provenant de la même origine peuvent être transmises. Lors d'une requête inter-domaines, le navigateur déclenchera automatiquement un mécanisme de sécurité pour restreindre les requêtes du nom de domaine actuel vers d'autres noms de domaine.

2. Méthode get de jQuery

jQuery est une bibliothèque JavaScript multi-navigateurs basée sur JavaScript. Il est largement utilisé pour développer des pages dynamiques, des applications JavaScript autonomes et des requêtes asynchrones. Dans jQuery, la méthode get appartient au module ajax et est utilisée pour obtenir des données du serveur via une requête HTTP GET.

Lors de la mise en œuvre d'une requête inter-domaines, nous devons utiliser la méthode get dans jQuery pour envoyer une requête et recevoir des données de réponse. Cette méthode doit transmettre les trois paramètres suivants :

url : l'adresse URL de la ressource demandée ;

1. data : les données envoyées au serveur ;
2. success : la fonction de rappel une fois la requête réussie ; où, la fonction de rappel de réussite est obligatoire, utilisée pour traiter les données renvoyées une fois la demande réussie.
3. 3. Exemple de demande inter-domaines

Maintenant, nous supposons qu'il existe une interface API qui fournit un ensemble de données au format JSON, et nous devons demander cet ensemble de données à un autre nom de domaine. Ce qui suit est un simple format de données JSON :

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

Obtenons ces données au format JSON via la méthode get de jQuery :

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

Ici, nous transmettons l'URL demandée comme premier paramètre à la méthode get. Grâce à cette méthode, nous enverrons une requête Get à l'interface API et obtiendrons les données JSON renvoyées par l'interface une fois la requête réussie. Ces données JSON sont transmises au paramètre data dans la fonction de rappel et nous pouvons traiter les données dans cette fonction.

Cependant, en utilisation réelle, la requête peut échouer avec un message d'erreur. Dans ce cas, nous pouvons utiliser la méthode fail de jQuery pour obtenir le message d'erreur.

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

Dans cet exemple, nous utilisons la méthode fail pour obtenir les informations d'erreur de la requête. Si la requête échoue, la console affichera le message d'erreur « Échec de la demande ». De cette façon, nous pouvons gérer le message d'erreur en conséquence.

4. Conditions préalables aux requêtes inter-domaines

Dans les requêtes inter-domaines, le serveur doit effectuer certains paramètres pour autoriser les requêtes provenant d'autres noms de domaine, sinon le navigateur bloquera la requête et affichera un message d'erreur. Pour résoudre ce problème, nous pouvons ajouter des informations d'en-tête CORS (Cross-Origin Resource Sharing) côté serveur pour autoriser les requêtes provenant d'autres noms de domaine.

Dans l'interface API, nous pouvons ajouter "Access-Control-Allow-Origin" dans l'en-tête de la réponse HTTP pour préciser l'origine de la requête autorisée. Par exemple, en PHP, on peut ajouter le code suivant :

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

Dans cet exemple, le symbole astérisque signifie que les requêtes provenant de n'importe quel nom de domaine sont autorisées. Si vous autorisez uniquement des noms de domaine spécifiques à demander des données, vous pouvez remplacer l'astérisque par le nom de domaine cible. Par exemple, si vous autorisez uniquement example.com à demander des données, vous pouvez le définir comme ceci :

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

Bien sûr, si vous utilisez Node.js, vous pouvez utiliser des frameworks tels qu'Express et Koa pour définir les informations d'en-tête CORS. . Voici un exemple de code Express simple :

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!'));

Dans cet exemple, nous utilisons le framework Express pour créer un service HTTP et ajouter des informations d'en-tête CORS au middleware. Dans la requête get, nous renvoyons un ensemble de données au format JSON au client. Si tout va bien, le client devrait pouvoir obtenir les données avec succès.

5. Résumé

Grâce à l'introduction de cet article, nous avons appris ce que sont les requêtes inter-domaines, comment utiliser la méthode get de jQuery pour effectuer des requêtes inter-domaines et introduit certains paramètres nécessaires sur le serveur. Les requêtes inter-domaines sont un problème courant dans le développement Web, et en utilisant le framework jQuery, nous pouvons facilement résoudre ce problème et obtenir des données de manière très efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!