HOWTO · jQuery
Type de données $.Ajax dans jQuery
Ce tutoriel montre l'utilisation du type de données $.ajax dans jQuery.
Sur cette page
$.ajax utilise l’option dataType pour indiquer le type de réponse que votre code s’attend à recevoir. Cette option détermine la façon dont jQuery traite la réponse une fois reçue. Elle est distincte de contentType, qui décrit le format des données envoyées dans le corps de la requête. Par exemple, une requête peut envoyer du JSON tout en attendant une réponse textuelle : choisissez chaque option en fonction du sens des données qu’elle décrit.
Ce que signifie dataType dans $.ajax
Définissez dataType avec une chaîne telle que "json" ou "html". Cette valeur indique le format de réponse que votre gestionnaire de succès est prêt à utiliser. Ce n’est pas un type MIME : utilisez "json", et non "application/json". Si vous omettez l’option, jQuery peut déduire la façon de traiter la réponse à partir de son type de contenu. Lorsque votre application dépend d’un format précis, indiquer le type attendu rend cette intention explicite.
Le serveur doit tout de même renvoyer un contenu conforme au format demandé. Définir dataType: "json" ne transforme pas un texte arbitraire en JSON valide. De même, contentType ne détermine pas comment la réponse est analysée.
Définir dataType dans une requête $.ajax simple
Placez l’option dans l’objet de configuration transmis à $.ajax. Remplacez l’URL d’exemple par un point de terminaison de votre application. Cet exemple JavaScript autonome illustre un objet de configuration et affiche le type de réponse attendu ; il n’appelle pas $.ajax et n’envoie aucune requête réseau.
Exécutez cet exemple :
Le code et les libellés ou sorties affichés dans cette section restent en anglais.
const request = {
url: "/api/employees",
method: "GET",
dataType: "json"
};
console.log(`${request.method} ${request.url}: expecting ${request.dataType}`);
Sortie :
GET /api/employees: expecting json
Dans une application qui charge jQuery, transmettez ces paramètres à $.ajax, puis traitez la réponse analysée dans success ou dans un rappel de promesse. Pour une requête qui envoie un corps, définissez contentType afin d’en décrire le format et utilisez data pour sa valeur. N’ajoutez pas de type de contenu pour le corps à une requête GET sans corps, sauf si vous avez une raison de le faire.
Choisir un type de réponse
Choisissez la valeur en fonction de la réponse que votre application doit traiter :
"xml"convient à un document XML que votre code doit examiner ou traiter."html"convient à un fragment ou à un document HTML que votre code utilisera comme balisage. Considérez le balisage reçu comme non fiable, sauf si votre application dispose d’une méthode de traitement sûre."script"convient à une réponse destinée à être évaluée comme du JavaScript. Utilisez cette option uniquement avec une source fiable et lorsque l’évaluation d’un script distant est appropriée."json"convient aux données structurées que votre code utilisera comme valeur JavaScript, par exemple un objet ou un tableau."jsonp"convient à un point de terminaison JSONP qui renvoie une réponse enveloppée dans un rappel. Il s’agit d’un mécanisme de réponse distinct, et non d’une méthode générale pour rendre n’importe quel point de terminaison JSON accessible entre domaines."text"convient à une chaîne simple que votre code traitera lui-même.
L’option doit correspondre à la réponse réelle du point de terminaison. Si le format de la réponse ou le comportement du serveur diffère de ce que vous aviez prévu, examinez la réponse et la requête au lieu de changer l’option au hasard.
Exemples pour chaque type de réponse
Chaque ligne ci-dessous illustre un objet de configuration $.ajax ; il ne s’agit pas d’une requête exécutée. Les chemins des points de terminaison sont des exemples : remplacez-les par une URL qui renvoie le format indiqué et ajoutez le traitement de succès dont votre application a besoin.
- XML :
$.ajax({ url: "/placeholder.xml", method: "GET", dataType: "xml" })attend une réponse XML que votre code pourra examiner ou traiter. - HTML :
$.ajax({ url: "/placeholder.html", method: "GET", dataType: "html" })attend du balisage ; adoptez une méthode sûre pour traiter le HTML reçu. - Script :
$.ajax({ url: "/trusted-script.js", method: "GET", dataType: "script" })convient à du JavaScript destiné à être évalué. Utilisez cette option uniquement avec une source fiable et lorsque l’évaluation d’un script distant est appropriée. - JSON :
$.ajax({ url: "/api/employees", method: "GET", dataType: "json" })attend des données structurées, comme un objet ou un tableau, que le gestionnaire de succès pourra utiliser. - JSONP :
$.ajax({ url: "/jsonp-capable-endpoint", method: "GET", dataType: "jsonp" })nécessite un serveur compatible avec JSONP qui renvoie la réponse enveloppée dans le rappel attendu par le client. - Texte :
$.ajax({ url: "/status", method: "GET", dataType: "text" })attend une chaîne simple que votre code pourra traiter ou afficher.
Ces exemples montrent comment associer chaque option à un point de terminaison adapté. Ils ne garantissent ni que ces points de terminaison existent ni qu’une requête a été envoyée.
Analyse des réponses, mise en cache et comportement entre domaines
L’analyse des réponses, le comportement de la mise en cache et le traitement des requêtes entre domaines peuvent dépendre de la version de jQuery et du contexte de la requête. Les exemples ne garantissent aucun résultat particulier pour un JSON mal formé ou vide, la mise en cache des scripts, ni la conversion entre JSON et JSONP. Consultez la documentation correspondant à la version utilisée par votre application et vérifiez que le point de terminaison prend en charge le type de réponse choisi.
JSONP n’est pas interchangeable avec le JSON ordinaire : il nécessite un point de terminaison conçu pour renvoyer une réponse enveloppée dans un rappel. Une requête interorigine dépend également du comportement du navigateur et du serveur ; choisir "json" ne donne pas à lui seul accès aux ressources d’une autre origine. En cas d’échec, examinez le corps de la réponse, ses en-têtes, la console du navigateur et la configuration du serveur, puis comparez-les au type attendu par votre code.