Dernière mise à jour : 11/1/2015

Les applications Web modernes sont généralement divisées en deux parties : client et serveur. Le client est une page Web avec du code JavaScript. Les technologies serveur incluent PHP, Ruby, Node.js, ASP.NET, etc., qui reçoivent une requête du client, la traitent et renvoient le résultat du traitement.

Ajax introduit une technologie permettant d'envoyer des requêtes à un serveur à partir du code JavaScript côté client sans recharger la page. Le terme lui-même signifie Asynchronous JavaScript And XML. Autrement dit, AJAX supposait initialement une interaction asynchrone entre le client et le serveur via des données au format XML. Bien que désormais XML ait largement remplacé le format JSON. Dans tous les cas, AJAX a révolutionné l'environnement Web, permettant la création d'applications Web dynamiques et réactives.

Étant donné qu'Ajax implique une interaction entre un client et un serveur, un serveur Web local est requis pour fonctionner avec Ajax et ce chapitre en particulier. Il peut s'agir de n'importe quel serveur Web : Apache, IIS, etc.

Objet XMLHttpRequest

Il existe différentes méthodes utilisées pour créer des applications utilisant Ajax. Mais la manière la plus courante consiste à utiliser l'objet XMLHttpRequest :

Requête Var = new XMLHttpRequest();

Une fois l'objet XMLHttpRequest créé, vous pouvez envoyer des requêtes au serveur. Mais vous devez d’abord appeler la méthode open() pour l’initialisation :

Request.open("GET", "http://localhost/hello.txt", false);

La méthode open() prend trois paramètres : le type de requête (GET, POST, HEAD, PUT), l'adresse de la requête et un troisième paramètre facultatif - une valeur booléenne true ou false indiquant si la requête sera effectuée de manière asynchrone. C'est-à-dire que dans ce cas, la requête sera de type GET, elle sera envoyée à l'adresse " http://localhost/hello.txt en mode synchrone, puisque la valeur est fausse (pour le mode asynchrone, la valeur est vraie).

Les modes synchrone et asynchrone diffèrent en ce sens qu'une requête en mode synchrone jusqu'à ce que la requête soit terminée, le reste du code javascript ne peut pas être exécuté. Par défaut, si le troisième paramètre n'est pas utilisé, la requête est envoyée de manière asynchrone, ce qui permet d'exécuter d'autres codes javascript en parallèle de la requête. Et dans la plupart des cas, le mode asynchrone est généralement utilisé.

De plus, la méthode open() peut prendre deux paramètres supplémentaires : le login et le mot de passe de l'utilisateur, si une authentification est requise pour terminer la demande.

Request.open("GET", "http://localhost/home.php", true, "login", "password");

Après avoir initialisé la requête à l'aide de la méthode open(), vous devez envoyer la requête à l'aide de la méthode send() :

Demande envoyée();

Propriétés XMLHttpRequest

L'objet XMLHttpRequest possède un certain nombre de propriétés qui permettent de contrôler l'exécution de la requête :

status : Contient le code d’état de la réponse HTTP provenant du serveur. A l'aide du code d'état, vous pouvez juger du succès de la requête ou des erreurs qui pourraient survenir lors de son exécution. Par exemple, un code d'état de 200 indique que la demande a abouti. Le code 403 indique qu'une autorisation est requise pour compléter la demande, le code 404 indique que la ressource n'a pas été trouvée, et ainsi de suite.

statusText : renvoie le texte d'état de la réponse, par exemple "200 OK"

ResponseType : renvoie le type de réponse. Il existe les types suivants :

• réponse : renvoie la réponse du serveur

  ResponseText : renvoie le texte de la réponse du serveur

  ResponseXML : renvoie XML si la réponse du serveur est au format XML

Par exemple, faisons une requête vers un fichier texte situé sur un serveur Web local. Pour effectuer des requêtes Ajax, vous aurez besoin d'un serveur Web local en cours d'exécution, sur lequel se trouvera un fichier hello.txt, qui contiendra une ligne : « Hello world ».

Code de page Web (appelons-le test.html) sera la suivante :

var request = new XMLHttpRequest(); request.open("GET", "http://localhost:8080/hello.txt", false); demande envoyée(); var status = demande.statut ; if(status==200) document.write("Texte de la réponse : " + request.responseText) else if(status==404) document.write("Ressource introuvable") else document.write(request.statusText)

Et après le chargement de la page, une requête ajax vers la ressource sera exécutée http://localhost:8080/hello.txt. Mais il est important de noter qu’obtenir le statut immédiatement après avoir appelé la méthode request.send() ne fonctionnera que pour une requête synchrone.

Requêtes asynchrones

Bien que les requêtes synchrones fonctionnent bien et puissent être utilisées, il est néanmoins recommandé de les éviter. Étant donné que la requête peut souvent prendre beaucoup de temps, cela peut bloquer l'exécution du reste du code et fonctionner avec la page HTML jusqu'à ce que la requête soit terminée. Il est donc recommandé d’utiliser majoritairement des requêtes asynchrones.

Travailler avec des requêtes asynchrones est un peu plus complexe qu'avec des requêtes synchrones, car nous devons toujours gérer l'événement readystatechange de l'objet XMLHttpRequest.

Lors d'une requête asynchrone, l'objet XMLHttpRequest utilise la propriété readyState pour stocker l'état de la requête. Le statut de la demande est un nombre :

0 : L'objet XMLHttpRequest a été créé, mais la méthode open() n'a pas encore été appelée pour initialiser l'objet

1 : La méthode open() a été appelée, mais la requête n'a pas encore été envoyée par la méthode send()

3 : réponse reçue du serveur

