Un exemple simple d'utilisation de PHP et AJAX. Requêtes de bas niveau. méthode ajax
Syntaxe et description :
Valeur de retour : une instance de l'objet XHR (XMLHttpRequest).
Paramètres :
Les propriétés suivantes de l'objet options sont disponibles pour configurer une requête Ajax :
async – (booléen - valeur logique) La valeur par défaut est vraie, puis toutes les requêtes sont exécutées de manière asynchrone (c'est pourquoi Ajax est utilisé, afin que les opérations soient effectuées en parallèle). Si vous définissez la valeur sur false, ce qui est hautement indésirable, la requête sera exécutée de manière synchrone (d'autres actions du navigateur peuvent être bloquées pendant l'exécution de la requête synchrone. Et en général, le navigateur peut cesser de réagir et de répondre).
beforeSend(XHR) – (fonction) Une fonction appelée avant d'envoyer une requête. Il est utilisé pour définir des en-têtes supplémentaires (personnalisés) ou pour effectuer d'autres opérations préliminaires. Une instance de l'objet XHR (XMLHttpRequest) lui est transmise comme seul argument. Si la fonction renvoie false, la requête est annulée.
cache – (booléen - valeur logique) Si faux, alors les pages demandées ne sont pas mises en cache par le navigateur. (Le navigateur peut fournir les résultats du cache. Par exemple, lorsque les données de la réponse du serveur à une requête Ajax sont toujours nouvelles, la mise en cache interfère). Par défaut, cela est vrai pour les types de données texte, XML, HTML et JSON. Pour les types de données « script » et « jsonp », la valeur par défaut est false.
contentType – (chaîne) Le type de contenu dans la requête (lors de l'envoi de données au serveur). La valeur par défaut est "application/x-www-form-urlencoded" (convient à la plupart des cas et constitue également la valeur par défaut lors de la soumission de formulaires).
contexte – (objet) Cet objet deviendra le contexte (this) pour toutes les fonctions de rappel associées à cette requête Ajax (par exemple, pour les fonctions de réussite ou d'erreur).
$.ajax(( url : "test.html",
contexte : document.body,
succès : fonction())(
$(this).addClass("fait");
}});data – (chaîne | objet) Données envoyées avec la requête au serveur. Ils sont convertis en chaîne de requête et encodés par défaut sous une forme de type URL (le paramètre processData est responsable de l'encodage automatique au format URL).
La chaîne est ajoutée à la chaîne de requête URL si la demande est effectuée à l'aide de la méthode GET. Si la requête est effectuée à l'aide de la méthode POST, alors les données sont transmises dans le corps de la requête.
Si le paramètre donné est un objet sous la forme d'un ensemble de paires nom_propriété/valeur et que la valeur est un tableau, alors jQuery sérialise l'objet en une séquence de plusieurs valeurs avec la même clé.
Par exemple, (Foo : ["bar1", "bar2"]) deviendra "&Foo=bar1&Foo=bar2" .
dataFilter(data, type) – (fonction) Une fonction appelée si la requête réussit et utilisée pour traiter les données reçues dans la réponse du serveur à la requête. Il renvoie les données traitées selon le paramètre "dataType" et les transmet à la fonction success. Les données de type text et xml sont transmises sans traitement immédiat à la fonction de réussite via la propriété ResponseText ou ResponseHTML de l'objet XMLHttpRequest. La fonction dataFilter prend deux arguments :
- data - données reçues (corps de réponse du serveur),
- type - le type de ces données (paramètre "dataType").
dataType – (string) Une chaîne définissant le nom du type de données attendu dans la réponse du serveur. Si le type de données n'est pas spécifié, jQuery essaie lui-même de le déterminer, en fonction du type MIME de la réponse du serveur. Valeurs valides : "xml", "html", "script", "json", "jsonp", "text". (Cela est nécessaire pour définir une méthode de traitement des données reçues dans la réponse à la demande par la fonction dataFilter avant qu'elles ne soient transmises à la fonction de rappel de réussite.)
error(XHR, textStatus, errorThrown) – (fonction) Une fonction appelée lorsque la demande échoue (si le code d'état dans la réponse du serveur indique une erreur). La fonction reçoit trois arguments :
- XHR - une instance de l'objet XMLHttpRequest,
- textStatus - une chaîne décrivant le type d'erreur survenue ("timeout", "error", "notmodified" ou "parsererror"),
- errorThrown - paramètre facultatif - objet d'exception, le cas échéant (renvoyé par une instance de l'objet XHR).
global – (booléen - valeur logique) La valeur par défaut est true (permet d'appeler des gestionnaires d'événements globaux à différentes étapes d'une requête Ajax, par exemple, les fonctions ajaxStart ou ajaxStop). La valeur est définie sur false pour les empêcher de se déclencher. (Utilisé pour gérer les événements Ajax).
ifModified – (booléen - valeur booléenne) Si défini sur true, la requête est considérée comme réussie uniquement si les données de la réponse ont changé depuis la dernière requête (jQuery détermine si un composant dans le cache du navigateur correspond à ce qui se trouve sur le serveur en vérifiant l'en-tête "Last-Modified" avec la date de la dernière modification du contenu, et dans jQuery 1.4 l'en-tête "Etag" est également coché - une chaîne avec la version du composant). La valeur par défaut est false, c'est-à-dire Le succès de la requête ne dépend pas des en-têtes ou des modifications apportées à la réponse.
jsonp – (chaîne) Remplace le nom de la fonction de rappel pour une requête jsonp inter-domaine. Remplace le mot-clé callback dans la partie "callback=?". une chaîne de requête GET (ajoutée à l'URL) ou envoyée dans le corps de la requête lorsqu'elle est envoyée à l'aide de la méthode POST. Par défaut, jQuery génère automatiquement un nom unique pour la fonction de rappel.
jsonpCallback – (chaîne) Définit le nom de la fonction de rappel pour la requête jsonp. Cette valeur sera utilisée à la place du nom aléatoire généré automatiquement par la bibliothèque jQuery. L'utilisation de ce paramètre vous permet d'éviter la mise en cache du navigateur des requêtes GET. Il est conseillé d'autoriser jQuery à générer un nouveau nom pour chaque nouvelle requête inter-domaine adressée au serveur afin de faciliter la gestion des requêtes et des réponses.
mot de passe – (chaîne) Le mot de passe qui sera utilisé en réponse à une demande d'autorisation HTTP sur le serveur.
processData – (booléen) La valeur par défaut est true et les données transmises au serveur dans le paramètre data sont converties en une chaîne de requête avec le type de contenu « Application/X-WWW-forms-urlencoded » et codées. Si ce traitement n'est pas souhaité (lorsque d'autres données doivent être envoyées au serveur, comme un objet DOMDocument ou XML), alors il peut être contourné en définissant ce paramètre sur false.
scriptCharset – (chaîne) Lors de l'exécution de requêtes GET et de requêtes ciblant des données « jsonp » ou « script », spécifie le codage des caractères de la requête (par exemple, « UTF-8 » ou « CP1251 »). Utile pour les différences entre les encodages côté client et côté serveur.
success(data, textStatus, XHR ) – (function) Une fonction appelée lors d'une requête réussie (si le code d'état dans la réponse à la requête indique le succès). La fonction reçoit trois arguments :
- data - données renvoyées par le serveur dans la réponse, prétraitées par la fonction dataFilter conformément à la valeur du paramètre dataType,
- textStatus - une chaîne avec un code d'état indiquant le succès,
- XHR est une instance de l'objet XMLHttpRequest.
timeout – (nombre) Définit le temps maximum d'attente d'une réponse du serveur en millisecondes. A priorité sur le paramètre de limite de délai d'expiration globale via $.AjaxSetup. Si le délai d'attente est dépassé, la demande est abandonnée et la fonction de gestion des erreurs (si installée) est appelée. Cela peut être utilisé, par exemple, pour attribuer à une requête spécifique un délai d'expiration plus long que le délai d'expiration défini pour toutes les requêtes.
traditional – (booléen) Doit être défini sur true pour utiliser la sérialisation des données traditionnelle (simplifiée) lors de l'envoi (sans conversion récursive en une chaîne d'objets ou de tableaux de type URL imbriqués dans d'autres tableaux ou objets).
type – (chaîne) Méthode HTTP pour transférer des données lors de l'exécution d'une requête. Par défaut, les données sont transférées à l'aide de la méthode GET. Généralement, GET ou POST sont utilisés. Vous pouvez également utiliser les méthodes PUT et DELETE, mais cela n'est pas recommandé car elles ne sont pas prises en charge par tous les navigateurs.
url – (chaîne) Une chaîne contenant l'URL à laquelle la demande est envoyée. Par défaut, c'est la page actuelle.
nom d'utilisateur – (chaîne) Nom d'utilisateur qui sera utilisé pour l'autorisation HTTP sur le serveur.
xhr – (fonction) Une fonction appelée pour instancier un objet XMLHttpRequest. Par défaut, la création d'un objet XHR est implémentée via ActiveXObject dans le navigateur IE, ou via l'objet intégré de type XMLHttpRequest dans d'autres cas.
options – (objet) Un objet sous la forme d'un ensemble de propriétés (paires clé : "valeur") qui spécifient les paramètres d'une requête Ajax. Il existe de nombreux paramètres possibles (propriétés de l'objet options), et généralement, dans la plupart des cas, ils ne sont pas tous utilisés, mais seulement certains d'entre eux.
De plus, tous ces paramètres sont facultatifs, car la valeur de n'importe lequel d'entre eux peut être définie par défaut à l'aide de la méthode $.ajaxSetup().
Cet article décrit AJAX au niveau des fonctionnalités et des exemples. Les caractéristiques de l'interaction asynchrone et des exemples d'utilisation sont pris en compte, mais avec un minimum de détails techniques.
J'espère que cela sera utile pour comprendre ce qu'est AJAX et à quoi il sert.
Qu’est-ce qu’AJAX ? Exemple de mise en œuvre.AJAX, ou plus, UN synchrone J. avascript UN sd X ml est une technologie permettant d'interagir avec le serveur sans recharger les pages.
De ce fait, le temps de réponse est réduit et l’application Web s’apparente davantage à un ordinateur de bureau en termes d’interactivité.
La technologie AJAX, comme l'indique la première lettre A de son nom, est asynchrone, c'est-à-dire que le navigateur, après avoir envoyé une requête, peut tout faire, par exemple afficher un message
sur l'attente d'une réponse, le défilement de la page, etc.
Voici le code du bouton dans l'exemple ci-dessus :
Lorsqu'on clique dessus, il appelle la fonction de vote, qui envoie une requête au serveur, attend une réponse, puis affiche un message à ce sujet dans le div sous le bouton :
La réponse du serveur sera ici
Pour échanger des données avec le serveur, un objet XmlHttpRequest spécial est utilisé, qui peut envoyer une requête et recevoir une réponse du serveur. Vous pouvez créer un tel objet multi-navigateur, par exemple, comme ceci :
Fonction getXmlHttp())( var xmlhttp; try ( xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); ) catch (e) ( try ( xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); ) catch (E) ( xmlhttp = false; ) ) if (!xmlhttp && typeof XMLHttpRequest!="undefined") ( xmlhttp = new XMLHttpRequest(); ) return xmlhttp;
Vous pouvez en savoir plus sur les détails de l'implémentation d'AJAX à l'aide de XmlHttpRequest et d'autres transports dans la section sur la communication avec le serveur.
Nous ne nous attarderons pas là-dessus ici et passerons directement à la fonction vote :
// code de vote javascript de l'exemple de fonction vote() ( // (1) crée un objet pour une requête au serveur var req = getXmlHttp() // (2) // span à côté du bouton // il s'affichera la progression de l'exécution var statusElem = document.getElementById("vote_status") req.onreadystatechange = function() ( // onreadystatechange est activé lorsque la réponse du serveur est reçue if (req.readyState == 4) ( // si la requête est terminée exécution de statusElem.innerHTML = req.statusText / / show status (Not Found, OK..) if(req.status == 200) ( // si l'état est 200 (OK) - donne une réponse à l'alerte utilisateur (" Réponse du serveur : "+req.responseText); ) // ici, vous pouvez ajouter autre chose avec la gestion des erreurs de requête ) ) // (3) définir l'adresse de connexion req.open("GET", "/ajax_intro/vote.php", true); // l'objet requête est préparé : l'adresse est spécifiée et la fonction onreadystatechange est créée // (4) req.send(null); // envoie la requête // (5) statusElem.innerHTML = "En attente de la réponse du serveur..." )
Le flux d'exécution utilisé par vote est assez typique et ressemble à ceci :
Le gestionnaire de serveur auquel la requête AJAX est adressée (dans l'exemple, il s'agit de vote.php) n'est essentiellement pas différent d'une page standard. La requête AJAX envoyée par XmlHttpRequest n'est pas différente d'une requête classique.
C'est juste que le texte renvoyé par le serveur n'est pas affiché au format HTML, mais est lu et traité par la fonction onreadystatechange.
Le sens d’AJAX est l’intégration des technologiesLa technologie AJAX utilise une combinaison de :
- (X)HTML, CSS pour la présentation et le style des informations
- Modèle DOM, sur lequel les opérations sont effectuées par javascript côté client pour fournir un affichage dynamique et une interaction avec les informations
- XMLHttpRequest pour une communication asynchrone avec un serveur Web. Dans certains frameworks AJAX et dans certaines situations, une balise IFrame, SCRIPT ou autre transport similaire est utilisée à la place de XMLHttpRequest.
- JSON est souvent utilisé pour l'échange de données, mais n'importe quel format fonctionnera, y compris le HTML enrichi, le texte, le XML et même certains EBML.
Une application AJAX typique se compose d'au moins deux parties.
Le premier s'exécute dans le navigateur et est généralement écrit en JavaScript, et le second se trouve sur le serveur et est écrit, par exemple, en Ruby, Java ou PHP.
Les données sont échangées entre ces deux parties via XMLHttpRequest (ou autre transport).
Que puis-je faire avec AJAX ?L’intérêt d’AJAX est l’interactivité et le temps de réponse rapide.
Petits contrôlesTout d’abord, AJAX est utile pour les petits éléments associés à des actions basiques : ajouter au panier, s’abonner, etc.
 |
 |
 |
Par exemple, un arbre dont les nœuds sont chargés au fur et à mesure de leur expansion.
Au moment de son apparition, c'était le seul service de messagerie ouvert qui utilisait AJAX pour les fonctionnalités suivantes.
- Vérifier les erreurs de saisie du formulaire AVANT de soumettre
Le nom d'utilisateur est envoyé au serveur et le résultat de la vérification est renvoyé à la page.
- Téléchargement "instantané"
Le navigateur contacte uniquement le serveur pour obtenir des données, plutôt que de mettre à jour toute l'interface encombrante
- "Livraison" automatique des lettres dans un dossier ouvert
De temps en temps, une demande est envoyée au serveur et si de nouvelles lettres arrivent, elles apparaissent dans le navigateur.
- Saisie semi-automatique
Il suffit de saisir les premières lettres du nom du destinataire, et le reste se fait automatiquement, comme dans les applications bureautiques.
Résultat : popularité généralisée, forte demande de comptes depuis l'ouverture.
Modèle synchrone VS modèle asynchroneDans la programmation conventionnelle, toutes les opérations sont synchrones, c'est-à-dire qu'elles sont effectuées les unes après les autres.
Relativement parlant, nous agissons ainsi :
Avec l'approche asynchrone, nous :
Autrement dit, dans le cas synchrone, la canne à pêche attire constamment notre attention. La capture du poisson est un processus séquentiel.
Dans la version asynchrone, nous avons d'abord défini le programme sur ce qu'il faut faire en mordant, puis avons abaissé la canne à pêche pour attraper et nous sommes occupés d'autres choses.
Par exemple, nous avons installé 5 autres cannes à pêche de ce type.
La programmation asynchrone est plus difficile que la programmation synchrone, et au début elle est inhabituelle, car elle à l'avance ce qui fonctionnera est donné après.
C'est-à-dire que le programme « Que faire quand il mord » doit être défini avant que la morsure ne se produise, et on ne sait généralement pas s'il y a des poissons dans le réservoir.
Il existe des techniques qui facilitent la programmation asynchrone, par exemple l'objet Deferred (Twisted, Dojo, Mochikit), mais cela sera abordé dans un article séparé.
Modèle synchrone et asynchrone en AJAXRevenons à nos moutons : le navigateur, le serveur et, disons, la base de données.
Dans le modèle synchrone, le navigateur envoie une requête au serveur et se bloque, en attendant qu'il effectue tout le travail nécessaire. Le serveur exécute des requêtes sur la base de données, encapsule la réponse dans le format requis et la génère. Navigateur. Ayant reçu la réponse, il appelle la fonction show.
Tous les processus sont exécutés séquentiellement, les uns après les autres.
Les retards du réseau sont inclus pendant le temps d'attente, indiqué en gris dans le diagramme.
L'utilisateur ne peut rien faire d'autre sur la même page pendant l'échange de données synchrones.
Dans le modèle asynchrone, la requête est envoyée (« l’appât est posé »), et vous pouvez passer à autre chose. Lorsque la demande est terminée ("becked") - elle est lancée à l'avance
une fonction préparée par le programmeur (« pull up the spinning rod ») pour afficher un message du serveur.
Ici, le serveur informe immédiatement le navigateur que la demande a été acceptée pour traitement et la libère pour un travail ultérieur. Lorsque la réponse est prête, le serveur la transmettra et la fonction d'affichage correspondante sera appelée sur le navigateur, mais pendant la génération et l'envoi de cette réponse, le navigateur est libre.
L'utilisateur peut rédiger des commentaires, remplir et soumettre un formulaire, etc. : De nouvelles requêtes asynchrones peuvent être effectuées.
Le modèle asynchrone se caractérise par une réponse presque instantanée aux actions de l'utilisateur, de sorte que l'application semble pratique et rapide.
En raison de cet écart entre l’action et le résultat réel, l’application devient beaucoup plus sujette aux erreurs.
Surtout dans le cas de plusieurs requêtes asynchrones simultanées, vous devez faire attention à l'ordre d'exécution et de réponse (race-conditions) et, en cas d'erreur, laisser l'application dans un état cohérent.
Caractéristiques du modèle asynchrone- Difficile à mettre en œuvre
- Capacités de navigateur insuffisantes (javascript)
- Le modèle asynchrone est plus difficile à déboguer
- Conditions de course
- Séquence d'exécution non définie
- Vous pouvez effectuer plusieurs tâches simultanément (« cannes à pêche »), mais la tâche commencée en premier peut se terminer en dernier.
- La réaction est immédiate, mais on ne sait pas quel en sera le résultat. La gestion des erreurs est plus compliquée
- Erreurs de communication - déconnexion, etc.
- Erreurs de l'utilisateur - par exemple, il n'y avait pas suffisamment de privilèges
- Contrôle d'intégrité (bugproof)
- Par exemple, l'éditeur a envoyé une requête asynchrone pour supprimer une branche d'arbre. L'ajout doit être désactivé jusqu'à ce que la réponse du serveur arrive. Si tout à coup les privilèges manquaient, l’opération échouait.
- Interactivité
- Interface rapide
Il n’y a que deux avantages, mais quels avantages ! Le jeu en vaut la chandelle.
Glisser-déposer asynchrone.Parfois, pour les opérations asynchrones, il est nécessaire de faire divers « trucs d'oreille ». Par exemple, vous souhaitez faire un glisser-déposer dans une arborescence, c'est-à-dire glisser des articles d'une section à une autre avec la souris, et pour qu'ils changent de parent sur le serveur dans la base de données.
Faites glisser "n" déposez - c'est "a pris un objet avec des souris - placez-le là où il est nécessaire - c'est prêt". Mais dans le modèle asynchrone, tout ne peut pas être « prêt » tout de suite.
Vous devez vérifier les privilèges sur le serveur, vérifier si l'objet existe toujours, au cas où un autre utilisateur le supprimerait.
Nous devons d’une manière ou d’une autre montrer que le processus a commencé, mais le résultat sera « ce qui va se passer ». Comment? Dans le modèle asynchrone, le pointeur de la souris ne peut pas simplement survoler un objet pour se transformer en montre.
Dans ce cas, soit ils utilisent des requêtes synchrones au serveur - et alors tout se bloque vraiment, soit la solution originale consiste à placer l'objet comme s'il avait été transféré et à informer avec une icône animée qu'une réponse est en attente.
Si la réponse est négative, le gestionnaire de réponse retransfère l'objet.
L'exemple avec glisser-déposer aborde également le problème du « contexte obsolète » - un contexte obsolète.
Le Web est un environnement multi-utilisateurs. Si utilisé pour la navigation,
Disons un arbre d'articles, alors de nombreuses personnes y travaillent. L’un d’eux peut supprimer une branche d’arbre sur laquelle travaille l’autre : conflit.
En règle générale, les moyens suivants sont utilisés pour surmonter de tels incidents :
Politique de modificationC'est à ce moment-là que chacun sait qui fait quoi et que de telles suppressions sont convenues au niveau de la répartition des pouvoirs et de la communication personnelle. Cette option est évidemment dangereuse, mais fonctionne généralement.
Verrouillage et/ou contrôle de versionVerrouillage - blocage des documents modifiés.
Contrôle de version : chaque nouveau document devient une version, les modifications ne sont donc jamais perdues. La gestion des versions entraîne des conflits lorsque Petya a commencé à modifier le document avant Vasya et l'a enregistré plus tard. Dans le même temps, dans la dernière version, les modifications de Vasya ont été perdues, bien que l'avant-dernière version (celle de Vasya) soit définitivement disponible dans le système.
Vous pouvez en savoir plus sur le verrouillage et la gestion des versions, par exemple dans la documentation du système de contrôle de version Subversion.
Mise à jour automatique du contexteLe problème du contenu obsolète peut être résolu à 99 % grâce à la mise à jour automatique instantanée.
Le navigateur maintient une connexion constante avec le serveur (ou effectue des demandes correctives de temps en temps) - et les modifications nécessaires sont envoyées via ce canal.
Par exemple, de nouveaux articles sont parfois chargés dans une branche d'arborescence ouverte, et de nouvelles lettres sont parfois chargées dans une interface de messagerie ouverte.
En général, le problème du contexte obsolète est directement lié au problème de l’intégrité des données. Dans tous les cas, le serveur est responsable du contrôle final d’intégrité, comme pour la validation du formulaire.
jQuery.ajax() - 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 est à la base du fonctionnement de tous les ajax, qui sont souvent plus faciles à comprendre et à utiliser, mais offrent néanmoins des fonctionnalités limitées par rapport à cette méthode.
$.ajax() renvoie un objet XMLHttpRequest. Dans la plupart des cas, vous n'aurez pas besoin de travailler directement avec cet objet, mais il est toujours disponible au cas où vous auriez besoin d'abandonner la demande manuellement.
La fonction $.ajax() reçoit un objet composé de paires clé/valeur utilisées pour initialiser et gérer la requête.
Une requête Ajax a deux utilisations :
jQuery.ajax (url [, paramètres ])
La seule différence par rapport à la version précédente de la méthode est que la propriété url fait ici partie des paramètres et non un paramètre distinct.
Liste des paramètresType : objet.
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 exemple, l'exemple suivant spécifie des types personnalisés valides :
$.ajax(( accepte : ( mycustomtype : "application/x-some-custom-type" ), convertisseurs : ( "text mycustomtype": function(result) ( return newresult; ) ), dataType : "mycustomtype" ));
$. ajax (( accepte : ( montypepersonnalisé : "application/x-some-custom-type" convertisseurs : ( "text mycustomtype" : fonction (résultat) ( renvoie un nouveau résultat ; Type de données : "montype personnalisé" } ) ; |
Type : booléen.
Par défaut, toutes les requêtes sont envoyées 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 envoyer des requêtes de manière synchrone, définissez cette option sur false. Les requêtes inter-domaines et jsonp ne peuvent pas être exécutées de manière synchrone. Veuillez noter que les requêtes synchrones peuvent bloquer le navigateur pendant l'exécution de la requête.
Type : fonction.
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.
beforeSend fait référence aux événements ajax. Par conséquent, si la fonction qui y est spécifiée renvoie false, la requête ajax sera annulée. À partir de jQuery-1.5, beforeSend est appelé quel que soit le type de requête.
Type : booléen.
si vous souhaitez que le navigateur ne mette pas en cache la requête en cours, définissez ce paramètre sur false. Veuillez noter que si le paramètre est défini sur false, la chaîne « _= » sera ajoutée à l'URL.
Type : fonction.
Une fonction qui est exécutée à chaque fois qu'une requête AJAX se termine (une fois le succès et l'erreur terminés). Deux paramètres sont passés à la fonction : jqXHR (dans les versions antérieures de la bibliothèque (jusqu'à 1.5), XMLHttpRequest est utilisé à la place de jqXHR) et l'état d'exécution de la requête (valeur de chaîne : "success", "notmodified", "error", "timeout", "abort" ou "parsererror").
À partir de jQuery-1.5, vous pouvez transmettre un tableau de fonctions au paramètre complet plutôt qu'une seule fonction. Toutes les fonctions seront appelées dans l'ordre dans lequel elles sont spécifiées dans ce tableau.
Type : objet.
Le paramètre est apparu dans jQuery-1.5. Il est spécifié par un objet au format (string:expression régulière) et détermine comment jQuery analysera la réponse du serveur, en fonction de son type.
Type : booléen ou chaîne.
Lors de l'envoi d'une requête au serveur, les données sont transmises dans le format spécifié dans contentType. La valeur par défaut est « application/x-www-form-urlencoded ; charset=UTF-8', ce qui convient dans la plupart des cas. Si vous spécifiez explicitement ce paramètre, il sera envoyé au serveur (même si aucune donnée n'y a été envoyée).
Avec jQuery-1.6, vous pouvez passer false pour ne pas définir le titre.
Type : objet.
L'objet qui deviendra le contexte une fois la requête terminée (la valeur transmise à la variable this). Par exemple, si vous spécifiez un élément DOM comme contexte, alors tous les gestionnaires de requêtes ajax seront également exécutés dans le contexte de cet élément DOM. Dans cet exemple, le mot clé this contiendra document.body :
$.ajax(( url : "test.html", contexte : document.body )).done(function() ( $(this).addClass("done"); ));
$. ajax (( URL : "test.html" , contexte : document. corps ) ) . fait(fonction()( $(ce). addClass("fait"); } ) ; |
Type : objet.
Le paramètre apparu dans jQuery-1.5 Détermine quelles fonctions seront utilisées pour convertir les valeurs d'un type à un autre.
Type : booléen.
Cette option a été introduite dans jQuery-1.5 Si vous souhaitez effectuer une requête inter-domaines (par exemple, JSONP) sur le même domaine, définissez le paramètre crossDomain sur true. Cela permet par exemple la redirection du serveur vers un autre domaine.
Type : objet, chaîne ou tableau.
Données qui seront transférées au serveur. Si les données ne sont pas une chaîne, elles sont converties en chaîne de requête. Pour les requêtes GET, les données sont jointes à l'URL. Un objet doit être constitué de paires clé/valeur. Si la valeur est un tableau, alors jQuery classe les valeurs en fonction du paramètre traditionnel. Par défaut, par exemple, (foo:["bar1", "bar2"]) devient &foo=bar1&foo=bar2 .
Type : fonction.
Une fonction qui prétraitera les données envoyées par le serveur, c'est-à-dire il doit agir comme un filtre et renvoyer la chaîne nettoyée. Deux paramètres sont transmis à cette fonction : les données mentionnées et la valeur du paramètre Type de données. La fonction spécifiée dans dataFilter doit renvoyer les données traitées.
Tapez : chaîne.
Type de données dans lequel la réponse est attendue du serveur. S'il n'est pas défini, jQuery tentera de le déterminer automatiquement à l'aide du MIME reçu du serveur.
Type : fonction
Une fonction qui sera appelée si une requête adressée au serveur échoue. Il est fourni avec trois paramètres : jqXHR (jusqu'à ce que XMLHttpRequest 1.5 soit utilisé), une chaîne décrivant l'erreur survenue, ainsi qu'un objet d'exception si celle-ci s'est produite. Les valeurs possibles pour le deuxième argument sont "timeout", "error", "notmodified" et "parsererror" (dans des cas inattendus, null peut être renvoyé). Depuis jQuery-1.5, ce paramètre peut accepter soit une seule fonction, soit un tableau de fonctions.
L'événement d'erreur ne se produit pas lorsque dataType est égal à script ou JSONP.
Type : booléen.
Responsable du fonctionnement des événements de requête ajax globaux (par exemple, ajaxStart ou ajaxStop). Si vous définissez ce paramètre sur false , les événements globaux pour cette demande ne seront pas déclenchés.
Type : objet.
Le paramètre est apparu dans jQuery-1.5. Ici, vous pouvez spécifier des en-têtes de requête supplémentaires. Les valeurs de ce paramètre seront saisies avant l'appel de la fonction beforeSend, où les modifications finales aux en-têtes pourront être apportées.
Type : booléen.
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. À partir de 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. ).
Type : booléen.
Cette option a été introduite dans jQuery-1.5.1. Vous permet de définir l'état source d'une page sur local (comme si c'était via le protocole de fichier), même si jQuery le reconnaissait 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 isLocal globalement - en utilisant la fonction $.ajaxSetup(), et non. dans les paramètres des requêtes ajax individuelles.
Tapez : chaîne ou booléen.
Définit le nom du paramètre qui est ajouté à l'URL de la requête JSONP (par défaut, « callback » est utilisé). Par exemple, le paramètre (jsonp:"onJSONPLoad") est converti en partie URL de la chaîne "onJSONPLoad=?" . À partir de la version 1.5, spécifier false dans ce paramètre empêche l'ajout d'un paramètre supplémentaire à l'url. Dans ce cas, vous devez définir la valeur du paramètre jsonpCallback. Par exemple : (jsonp:false, jsonpCallback:"callbackName") .
Type : chaîne ou fonction.
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).
Tapez : chaîne.
Le paramètre apparu dans jQuery-1.9.0 Permet de préciser le type de requête au serveur ("POST", "GET", "PUT")
Tapez : chaîne.
Le paramètre est apparu dans jQuery-1.5.1. Dans ce champ, vous pouvez spécifier le type de données dans lequel la réponse du serveur est attendue au lieu de XHR.
Tapez : chaîne.
Mot de passe pour l'authentification sur le serveur, si nécessaire.
Type : booléen.
Par défaut, les données transférées au serveur sont converties d'un objet en chaîne de requête (format url : fName1=value1&fName2=value2&...) et envoyées sous la forme "application/x-www-form-urlencoded" . Si vous devez envoyer un document DOM ou d'autres données qui ne peuvent pas être converties, définissez l'option processData sur false .
Tapez : chaîne.
S'applique uniquement aux requêtes Ajax GET, le dataType peut être « jsonp » ou « script ». Si un serveur d'un domaine tiers utilise un encodage différent du vôtre, vous devez préciser l'encodage du serveur tiers.
Type : objet.
Le paramètre est apparu dans jQuery-1.5.0 Un ensemble de paires dans lesquelles les codes d'exécution de requête sont associés aux 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 not found"); ) ) ));
$. ajax (( Code d'état : ( 404 : fonction () ( alerte ("page non trouvée" ) ; } ) ; |
Si la requête a abouti, alors en paramètre, la fonction anonyme prendra les mêmes paramètres que les fonctions du gestionnaire pour une exécution réussie de la requête (spécifiée dans le paramètre success), et en cas d'erreur, les mêmes paramètres que ceux de l'erreur. fonctions.
Type : fonction, tableau.
Une fonction qui sera appelée si la requête adressée au serveur se termine avec succès. Prend 3 arguments :
- données envoyées par le serveur et prétraitées ;
- chaîne avec le statut d'exécution (textStatus) ;
- Objet jqXHR (dans les versions antérieures à 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.
Tapez : numéro.
Temps d'attente d'une réponse du serveur en millisecondes. Remplace le réglage global du même paramètre dans $.ajaxSetup(). Si ce délai est dépassé, la demande sera complétée par une erreur et un événement d'erreur se produira, 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, le délai d'attente peut être écoulé, même si en fait la requête 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.
Type : booléen.
Définissez ce paramètre sur true pour utiliser les options de conversion (sérialisation) traditionnelles.
Tapez : chaîne.
Similaire au paramètre méthode. Le paramètre est utilisé dans jQuery avant la version 1.9.0
Tapez : chaîne.
Définit l'adresse à laquelle la demande sera envoyée.
Tapez : chaîne.
Nom d'utilisateur pour s'authentifier auprès du serveur, si nécessaire.
Type : fonction.
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.
Type : objet.
Le paramètre est apparu 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 ) ));
$. ajax (( URL : a_cross_domain_url, xhrFields :( withCredentials : vrai } ) ; |
Comme mentionné ci-dessus, $.ajax() est la méthode la plus basique et toutes les méthodes suivantes ne sont que des wrappers. Très souvent, il n'est pas nécessaire d'appeler cette fonction, car Il existe des alternatives de niveau supérieur telles que , et . Ils sont plus faciles à comprendre et à utiliser, bien que $.ajax() soit une solution plus flexible.
Le cas d'utilisation le plus simple serait d'appeler $.ajax() sans spécifier de paramètres :
$. ajax(); |
Les paramètres beforeSend, error, dataFilter, success et complete vous permettent de définir des gestionnaires d'événements qui se produisent à certains moments de l'exécution de chaque requête ajax.
- beforeSend se produit immédiatement avant que la demande ne soit envoyée au serveur ;
- une erreur se produit si la demande échoue ;
- dataFilter se produit lorsque les données arrivent du serveur. Permet de traiter les données « brutes » envoyées par le serveur ;
- le succès se produit si la demande se termine avec succès ;
- complete se produit chaque fois que la demande est terminée. succès : fonction () (
- « 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.
- "script" - 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.
- "texte" - les données reçues seront disponibles en texte brut, sans traitement préalable.
alert ("Données envoyées avec succès." ) ;
} ) ;
Attention! Les paramètres .success(), .error() et .complete() évoqués ci-dessus ont été ajoutés à jQuery-1.5 en plus des méthodes standard .done(), .fail() et .then() pour l'objet différé, qui peut être utilisé pour définir des gestionnaires, mais à partir de jQuery-1.8, ces trois méthodes deviendront obsolètes.
Paramètre dataTypeLa 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 :
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(). Toutefois, 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
URL : "test.php" ,
succès : fonction (données) (
alerte ("Données reçues : " + données ) ;
} ) ;
Une leçon dans laquelle nous examinerons la création de requêtes AJAX asynchrones simples vers le serveur à l'aide d'exemples. Nous utiliserons à la fois les méthodes GET et POST comme méthode de transmission des requêtes. Sur le serveur, nous traiterons les requêtes à l'aide de scripts PHP.
Qu'est-ce qu'une requête AJAX asynchrone ?La technologie AJAX est principalement utilisée pour créer des requêtes asynchrones vers le serveur. Une requête asynchrone est une requête qui s'exécute en arrière-plan et n'interfère pas avec l'interaction de l'utilisateur avec la page.
Lors de l'envoi d'une requête asynchrone, le navigateur (page) ne se « fige » pas, c'est-à-dire vous pouvez travailler avec comme avant. Mais alors comment savoir quand la réponse du serveur arrive ? Pour déterminer cela, vous devez surveiller la propriété readyState du navigateur. Cette propriété contient un nombre dont la valeur peut être utilisée pour déterminer à quelle étape se trouve la demande. Le tableau suivant présente les principales valeurs de la propriété readyState et leurs états correspondants.
Ceux. Il s'avère que nous devons suivre quand la valeur de la propriété readyState est égale à 4. Cela signifie que la demande envoyée a reçu une réponse du serveur. Les valeurs restantes sont assez rarement utilisées dans la pratique et certains navigateurs peuvent ne pas les prendre en charge.
Afin de déterminer à quelle étape se trouve la demande, vous devez utiliser l'événement onreadystatechange de l'objet XMLHttpRequest. Cet événement se produit chaque fois que la valeur de la propriété readyState change. Par conséquent, dans le gestionnaire de cet événement (fonction sans nom ou nommée), vous pouvez écrire des actions qui vérifieront si cette propriété est égale à 4 et si elle est égale, puis, par exemple, afficher la réponse du serveur sur la page.
Création d'une requête AJAX asynchrone (méthode GET)Examinons la création d'une requête AJAX asynchrone à l'aide d'un exemple, qui accueillera l'utilisateur après le chargement de la page et affichera son adresse IP.
Pour ce faire, vous devez créer 2 fichiers sur le serveur dans un seul répertoire :
Regardons la séquence d'actions qui doivent être effectuées côté client (en code JavaScript) :
Préparons les données nécessaires à l'exécution de la requête sur le serveur. Si aucune donnée n'est nécessaire pour terminer la demande sur le serveur, cette étape peut être ignorée.
Créons une variable qui contiendra une instance de l'objet XHR (XMLHttpRequest).
Configurons la requête en utilisant la méthode open().
Les paramètres suivants sont spécifiés :
- La méthode par laquelle la requête sera envoyée au serveur (GET, POST).
- L'URL qui traitera la requête sur le serveur.
- Type de requête : synchrone (faux) ou asynchrone (vrai).
- Nom d'utilisateur et mot de passe si nécessaire.
Abonnons-nous à l'événement onreadystatechange de l'objet XHR et spécifions le gestionnaire en tant que fonction anonyme ou nommée. Après cela, nous créerons du code à l'intérieur de cette fonction qui vérifiera l'état de la réponse et effectuera certaines actions sur la page. La réponse provenant du serveur se trouve toujours dans la propriété ResponseText.
En plus de vérifier la valeur de la propriété readyState numéro 4, vous pouvez également vérifier la valeur de la propriété status. Cette propriété détermine le statut de la demande. S'il est égal à 200, alors tout va bien. Sinon, une erreur s'est produite (par exemple, 404 - URL introuvable).
Envoyons une requête au serveur en utilisant la méthode send().
Si nous utilisons la méthode GET pour envoyer une requête, il n'est alors pas nécessaire de transmettre des données au paramètre de cette méthode. Ils sont envoyés dans le cadre de l'URL.
Si nous utilisons la méthode POST pour envoyer une requête, alors les données doivent être transmises en paramètre à la méthode send(). De plus, avant d'appeler cette méthode, vous devez définir l'en-tête Content-Type afin que le serveur sache dans quel codage la demande lui est parvenue et puisse la déchiffrer.
Contenu de l'élément script :
// 2. Création de la variable de requête var request = new XMLHttpRequest(); // 3. Paramétrage de la requête request.open("GET","processing.php",true); // 4. Abonnez-vous à l'événement onreadystatechange et traitez-le à l'aide de la fonction anonyme request.addEventListener("readystatechange", function() ( // si les états de la demande sont 4 et le statut de la demande est 200 (OK) if ((request. readyState==4) && (request.status==200)) ( // par exemple, affiche l'objet XHR sur la console du navigateur console.log(request); // et la réponse (texte) provenant du serveur dans la fenêtre d'alerte console.log(request.responseText) ; // récupère l'élément avec id = bienvenue var bienvenue = document.getElementById("welcome"); // remplace le contenu de l'élément par la réponse provenant du serveur bienvenue .innerHTML = request.responseText ) ); // 5. Envoi d'une requête au serveur request.send();
En conséquence, le fichier Welcome.html aura le code suivant :
Exemple de travail AJAX Exemple de travail AJAX window.addEventListener("load",function() ( var request = new XMLHttpRequest(); request.open("GET","processing.php",true); request.addEventListener(" readystatechange" , function() ( if ((request.readyState==4) && (request.status==200)) ( var bienvenue = document.getElementById("welcome"); bienvenue.innerHTML = request.responseText; ) ) ); request.send();
Sur le serveur (en utilisant php) :