données de requête http inter-domaines jquery

jquery est une bibliothèque JavaScript populaire utilisée pour simplifier les opérations DOM, le traitement des événements, les effets d'animation, etc. L'application la plus courante consiste à demander des données back-end via Ajax pour obtenir une expérience sans actualisation de page. Cependant, dans certains cas, nous devons obtenir des données de plusieurs noms de domaine différents, auquel cas des requêtes inter-domaines sont nécessaires. Cet article explique comment utiliser jquery pour effectuer des requêtes http inter-domaines.

1. Qu'est-ce qu'une requête cross-domaine ?

Du côté du navigateur, en raison des restrictions de la politique de même origine du navigateur, il n'est pas autorisé d'accéder aux données sous un autre nom de domaine à partir d'une page d'un nom de domaine, c'est-à-dire la politique de même origine. L'homologie signifie que le protocole, le nom de domaine et le numéro de port doivent être exactement les mêmes. Par exemple, https://www.example.com et https://example.com ont des origines différentes, et http://www.example.com et http://www.example.org ont des origines différentes.

La demande Cross-Origin fait référence au processus de demande de données d'une source (nom de domaine, protocole, numéro de port) vers une autre source. Afin de mettre en œuvre des requêtes inter-domaines, le navigateur doit effectuer une série de vérifications de sécurité pour garantir que les données demandées sont autorisées.

2. Méthodes de requête inter-domaines

Actuellement, les méthodes de requête inter-domaine les plus populaires sont les suivantes :

1. JSONP

JSONP est un moyen d'utiliser le navigateur pour autoriser les requêtes inter-domaines en ajoutant le < ;script> tag Comment accéder aux fichiers JS et comment implémenter une communication interdomaine entre différents domaines. JSONP peut utiliser l'attribut src de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a pour effectuer des requêtes HTTP vers d'autres noms de domaine, et les données renvoyées incluront du code pour exécuter une fonction de rappel, réalisant ainsi une requête de données inter-domaines et un mécanisme de rappel.

2. CORS

CORS est une technologie standard de partage de ressources d'origine croisée qui permet au serveur de répondre aux requêtes de pages Web provenant d'autres sources via de nouveaux en-têtes HTTP. CORS nécessite la prise en charge du navigateur et du serveur Tant que le serveur identifie que la réponse est accessible par d'autres domaines, le navigateur autorisera cette requête inter-domaines.

3. Proxy

La méthode proxy consiste à déployer un serveur proxy sous le même nom de domaine, puis à laisser le serveur proxy demander des données à d'autres noms de domaine, et enfin à renvoyer les résultats de la demande au front-end. Le principe selon lequel cette méthode est réalisable est qu'il n'y a aucune restriction entre domaines sur les interfaces accessibles. Elle convient aux situations où le protocole JSONP n'est pas pris en charge et où CORS ne peut pas répondre aux exigences inter-domaines.

4. PostMessage

PostMessage est une API pour la communication entre documents entre fenêtres. Elle fournit un moyen de communication entre sources, permettant à un document d'envoyer des messages à un autre document, que les deux documents aient ou non la même origine.

5. WebSocket

WebSocket est un nouveau protocole pour HTML5. Il s'agit d'un protocole de communication bidirectionnel basé sur le protocole TCP et peut réaliser une communication inter-domaines. Différent du protocole HTTP, WebSocket créera une connexion TCP pour les données. transmission et établissement. Une mise à niveau du protocole est requise lors de la connexion.

Les méthodes ci-dessus ont chacune leurs propres avantages et inconvénients. Choisissez la méthode de requête inter-domaines appropriée en fonction du scénario spécifique.

3. Utilisez jquery pour les requêtes inter-domaines

L'utilisation de jquery pour les requêtes inter-domaines nécessite principalement l'utilisation de la méthode ajax dans jquery. Cette méthode prend en charge les requêtes asynchrones et les requêtes synchrones, ainsi que deux méthodes de requête courantes : GET et. POST. L'utilisation spécifique est la suivante :

1. Requête JsonP

La demande de données Jsonp doit spécifier que le format de données renvoyé par le serveur est au format jsonp, y compris un paramètre nommé callback, la valeur est le nom de la fonction de rappel et le nom de la fonction de rappel est transmis via jsonp. Ceci est réalisé en utilisant le paramètre de rappel du paramètre src de la balise de script.

$.ajax({

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

});

2. Requête Cors

La requête Cors est implémentée en ajoutant le champ Access-Control-Allow-Origin dans l'en-tête. Dans jquery, lors de l'envoi d'une requête inter-domaine via la méthode ajax, vous pouvez implémenter la requête inter-domaine en définissant le paramètre xhrFields. Parmi eux, le paramètre withCredentials est utilisé pour contrôler si le navigateur contient des informations sur les cookies.

$.ajax({

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

});

IV Résumé

Les requêtes inter-domaines sont une exigence très courante dans le développement front-end. Cet article présente les méthodes de requête inter-domaines courantes et comment utiliser jquery pour. Méthode HTTP inter-domaines pour demander des données. Différentes méthodes de requête inter-domaines ont leurs propres avantages et inconvénients. Choisissez la méthode appropriée en fonction des besoins spécifiques. Lors de la mise en œuvre de requêtes inter-domaines, vous devez prêter attention aux problèmes de sécurité pour éviter les attaques malveillantes.

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!