4 : La requête est complètement terminée (même si un code d'erreur tel que 404 est reçu)

L'événement readystatechange se produit chaque fois que la valeur de la propriété readyState change. Par exemple, exécutons une requête asynchrone :

var request = new XMLHttpRequest(); function reqReadyStateChange() ( if (request.readyState == 4) ( var status = request.status; if (status == 200) ( document.write(request.responseText); ) else ( document.write("Réponse du serveur " + request.statusText); ) ) ) request.open("GET", "http://localhost:8080/hello.txt"); request.onreadystatechange = reqReadyStateChange ; demande envoyée();

En plus de gérer l'événement readystatechange pour obtenir la réponse du serveur, vous pouvez également gérer l'événement de chargement, qui se produit une fois la requête terminée. Son utilisation est similaire :

Requête Var = new XMLHttpRequest(); function réponseLoad() ( if (request.readyState == 4) ( var status = request.status; if (status == 200) ( document.write(request.responseText); ) else ( document.write("Réponse du serveur " + request.statusText); ) ) ) request.open("GET", "http://localhost:8080/hello.txt"); request.onload = réponseLoad ; demande envoyée();

Cet article contient des exemples du code que j'utilise pour envoyer des requêtes ajax au serveur à l'aide de jQuery. Leurs tâches peuvent être différentes, donc différentes fonctions peuvent être utilisées pour eux, ce qui simplifie l'écriture du code.

Demander des données HTML à l'aide de la fonction Load

Il s'agit de la requête ajax la plus simple via jQuery avec réception de données HTML et insertion dans un élément dom avec id="result" (le contenu de l'élément est remplacé) :

$("#result").load("");

Un cas d'utilisation plus avancé pour le chargement :

$("#result").load("", (par1:val1, par2:val2, ...), function(response, status, xhr) ( if (status == "succès") ( alert("Terminé "); ) else ( alert("Erreur : " + xhr.status + " " + xhr.statusText); ) ));

Dans cet exemple, les paramètres sont également transmis au serveur, et après avoir reçu la réponse, il est vérifié s'il y a eu une erreur (par exemple, aucune réponse n'a été reçue du serveur) et diverses actions sont effectuées.

Requêtes Ajax avec fonctions GET et POST

Ces fonctions envoient une requête Ajax en utilisant les méthodes http get et post. Permettez-moi de vous donner quelques exemples de leur utilisation.

$.get("", // adresse d'envoi de la requête (par1:val1, par2:val2, ...), // transmission de certaines données avec une fonction de requête(data) ( // certaines actions avec celles reçues du données de données du serveur ));

Le transfert de données n'est pas requis, ni l'exécution d'aucune action après avoir reçu une réponse du serveur, c'est-à-dire dans ce cas, les lignes 3 et 4 à 6 peuvent être supprimées si nécessaire et ainsi raccourcir davantage le code.

Le type de données reçues du serveur peut être spécifié en ajoutant dataType (voir ci-dessous) - par défaut, il est déterminé automatiquement.

L'utilisation de post est similaire, mais dans l'exemple suivant, j'utilise un appel de fonction après avoir reçu une réponse du serveur.

$.post("", (par1:val1, par2:val2, ...), onSuccess); function onSuccess(data) ( // quelques actions avec les données reçues des données du serveur)

En fait, les fonctions get et post sont des versions abrégées de la fonction ajax, dont je parlerai ci-dessous.

Récupération de données JSON à l'aide de getJSON

getJSON est une version raccourcie d'une requête ajax utilisant la méthode GET et recevant des données sous forme de json. La méthode est pratique, par exemple, pour obtenir une sorte de tableau de données et ensuite travailler avec.

$.getJSON("", (par1:val1, par2:val2, ...)).success(function(data) ( // faire quelque chose avec les données, par exemple, les parcourir en boucle et imprimer : for (var i =0; i 10, "text" => "ligne de test 1"); $arr = array("id" => 20, "text" => "ligne de test 2"); $arr = array("id " => 30, "text" => "ligne de test 3"); echo json_encode($arr);

De la même manière, vous pouvez transférer des objets stdClass depuis le serveur en les convertissant en chaîne json.

Une simple requête ajax via jQuery utilisant la fonction AJAX

Je vais maintenant donner un exemple d'une simple requête get utilisant la fonction ajax et recevant des données HTML.

$.ajax(( url: "", dataType: "html", success: function(data) ( // quelques actions avec les données reçues data ) ));

La requête au serveur est effectuée à l'aide de la méthode get, car le paramètre responsable du type de requête ; le type est GET par défaut.

Un exemple plus complexe de requête ajax utilisant jQuery

Un exemple d'exécution d'une requête à l'aide de la fonction ajax avec transmission de données à l'aide de la méthode post et du traitement des événements. Ci-dessous, je décrirai les paramètres supplémentaires qui sont le plus souvent utilisés.

$.ajax(( url: "", type: "post", data: "", // peut être une chaîne, ou vous pouvez, par exemple, comme ceci : $("input, input:checked, input:checked , select, textarea" ) dataType: "json", beforeSend: function() ( $("#sendajax").button("loading"); ), complete: function() ( $("#sendajax").button ("reset") ; ), succès : function(json) ( // quelques actions avec les données reçues ), erreur : function(xhr, ajaxOptions, throwError) ( alert(thrownError + "\r\n" + xhr.statusText + "\r \n" + xhr.responseText); ) ));

Bouton de soumission:

Envoyer

Dans l'exemple ci-dessus, lorsque vous cliquez sur le bouton, l'état du bouton change d'abord (le texte dessus devient "Envoi..." et il devient inactif), ce qui se fait à l'aide du paramètre beforeSend. Ensuite, une demande est envoyée avec les données nécessaires transférées. Après réception d'une réponse du serveur, l'état du bouton revient à son état précédent (le texte devient « Soumettre » et devient actif). La réponse est reçue sous forme de données json.

Je décrirai brièvement les paramètres d'envoi d'une requête ajax, qui peuvent être le plus souvent utiles :

URL	Adresse d'envoi de la demande Ajax
taper	Comment envoyer une requête GET ou POST
données	Données envoyées au serveur. Il peut y avoir une chaîne avec des paramètres et leurs valeurs au format par1=val1&par2=val2&..., un objet jQuery, par exemple $("input"), ou d'autres données.
Type de données	Le type de données reçues du serveur. Peut être HTML, JSON, texte, script et XML.
cache	Mise en cache de la requête par le navigateur (faux - ne pas mettre en cache).
asynchrone	Exécution asynchrone de la requête, c'est-à-dire le programme continue de s'exécuter sans attendre une réponse du serveur. Si vous spécifiez false, la demande sera exécutée de manière synchrone et la page ne répondra à rien jusqu'à ce qu'une réponse soit reçue du serveur.
données de processus	Conversion des données envoyées au format URL. Si vous souhaitez que les données ne soient pas converties, définissez-la sur false. Par exemple, lors de l'envoi d'une image au serveur ou de données XML.
Type de contenu	Type de données transmises, par défaut "application/x-www-form-urlencoded; charset=UTF-8". Si vous spécifiez false, alors le type ne sera pas transmis dans l'en-tête, ce qui peut être nécessaire, par exemple, lors de l'envoi d'une image au serveur.
avantEnvoyer	Une fonction exécutée avant d'envoyer une requête ajax.
complet	Une fonction exécutée après avoir reçu une réponse du serveur (n'importe quelle réponse, réussie ou non).
succès	Fonction exécutée lorsque la requête aboutit.
erreur	Fonction à exécuter en cas d'erreur.

Ci-dessous, je vais donner quelques exemples supplémentaires d'utilisation des requêtes ajax.

Soumettre un formulaire avec toutes les données à l'aide d'une requête ajax via jQuery

Exemple de code de formulaire HTML :

Votre nom:

Code Javascript :

$("#myform").submit(function(e) ( e.preventDefault(); $.ajax(( type: $(this).attr("method"), url: "", data: $(this ).serialize(), async : false, dataType : "html", succès : function(result)( alert("Formulaire soumis"); ) )); ));

Pour empêcher la page de se recharger lorsque vous cliquez sur le bouton "Soumettre", nous remplaçons d'abord les actions par défaut du navigateur en utilisant e.preventDefaults() .

Dans le paramètre data, nous transmettons tous les champs du formulaire en utilisant $(this).serialize() - cette fonction convertit toutes les entrées et les sélectionne en une chaîne adaptée à l'envoi au serveur.

De plus, le paramètre async: false est utilisé ici afin que jusqu'à ce que le formulaire soit envoyé au serveur, rien d'autre ne puisse être cliqué ou fait.

Envoi d'une image ou d'un fichier avec une requête ajax via jQuery

Le problème de l'envoi d'un fichier ou d'une image au serveur sans recharger la page se pose assez souvent. Dans cet exemple, je vais examiner 2 fonctionnalités à la fois : sélectionner un fichier en cliquant sur un bouton, qui peut être conçu de n'importe quelle manière, et afficher la progression lors du transfert d'un fichier vers le serveur à l'aide d'une requête Ajax.

Le code html ressemblera à ceci :

Télécharger une image

#addfile ( position : relative ; débordement : caché ; largeur : 180px ; hauteur : 34px ; ) #load_file ( position : absolue ; haut : 0 ; gauche : 0 ; largeur : 180px ; hauteur : 34px ; taille de police : 0px ; opacité : 0; filtre : alpha(opacité:0); ) #load_file:hover ( curseur : pointeur; )

L'essence de l'idée est qu'une entrée standard pour sélectionner un fichier est affichée en haut du bouton, mais elle est complètement transparente et a les mêmes dimensions que le bouton. De cette façon, l'utilisateur voit un bouton, mais lorsqu'il le survole, il survole en réalité une entrée. En conséquence, lorsqu'il clique sur le bouton, l'entrée de sélection de fichier est effectivement enfoncée. Pour éviter que le curseur ne clignote après la sélection d'un fichier, la taille de la police est définie sur 0px.

Maintenant le code javascript pour envoyer le fichier au serveur affichant la progression :

$(function() ( $("#load_file").on("change", loadfile); )); fonction loadfile() ( $("#addfile span").html("0% chargé"); files = $("#load_file").files; var form = new FormData(); form.append("upload" , fichiers); $.ajax(( url : "", type : "POST", données : formulaire, cache : false, processData : false, contentType : false, xhr : function() ( var myXhr = $.ajaxSettings.xhr (); si (myXhr.upload) ( myXhr.upload.addEventListener("progress",ShowProgress, false); ) return myXhr; ), complétez : function(data)( $("#addfile span").html(" Charger l'image"); $("#load_file").val(""); ), succès : fonction(message)( alert(message); ), erreur : fonction(jqXHR, textStatus, errorThrown) ( alert(textStatus+" "+errorThrown); ) )); ) function ShowProgress(e) ( if(e.lengthComputable)( $("#addfile span").html("Loaded "+Math.round(100*e.loaded/e. total)+"%"); ) )

Lors du téléchargement d'un fichier sur le serveur, le bouton indiquera combien de % ont déjà été transférés vers le serveur. Une fois le chargement terminé, le nom du bouton est renvoyé tel qu'il était et la valeur de l'entrée du fichier est définie sur vide afin qu'un nouveau fichier puisse être à nouveau sélectionné.

Exemple de partie serveur en PHP (à la demande d'Evgeniy) :

$message = ""; if (empty($_FILES["upload"]["name"]) || $_FILES["upload"] == "none") ( $message = "Vous n'avez pas sélectionné de fichier"; ) else if ($ _FILES[ "upload"]["size"] == 0 || $_FILES["upload"]["size"] > 9437184) ( $message = "La taille du fichier ne répond pas aux standards (maximum 9 Mo)" ; ) sinon if ( ($_FILES["upload"]["type"] != "image/jpeg") && ($_FILES["upload"]["type"] != "image/pjpeg") && ( $_FILES["upload "]["type"] != "image/gif") && ($_FILES["upload"]["type"] != "image/png")) ( $message = "Uniquement JPG , les images GIF peuvent être téléchargées et PNG."; ) else if (!is_uploaded_file($_FILES["upload"]["tmp_name"])) ( $message = "Quelque chose s'est mal passé. Essayez de télécharger à nouveau le fichier." ; ) else ( $ ftype = $_FILES["upload"]["type"]; $fname = "newname_image.".($ftype == "image/gif" ? "gif" : ($ftype == "image /png" ? " png" : "jpg")); if (move_uploaded_file($_FILES["upload"]["tmp_name"], $_SERVER["DOCUMENT_ROOT"].."/files/".$fname)) ( $message = "Image chargée avec succès."; ) else ( $message = "Quelque chose s'est mal passé. Veuillez réessayer de télécharger le fichier."; ) ) exit($message);

Les informations sur l'image téléchargée seront contenues dans $_FILES["upload"] , car Le script a ajouté le fichier comme ceci : form.append("upload", files); Il suffit donc au programme PHP de vérifier que le fichier correspond aux paramètres attendus, de déplacer le fichier dans le dossier souhaité (dans l'exemple, le dossier files) sous le nom souhaité (dans l'exemple, newname_image) et renvoyer une réponse au navigateur, qui dans mon exemple est simplement affichée à l'utilisateur avec la commande alert(message) ;

Il existe de nombreuses situations dans lesquelles il est possible et même nécessaire d'utiliser des requêtes Ajax et il n'est pas possible de toutes les aborder ici. Cependant, si vous avez des suggestions sur d'autres exemples qu'il serait judicieux d'ajouter ici, veuillez les écrire dans les commentaires.

Je suggère qu'au tout début de l'article, nous nous souvenions que la technologie AJAX signifie Asynchronous JavaScript and XML. C’est la principale caractéristique de la technologie. Dans le cas d'un transfert de données asynchrone, le navigateur ne recharge pas la page et ne se fige pas en attendant une réponse !

Il est facile d'activer le transfert asynchrone - utilisez simplement le paramètre (généralement le troisième dans l'ordre) de la méthode open(), où vous devez spécifier true. Par conséquent, si vous le définissez sur false, le navigateur se bloquera lors de la réception d'une réponse du serveur, qu'il s'agisse d'un like, d'une note ou autre. Imaginez ce qui s'est passé avant la création du transfert de données asynchrone ? Le serveur est tombé en panne - la page s'est figée.

Activez le transfert de données asynchrone. Paramètres ouverts (méthode de transfert, action sur fichier, asynchrone ou synchrone).

Code JS (Ajax)

Xmlhttp.open("GET","ajax.php",true);
Désormais, la demande envoyée sera traitée indépendamment des autres scripts de la page et ne sera traitée qu'à réception. Vous avez reçu une réponse du serveur après 20 secondes ? Eh bien, nous l’avons traité et ne raccrochez pas.

Envoi asynchrone Définissez le paramètre true sur open(). Que faire lorsque la réponse est prête, écrivez dans l'événement onreadystatechange (par exemple, affichez dans cet objet sur la page) :

Code JS (Ajax)

Xmlhttp.onreadystatechange=fonction()
{
si (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax.php",true);
xmlhttp.send();

Transmission synchrone Attention ! Je décris la transmission synchrone uniquement par décence. Dans notre cas (en considérant Ajax), c’est comme conduire une charrette vers le 21e siècle. Cependant, pour ce faire, nous insérons false dans la méthode open() :

Xmlhttp.open("GET","ajax.php",false);
Si vous souhaitez toujours utiliser un modèle similaire, essayez de le faire uniquement pour de petites demandes. Dans le cas de requêtes volumineuses, le navigateur se bloque et l'utilisateur prend peur et quitte la page ou ferme l'application - selon l'endroit où vous l'utilisez.

Code JS (Ajax)

Xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Merci pour votre attention!

Enfin, passons à la leçon suivante avec un exemple d'Ajax et un fichier TXT !

Fait une requête au serveur sans recharger la page. Il s'agit d'une méthode de bas niveau avec de nombreux paramètres. Il sous-tend le fonctionnement de toutes les autres méthodes ajax. Possède deux options d'utilisation :

url – adresse de demande.
paramètres - dans ce paramètre, vous pouvez spécifier les paramètres pour cette demande. Spécifié à l'aide d'un objet au format (name:value, name:value...) . Aucun des paramètres n'est requis. Vous pouvez définir les paramètres par défaut à l'aide de la méthode $.ajaxSetup().

Liste des paramètres

↓ nom :type (valeur par défaut)

Lorsqu'une requête est effectuée, les en-têtes indiquent les types de contenu autorisés attendus du serveur. Les valeurs de ces types seront extraites du paramètre accepts.

Par défaut, toutes les requêtes sans rechargement de page se produisent de manière asynchrone (c'est-à-dire qu'après l'envoi d'une requête au serveur, la page ne s'arrête pas de fonctionner en attendant une réponse). Si vous devez exécuter la requête de manière synchrone, définissez le paramètre sur false . Les requêtes inter-domaines et « jsonp » ne peuvent pas être exécutées en mode synchrone.

Veuillez noter que l'exécution de requêtes en mode synchrone peut entraîner le blocage de la page jusqu'à ce que la requête soit entièrement complétée.

Ce champ contient une fonction qui sera appelée immédiatement avant d'envoyer une requête ajax au serveur. Cette fonction peut être utile pour modifier l'objet jqXHR (dans les versions antérieures de la bibliothèque (jusqu'à 1.5), XMLHttpRequest est utilisé à la place de jqXHR). Par exemple, vous pouvez modifier/spécifier les en-têtes nécessaires, etc. L'objet jqXHR sera transmis à la fonction comme premier argument. Le deuxième argument concerne les paramètres de la requête.

Dans ce champ, vous pouvez spécifier des en-têtes de requête supplémentaires. Ces modifications seront saisies avant l’appel de beforeSend, où les modifications finales de l’en-tête pourront être apportées.

Lorsque ce paramètre est défini sur true , la requête sera exécutée avec le statut « réussie » uniquement si la réponse du serveur diffère de la réponse précédente. jQuery vérifie ce fait en examinant l'en-tête Last-Modified. Depuis jQuery-1.4, en plus de Last-Modified, "etag" est également vérifié (les deux sont fournis par le serveur et sont nécessaires pour informer le navigateur que les données demandées au serveur n'ont pas été modifiées par rapport à la requête précédente) .

Vous permet de définir l'état source d'une page sur local (comme s'il s'agissait du protocole de fichier), même si jQuery l'a reconnu autrement. La bibliothèque décide que la page s'exécute localement dans le cas des protocoles suivants : fichier, extension * et widget.

Il est recommandé de définir la valeur du paramètre estLocal globalement - en utilisant la fonction $.ajaxSetup(), et non dans les paramètres des requêtes ajax individuelles.

Définit le nom du paramètre qui est ajouté à l'url lors d'une requête jsonp (par défaut, "callback" est utilisé - "http://siteName.ru?callback=...").

Depuis jQuery-1.5, définir ce paramètre sur false empêchera l'ajout d'un paramètre supplémentaire à l'URL. Dans ce cas, vous devez définir explicitement la valeur de la propriété jsonpCallback. Par exemple : (jsonp:false, jsonpCallback:"callbackName") .

Définit le nom de la fonction qui sera appelée lorsque le serveur répondra à une requête jsonp. Par défaut, jQuery génère un nom personnalisé pour cette fonction, ce qui constitue une option préférable pour simplifier le travail de la bibliothèque. L'une des raisons pour lesquelles vous devez spécifier votre propre fonction de traitement des requêtes jsonp est d'améliorer la mise en cache des requêtes GET.

Depuis jQuery-1.5, vous pouvez spécifier une fonction dans ce paramètre afin de gérer vous-même la réponse du serveur. Dans ce cas, la fonction spécifiée doit renvoyer les données reçues du serveur (dans la fonction spécifiée, elles seront disponibles dans le premier paramètre).

Par défaut, toutes les données transmises au serveur sont pré-converties en une chaîne (format url : fName1=value1&fName2=value2&...) correspondant à "application/x-www-form-urlencoded". Si vous devez envoyer des données qui ne peuvent pas être soumises à un tel traitement (par exemple, un document DOM), vous devez alors désactiver l'option processData.

Ce paramètre est utilisé pour les requêtes ajax inter-domaines de type GET, le dataType peut être soit "jsonp" soit "script". Définit l'encodage dans lequel la requête inter-domaines sera exécutée. Ceci est nécessaire si un serveur d'un domaine étranger utilise un encodage différent de celui du serveur de son domaine natif.

(Ce paramètre a été introduit dans jQuery-1.5) un ensemble de paires dans lesquelles les codes d'exécution de requêtes sont associés à des fonctions qui seront appelées. Par exemple, pour le code 404 (les pages n'existent pas), vous pouvez afficher un message à l'écran :

$.ajax (( statusCode: ( 404 : function () ( alert ( "Page non trouvée" ) ; ) ) ) ) ;

Les fonctions qui répondent aux codes de réussite des requêtes recevront les mêmes arguments que les fonctions de gestionnaire de requêtes réussies (spécifiées dans le paramètre success), et les fonctions qui répondent aux codes d'erreur seront les mêmes que celles des fonctions d'erreur.

Une fonction qui sera appelée si la requête adressée au serveur se termine avec succès. Trois paramètres lui seront transmis : les données envoyées par le serveur et déjà prétraitées (ce qui est différent selon les différents types de données). Le deuxième paramètre est une chaîne avec l'état d'exécution. Le troisième paramètre contient l'objet jqXHR (dans les versions antérieures de la bibliothèque (jusqu'à 1.5), XMLHttpRequest est utilisé à la place de jqXHR). Depuis jQuery-1.5, au lieu d'une seule fonction, ce paramètre peut accepter un tableau de fonctions.

Temps d'attente d'une réponse du serveur. Défini en millisecondes. Si ce délai est dépassé, la requête se terminera par une erreur et un événement d'erreur se produira (voir description ci-dessus), qui aura le statut "timeout".

Le temps est compté à partir du moment où la fonction $.ajax est appelée. Il peut arriver que plusieurs autres requêtes soient en cours d'exécution à ce moment-là et que le navigateur retarde l'exécution de la requête en cours. Dans ce cas temps mort peut se terminer, même si en fait, la demande n'a même pas encore été lancée.

Dans jQuery-1.4 et versions antérieures, lorsque l'objet XMLHttpRequest expire, il passe dans un état d'erreur et l'accès à ses champs peut lever une exception. Dans Firefox 3.0+, les requêtes de script et JSONP ne seront pas abandonnées si elles expirent. Ils seront complétés même après l'expiration de ce délai.

Une fonction qui fournira un objet XMLHttpRequest. Par défaut, pour les navigateurs IE, cet objet est ActiveXObject et dans les autres cas, XMLHttpRequest. Avec cette option, vous pouvez implémenter votre propre version de cet objet.

(Ce paramètre a été introduit dans jQuery-1.5.1) Un ensemble de paires (nom:valeur) pour modifier/ajouter les valeurs des champs correspondants de l'objet XMLHttpRequest. Par exemple, vous pouvez définir sa propriété withCredentials sur true lors de l'exécution d'une requête inter-domaines :

$.ajax (( url : a_cross_domain_url, xhrFields : ( withCredentials : true ) ) ) ;

Dans jQuery-1.5, la propriété withCredentials n'est pas prise en charge par XMLHttpRequest natif et sera ignorée dans une requête inter-domaine. Cela a été corrigé dans toutes les versions ultérieures de la bibliothèque.

Gestionnaires d'événements

Les paramètres beforeSend, error, dataFilter, success et complete (leur description se trouve dans la section précédente) vous permettent de définir des gestionnaires d'événements qui se produisent à certains moments de l'exécution de chaque requête ajax.

avantEnvoyer se produit immédiatement avant que la demande ne soit envoyée au serveur. erreur se produit lorsque la demande échoue. filtre de données se produit lorsque les données arrivent du serveur. Permet de traiter les données « brutes » envoyées par le serveur. succès se produit lorsque la demande se termine avec succès. complet se produit chaque fois qu’une demande se termine.

Exemple d'utilisation simple. Nous afficherons un message lorsque la demande sera complétée avec succès :

$.ajax (( url: "ajax/test.html" , success: function () ( alert ("Le chargement a été effectué." ) ; ) ) ) ;

À partir de jQuery-1.5, la méthode $.ajax() renvoie un objet jqXHR qui, entre autres, implémente l'interface différée, qui vous permet de spécifier des gestionnaires d'exécution supplémentaires. En plus des méthodes standard .done(), .fail() et .then() pour l'objet différé, avec lesquelles vous pouvez installer des gestionnaires, jqXHR implémente .success(), .error() et .complete() . Ceci est fait pour respecter les noms habituels des méthodes par lesquelles les gestionnaires d'exécution des requêtes ajax sont installés. Cependant, à partir de jQuery-1.8, ces trois méthodes deviendront obsolètes.

Certains types de requêtes, tels que les requêtes jsonp ou GET inter-domaines, ne prennent pas en charge l'utilisation d'objets XMLHttpRequest. Dans ce cas, les XMLHttpRequest et textStatus transmis aux gestionnaires contiendront la valeur undefined .

À l'intérieur des gestionnaires, la variable this contiendra la valeur du paramètre contexte. Au cas où il n’aurait pas été défini, celui-ci contiendra l’objet de paramètres.

Paramètre dataType

La fonction $.ajax() apprend le type de données envoyées par le serveur depuis le serveur lui-même (via MIME). De plus, il est possible d'indiquer (clarifier) ​​personnellement comment ces données doivent être interprétées. Cela se fait à l'aide du paramètre dataType. Valeurs possibles pour ce paramètre :

"xml"— le document XML résultant sera disponible sous forme de texte. Vous pouvez travailler avec lui à l'aide des outils jQuery standard (ainsi qu'avec un document HTML). "html"— le code HTML résultant sera disponible sous forme de texte. S'il contient des scripts dans des balises, alors ils ne seront automatiquement exécutés que lorsque le texte HTML sera placé dans le DOM. "scénario"— les données reçues seront exécutées en javascript. Les variables qui contiennent généralement la réponse du serveur contiendront un objet jqXHR. "json", "jsonp"— les données reçues seront pré-converties en un objet javascript. Si l'analyse échoue (ce qui peut arriver si le json contient des erreurs), une exception d'erreur d'analyse de fichier sera levée. Si le serveur auquel vous accédez se trouve sur un domaine différent, alors jsonp doit être utilisé à la place de json. Vous pouvez en savoir plus sur json et jsonp sur Wikipedia. "texte"— les données reçues seront disponibles en texte brut, sans traitement préalable.

Note 1: Lorsqu'une requête est envoyée à un domaine tiers (ce qui n'est possible qu'avec dataType égal à jsonp ou script), les gestionnaires d'erreurs et les événements globaux ne se déclencheront pas.

Note 2: Le type de données spécifié dans dataType ne doit pas entrer en conflit avec les informations MIME fournies par le serveur. Par exemple, les données XML doivent être représentées par le serveur sous la forme text/xml ou application/xml . Si cela échoue, jquery tentera de convertir les données reçues au type spécifié (plus d'informations à ce sujet dans la section Convertisseurs).

Envoi de données au serveur

Par défaut, une requête au serveur est effectuée à l'aide de la méthode HTTP GET. Si vous devez effectuer une demande à l'aide de la méthode POST, vous devez spécifier la valeur appropriée dans le paramètre de type. Les données envoyées à l'aide de la méthode POST seront converties en UTF-8 si elles sont dans un codage différent, comme l'exige la norme W3C XMLHTTPRequest.

Le paramètre data peut être spécifié soit sous forme de chaîne au format clé1=valeur1&clé2=valeur2 (format de transfert de données dans l'URL), soit sous forme d'objet avec un ensemble de paires (nom:valeur) - (clé1 : "valeur1", clé2 : "valeur2") . Dans ce dernier cas, avant d'envoyer les données, jQuery convertit l'objet donné en chaîne à l'aide de $.param() . Cependant, cette conversion peut être inversée en définissant le paramètre processData sur false . La conversion en chaîne n'est pas souhaitable, par exemple, dans le cas de l'envoi d'un objet XML au serveur. Dans ce cas, il est conseillé de modifier le paramètre contentType de application/x-www-form-urlencodedà un type mime plus approprié.

Commentaire: La plupart des navigateurs n'autorisent pas les requêtes Ajax pour des ressources avec des domaines, sous-domaines et protocoles autres que celui actuel. Cependant, cette limitation ne s'applique pas aux requêtes jsonp et script.

Réception des données du serveur

Les données reçues du serveur peuvent être fournies sous forme de chaîne ou d'objet, selon la valeur du paramètre dataType (voir dataType ci-dessus). Ces données sont toujours disponibles dans le premier paramètre du gestionnaire d'exécution de requêtes ajax :

$.ajax (( url : "some.php" , succès : fonction (données) ( alerte ( "Données de profit : " + données ) ; ) ) ) ;

Pour les types texte et xml, les données envoyées par le serveur seront également disponibles dans jqXHR, à savoir respectivement dans ses champs ResponseText ou ResponseXML.

Réglages avancés

À l'aide du paramètre global, vous pouvez désactiver l'exécution des gestionnaires d'événements (.ajaxSend(), .ajaxError(), etc.) pour des requêtes individuelles. Cela peut être utile, par exemple, si le chargement de l'animation est démarré/arrêté dans ces gestionnaires. Ensuite, si certaines requêtes sont exécutées très souvent et rapidement, alors il leur sera utile de désactiver l'exécution des gestionnaires. Pour les scripts inter-domaines et les requêtes jsonp, le paramètre global est automatiquement désactivé.

Si des données d'authentification (identifiant/mot de passe) sont requises pour faire une requête au serveur, vous pouvez alors les spécifier dans les paramètres de nom d'utilisateur et de mot de passe de la requête ajax.

Un certain temps est alloué pour compléter une requête auprès du serveur. Si le serveur n'envoie pas de réponse pendant ce délai, la requête se termine par une erreur (statut "timeout"). Le temps d'attente d'une réponse du serveur peut être modifié en définissant la valeur requise (en millisecondes) dans le paramètre de délai d'attente.

Il peut arriver que l'encodage de l'hôte soit différent de l'encodage du fichier javascript demandé dans la requête ajax. Dans de tels cas, il est nécessaire de préciser l'encodage de ce dernier dans le paramètre scriptCharset.

Dans la plupart des cas, la requête Ajax se produit de manière asynchrone, mais dans certains cas, il peut être nécessaire d'exécuter la requête de manière séquentielle (lorsque l'exécution ultérieure du script est impossible sans recevoir une réponse du serveur). Vous pouvez rendre la demande synchrone si vous désactivez le paramètre asynchrone. Cependant, il convient de rappeler que dans ce cas, la page se bloquera en attendant une réponse du serveur.

Exemples d'utilisation

Le cas d'utilisation le plus simple serait d'appeler $.ajax() sans spécifier de paramètres :

$.ajax(); // une requête GET sera envoyée au serveur à l'URL de la page actuelle sans spécifier de paramètres.

Si vous devez charger et exécuter un fichier js, vous pouvez le faire comme ceci :

$.ajax (( type : "GET" , url : "test.js" , dataType : "script" ) ) ;

Faisons une requête POST au serveur, en spécifiant deux paramètres et en informant l'utilisateur de la requête terminée avec succès :

$.ajax (( type : "POST" , url : "some.php" , données : "name=John&location=Boston" , succès : fonction (msg) ( alert ( "Données arrivées : " + msg ) ; ) ) ) ;

Mettons à jour le contenu de la page html souhaitée :

$.ajax (( url : "test.html" , cache : false , succès : fonction (html) ( $("#results" ) .append (html) ; ) ) ) ;

Faisons une requête synchrone au serveur. Pendant l'exécution de la requête, la page ne répondra pas aux actions de l'utilisateur :

// écrit les données envoyées depuis le serveur vers la variable html var html = $.ajax (( url: "some.php" , async: false ) ) .responseText ;

En paramètre, nous enverrons un objet XML au serveur. Pour le transmettre correctement, vous devez annuler la conversion préalable des paramètres (processData:false). Nous spécifierons la fonction personnalisée handleResponse comme gestionnaire pour la réussite d'une requête :

var xmlDocument = [ créer un document XML] ; $.ajax (( url : "page.php" , processData : false , données : xmlDocument, succès : handleResponse ) ) ;

Approche avancée

À partir de jQuery-1.5, il existe trois nouvelles directions qui vous permettent d'utiliser $.ajax() encore plus profondément. Le premier d'entre eux (Préfiltres) permet d'effectuer des manipulations supplémentaires juste avant l'envoi de la demande. Avec la deuxième approche (Convertisseurs), vous pouvez indiquer à jQuery comment convertir les données reçues du serveur si elles ne correspondent pas au format attendu. La troisième approche (Transports) est le niveau le plus bas, elle permet d'organiser indépendamment une requête au serveur.

Préfiltres

Cette approche consiste à mettre en place un gestionnaire qui est appelé avant chaque requête ajax. Ce gestionnaire précède l'exécution de tout autre gestionnaire ajax. Il s'installe à l'aide de la fonction $.ajaxPrefilter() :

$.ajaxPrefilter (fonction (options, originalOptions, jqXHR) ( ) ) ;

Où
choix— paramètres de la requête en cours,
Options d'origine- paramètres par défaut,
jqXHR— Objet jqXHR de cette requête.

Les préfiltres sont pratiques pour gérer les paramètres personnalisés (c'est-à-dire les nouveaux paramètres inconnus de la bibliothèque spécifiée dans la demande). Par exemple, vous pouvez saisir votre propre paramètre abortOnRetry , qui, lorsqu'il est activé, réinitialisera les demandes en attente si la demande suivante est reçue sur la même URL :

var currentRequests = ( ) ; $.ajaxPrefilter (function (options, originalOptions, jqXHR) ( if (options.abortOnRetry) ( if (currentRequests[ options.url ]) ( currentRequests[ options.url ] .abort () ; ) currentRequests[ options.url ] = jqXHR ; ) ) ) ;

Il est pratique de traiter les paramètres existants dans ajaxPrefilter. Par exemple, voici comment vous pouvez modifier une requête inter-domaines en une requête redirigée via votre serveur de domaine :

$.ajaxPrefilter (function (options) ( if (options.crossDomain) ( options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url ) ; options.crossDomain = false ; ) ) ;

De plus, vous pouvez spécifier les valeurs dataType sur lesquelles le préfiltre fonctionnera. Ainsi, par exemple, vous pouvez spécifier les types json et script :

$.ajaxPrefilter ( "json script" , function (options, originalOptions, jqXHR) ( // Modifier les options, vérifier originalOptions et l'objet jqXHR) ) ;

Enfin, vous pouvez modifier la valeur dataType pour renvoyer la valeur souhaitée :

$.ajaxPrefilter (function (options) ( // change dataType en script si l'url remplit certaines conditions if (isActuallyScript(options.url) ) ( return "script" ; ) ) ;

Cette approche garantit non seulement que la requête changera son type en script, mais également que d'autres gestionnaires de préfiltres spécifiant ce type dans le premier paramètre seront également exécutés.

Convertisseurs

Ce principe consiste à installer un handler qui fonctionnera si le dataType spécifié dans les paramètres ne correspond pas au type de données envoyé par le serveur.

Converters est un paramètre ajax, il peut donc être défini globalement :

// de cette façon, vous pouvez définir un gestionnaire qui fonctionnera si, au lieu // du type mydatatype que vous avez spécifié dans dataType, des données de type text sont reçues $.ajaxSetup (( converters: ( "text mydatatype" : function ( textValue ) ( if (valid( textValue ) ) ( // le traitement du texte transmis renvoie mydatatypeValue; ) else ( // si les données envoyées par le serveur ne correspondent pas à ce qui est attendu, // vous pouvez lancer une exception. throw exceptionObject; ) ) ) ) ;

Les convertisseurs vous aideront lors de l'introduction de votre propre type de données (personnalisé). Il est important de noter que seules des lettres minuscules doivent être utilisées dans le nom d'un tel type de données ! Une requête pour le type de données « mydatatype » mentionné ci-dessus pourrait ressembler à ceci :

$.ajax (url, (dataType: "mydatatype" ) ) ;

JQuery est une bibliothèque javascript dont le but est de « écrire moins, faire plus ». jQuery est facile à connecter à votre site et à commencer à utiliser. jQuery facilite grandement l'utilisation de javascript sur votre site.

jQuery élimine un grand nombre de lignes de code javascript et vous permet d'implémenter tout ce nombre de lignes avec une seule méthode.

Qu’est-ce qu’AJAX ?

AJAX est asynchrone (c'est-à-dire que le navigateur peut faire ce qu'il veut après l'envoi d'une requête, comme afficher un message en attente d'une réponse, faire défiler la page, etc.) JavaScript et XML. Il est utilisé pour créer des pages Web dynamiques et rapides. AJAX nous permet de mettre à jour une partie d'une page Web sans recharger la page entière.

Qu'en est-il de jQuery et AJAX ?

La combinaison de jQuery et AJAX offre des fonctionnalités puissantes. Avec jquery et ajax, vous pouvez faire une requête et recevoir des informations dans une variété de formats, notamment XML, HTML et même du texte brut. Vous pouvez utiliser le format JSON pour échanger des données. Nous pouvons utiliser les données reçues via une requête ajax dans notre page html.

jQuery rend l'API Ajax du navigateur existant plus puissante et plus facile à utiliser. Faire des appels ajax de la manière normale en utilisant javascript est un peu délicat : car vous devez considérer que différents navigateurs nécessitent des approches différentes pour créer l'objet XMLHttpRequest. De plus, la soumission de données, par exemple à partir de formulaires, devient plus difficile si vous utilisez du javascript standard pour l'appel ajax.

jQuery fournit des fonctionnalités simples et puissantes qui étendent les méthodes AJAX de javascript et offrent une approche plus flexible.

Dans ce court article, je vais vous montrer comment utiliser jQuery et AJAX dans un simple formulaire php. Commençons... Pour utiliser jQuery et AJAX nous aurons besoin de deux fichiers, le premier fichier contiendra le code html/php à travers lequel la requête ajax sera effectuée. Dans le deuxième fichier, nous traiterons la requête ajax et renverrons le résultat à la première page.

Étape 1 : Créez un fichier school.php et collez-y le code suivant :

Dans le code ci-dessus, nous obtenons le nom et le numéro de l'étudiant et en utilisant jquery et ajax, nous les envoyons à details.php.

function getdetails())( var nom = $("#name").val(); var rno = $("#rno").val(); $.ajax(( type : "POST", url : " détails .php", data: (fname:name, id:rno) )).done(function(result) ( $("#msg").html(" Adresse du numéro de rôle " +rno +" est "+result ) ; )); )

Votre nom:
Numéro de rôle:

Étape 2 : Créez details.php et placez-y le code suivant :

Dans le code ci-dessus, on obtient l'adresse de l'étudiant à l'aide du numéro de séquence et de son nom.

Pour cet exemple, vous devrez créer une base de données scolaire et une table des étudiants. La table des étudiants contient des champs avec des noms, des numéros de séquence et des adresses.

J'espère que vous trouverez cet article utile.