Requêtes AJAX avec JQuery

Cette page est propulsée par


Cette page Webjax vous présente les fonctionnalités JQuery qui vous permettent d'effectuer et de gérer des appels AJAX.



#00 :: Requêtes AJAX , Ajax Requests: #01 :: Evènements AJAX , Ajax Events: #02 :: Fonctionnalités supplémentaires , Misc:

00 :: Requêtes AJAX , Ajax Requests:

jQuery.ajax( options )

Charge une page en utilisant une requête HTTP.
Ceci est l'implémentation la plus bas-niveau en terme d'implémentations AJAX. Vous pouvez aussi regarder du côté de "$.get" , "$.post" etc pour des implémentations plus haut niveau et qui sont plus faciles à utiliser et à comprendre pour les débutants.
Cependant vous devez prendre en compte que ces implémentations plus haut niveau n'offrent pas autant de fonctionnalités (ex : gestion de "callback" lorsque des erreurs interviennent).

"$.ajax()" retourne l'objet XMLHttpRequest qu'il crée. Dans la plupart des cas d'utilisation, vous n'aurez pas besoin de travailler avec cet objet mais celui ci reste disponible dès fois que vous en auriez tout de même besoin.

".ajax()" ne prend qu'un seul argument qui est un objet "key/value" , "clé/valeur", qui est utilisé pour initialiser et gérer la requête. Voyez ci après cette description générale de "$.ajax()", la liste des "clés/valeurs" que vous pouvez assigner dans un tel objet.

Attention 00 :: Si vous spécifiez "dataType", faites en sorte que le serveur envoit le type MIME qui est indiqué en tant que réponse (ex : "xml" pour "text/xml").
Si vous ne faites pas cela attendez vous à de possibles problèmes en sortie. Vous pouvez consulter cette page pour plus de détails sur ce type de problème.

Attention 01 :: Toutes les requêtes "POST" (effectués hors du domaine de base) seront converties en requêtes "GET" lorsque "dataType" vaut "script" (car il charge "script" en utilisant un tag "script" DOM).

Notes applicables pour JQuery 1.2 : Avec JQuery 1.2, vous pouvez charger du XML présent sur un serveur non localisé sur le même domaine si vous spécifiez un "callback" JSONP ce qui peut être fait par exemple comme ci après : "myurl?callback=?". JQuery remplacera automatiquement "?" avec la méthode correcte à appeler.
Si vous spécifiez le "dataType" à "jsonp", un "callback" sera automatiquement ajouté à votre requête AJAX.

jQuery.ajax( options list )

Vous pouvez trouver ci après la liste des "clés/valeurs", "key/value", que vous pouvez utiliser dans l'objet que vous passez à "$.ajax()" :

• async ( Boolean , Default: true ) :: Par défaut, toutes les requêtes sont asynchrones. Si vous devez utiliser des requêtes synchrones vous devez assigner "false" à cette propriété. Notez que les requêtes synchrones peuvent bloquer temporairement le navigateur et désactiver toutes actions pendant l'exécution de la requête.
• beforeSend ( Function , ) :: "pré-callback" permettant de modifier l'objet XMLHTTPRequest avant son envoi. Utilisez cette option pour personnaliser les headers.
• cache ( Boolean , Default: true, false for dataType "script" ) :: disponible à partir de JQuery 1.2. Si vous assignez "false" à cette option, cela forcera les pages dont vous faites la requête à être chargées "sans cache".
• complete (Function , ) :: permet de déterminer une fonction à appeler lorsque la requête est terminée (succès ou erreur). Deux arguments sont passés à la fonction "callback", l'objet XMLHTTPRequest et un message d'informations.
• contentType ( String , Default: "application/x-www-form-urlencoded" ) :: Si vous souhaitez personnaliser le format de données envoyé au serveur, vous pouvez utilisez cette option. Par défaut, le format d'encodage des formulaires classique est défini.
• data ( Object, String , ) :: Données à envoyer au serveur. Cette valeur est convertie vers une "query string" si n'est pas déjà une chaîne de caractères. La chaîne est ajouté à l'url en cas de requête GET. Voyez "processData" pour contourner ce fonctionnement par défaut. Si un objet est transmis, il doit être de la forme "key/value" , "clé/valeur". Si un "Array" est transmis, JQuery serialize les valeurs multiples pour une même clé (ex : "{foo:["bar1"],["bar2"]}" devient "&foo;=bar1&foo;=bar2").
• dataType ( String , Default: Intelligent Guess (xml or html) ) :: le type de données que vous souhaitez/allez recevoir depuis le serveur. Si aucun type n'est spécifié, JQuery va intelligement passer soit "responseXML" soit "responseText" à fonction "success" "callback" en se basant sur le type MIME de la réponse. Les types disponibles sont les suivants :
  • "xml" : retourne un document XML qui peut être manipulé avec JQuery
  • "html" : retourne du code HTML en tant que "plain/text". Les tags "script" éventuellement disponibles sont évalués lorsqu'ils sont insérés dans le DOM.
  • "script" : évalue la réponse comme du code Javascript et retourne du "plain/text". Désactive le cache lorsque "cache" est utilisée. Note : Cela transformera les requêtes POST cross-domains en requête GET.
  • "json" : évalue la réponse comme du JSON et retourne un objet Javascript.
  • "jsonp" : charge la réponse en JSON en utilisant JSONP . Cela ajoutera "?callback=?" à la fin de l'url pour spécifier le "callback".
  • "text" : une chaîne de caractères "plain/text"
• error ( Function , ) :: fonction à appeler si la requête échoue
• global ( Boolean , Default: true ) :: Permet de contrôler le déclenchement des évènements AJAX associés à une requête. Si vous assignez "false", "ajaxStart" ou "ajaxStop" ne seront pas déclenchés.
• ifModified ( Boolean , Default: false ) :: Permet de rendre la requête "successfull" uniquement si la réponse à changer depuis la dernière requête. Ceci est mis en place en utilisant l'en-tête "Last-Modified" . La valeur par défaut est "false".
• jsonp ( String , ) :: Permet de réécrire la fonction "callback" pour un appel "jsonp". La valeur qui sera remplacée est "callback=?" . La valeur qui sera copié est "onJsonPLoad=?" .
• password ( String , ) :: valeur "password" à utiliser comme réponse à une requête HTTP d'authentification
• processData ( Boolean , ) :: par défaut, les données passées dans l'option "data" comme un objet (techniquement, autre chose qu'une chaîne de caractères) sera transformé en une chaîne de type "query string" avec par défaut le format "application/x-www-form-urlencoded". Si vous souhaitez envoyer des documents DOM purs ou un autre type de données non traitées, assignez "false" à cette propriété.
• success ( Function , ) :: une fonction à appeler lors de retours "successfull" de la requête. Deux arguments sont passé, à savoir la réponse formatté au bon type MIME, et le message d'informations.
• timeout ( Number , ) :: permet de définir un "timeout" en millisecondes (ms) pour l'exécution de la requête. Cela réécrira le "timeout" global si définir via "$.ajaxSetup". Par exemple, vous pouvez utiliser cette propriété pour donner à une requête un temps d'exécution plus long que les autres puisque vous savez que c'est bien le cas.
• type ( String , Default: "GET" ) :: Type de requête HTTP à effectuer. Par défaut "GET". Notez que vous pouvez aussi effectuer des requêtes de type "PUT" ou "DELETE" mais que celles ci ne sont pas supportées par tous les navigateurs.
• url ( String , Default: The current page ) :: URL à charger pour la requête.
• username ( String , ) :: valeur "username" à utiliser comme réponse à une requête HTTP d'authentification

La structure des exemples présentés ci après est différente de celle des autres pages Webjax sur JQuery.
Pour "$.ajax()" les exemples vous sont présentés directement via leur code source sans démo testable.
Cependant les exemples sont choisis pour vous permettre de faire le tour des différents options disponibles pour créer des requêtes AJAX et de comprendre, apprendre rapidement la structure de base d'initialisation de l'objet à utiliser pour les requêtes.

00.a : Charger et exécuter un fichier javascript
$.ajax({ type: "GET", url: "test.js", dataType: "script" });

00.b : Envoyer des données au serveur et notifier l'utilisateur lorsque c'est terminé
$.ajax({ type: "POST", url: "some.php", data: "name=John&location;=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });

00.c : Retrouver la dernière version d'une page HTML
$.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } });

00.d : Charger des données de manière synchrone. Bloque le navigateur pendant que la requête est active. Il est préférable de bloquer toute interaction pour que tout reste en place (vulgairement, que ça ne parte pas en couilles)
var html = $.ajax({ url: "some.php", async: false }).responseText;

00.e : Envoyer un document XML comme données au serveur. En assignant "processData" à "false", la conversion automatique vers une "query string" est désactivée.
var xmlDocument = [create xml document]; $.ajax({ url: "page.php", processData: false, data: xmlDocument, success: handleResponse });

load( url, data, callback )

Charge un contenu HTML depuis un fichier et l'injecte dans le modèle DOM.
Une requête "GET" sera effectuée par défaut mais si vous spécifiez des paramètres une requête "POST" sera effectuée.
Avec JQuery 1.2 vous pouvez spécifier un sélecteur JQuery dans l'url. Faire cela vous permettra de filtrer le contenu HTML arrivant en injectant que les éléments matchant le filtre à prendre en compte.
La syntaxe sera similaire à la chaîne "url #some > selector" .
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

load( url, data, callback )

Tester le sélecteur :

Nuage de tags populaire Webjax :

Le code source de cet exemple est ci après présenté :
$("#links01").load("index.php #nuageTags a");

jQuery.get( url, data, callback )

Charge une page en utilisant une requête "GET".

Cette méthode permet de définir plus simplement sans avoir à utiliser de "$.ajax()" complexes.
Vous pouvez assigner une fonction "callback" qui sera exécutée si et seulement si la requête est "successfull".
Si vous souhaitez utiliser des "callback" pour gérer les erreurs vous devez utiliser "$.ajax()".
La structure des exemples présentés ci après est différente de celle des autres pages Webjax sur JQuery.
Pour "$.ajax()" les exemples vous sont présentés directement via leur code source sans démo testable.
00.f :: Effectuer une requête sur "get.php" mais ne rien faire derrière
$.get("test.php");
00.g :: Effectuer une requête sur "get.php" et envoyer deux variables "name" et "time" en en faisant toujours rien derrière
$.get("test.php", { name: "John", time: "2pm" } );
00.h :: Effectuer une requête sur "get.php" et faire un "alert()" du résultat (HTML ou XML selon le type de résultat)
$.get("test.php", function(data){ alert("Réponse du serveur: " + data); });
00.i :: Effectuer une requête sur "test.cgi" et faire un "alert()" de la réponse avec un "callback"
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){ alert("Réponse du serveur: " + data); });

jQuery.getJSON( url, data, callback )

Charge des données JSON via une requête "GET".
Avec JQuery 1.2, vous pouvez charger des données JSON présentes sur un autre domaine en utilisant un "callback" JSONP qui peut être écrit de la façon suivante : "myurl?callback=?" . JQuery remplacera automatiquement les "?" avec le nom de méthode correct à appeler.
Notez que les lignes après la fonction seront exécutées avant "callback".
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

jQuery.getJSON( url, data, callback )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=colourful&tagmode;=any&format;=json&jsoncallback;=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#myTest03 #images"); if ( i == 3 ) return false; }); });

jQuery.getScript( url, callback )

Charge et exécute un fichier Javascript en utilisant une requête "GET".
Avant JQuery 1.2, "getScript" ne pouvait charger des fichiers que des fichiers javascript provenant du même domaine.
Depuis JQuery 1.2, "getScript" peut désormais charger des fichiers depuis tous les domaines.

Avertissement/Warning : Safari 2 et supérieur n'est pas habilité à évaluer les scripts au sein d'un contexte synchrone. Si vous chargez des fonctions via "getScript", prenez le soin de les appeler après un délai.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

jQuery.getScript( url, callback )

Tester le sélecteur :

Démarrer l'animation

Le code source de cet exemple est ci après présenté :
$.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){ $("#myTest04 #go").click(function(){ $("#myTest04 .block").animate( { backgroundColor: 'pink' }, 1000) .animate( { backgroundColor: 'blue' }, 1000); }); });

jQuery.post( url, data, callback, type )

Charge une page distante en utilisant une requête "HTTP POST".
Ceci est une façon plus simple d'envoyer une requête "HTTP POST" sans avoir à initialiser de "$.ajax()" complexes.
Vous pouvez assigner une fonction "callback" qui sera exécutée si et seulement si la requête est "successfull".
Si vous souhaitez utiliser des "callback" pour gérer les erreurs vous devez utiliser "$.ajax()".
La structure des exemples présentés ci après est différente de celle des autres pages Webjax sur JQuery.
Pour "$.ajax()" les exemples vous sont présentés directement via leur code source sans démo testable.
00.j :: Effectuer une requête sur "test.php" sans rien faire derrière
$.post("test.php");
00.k :: Effectuer une requête sur "test.php" en envoyant 2 variables ("name","time") sans rien faire derrière
$.post("test.php", { name: "John", time: "2pm" } );
00.l :: Effectuer une requête sur "test.php" et faire un "alert()" du résultat (HTML ou XML selon type retourné)
$.post("test.php", function(data){ alert("Data Loaded: " + data); });
00.m :: Effectuer une requête sur "test.cgi" en envoyant deux variables et en fixant un "callback" "sucessfull" faisant un "alert()" de la réponse
$.post("test.cgi", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); });
00.n :: Effectuer une requête sur "test.php" en envoyant deux variables et en fixant un "callback" "successfull" qui fait un "process()", instruction classique de Javascript
$.post("test.php", { name: "John", time: "2pm" }, function(data){ process(data); }, "xml");

01 :: Evènements AJAX , Ajax Events:

ajaxComplete( callback )

Permet d'attacher une fonction qui sera exécutée à chaque fois qu'une requête AJAX sera complétée. Cette méthode est un évènement AJAX ou AJAX Event .
Le XMLHttpRequest et les paramètres utilisés pour la requête sont passés en "callback".

Le code source de cet exemple est ci après présenté :
$("#myTest05 #msg").ajaxComplete(function(request, settings){ $(this).append("<li>Requête complétée.</li>"); });
Ci après le prototype d'appel de la fonction :
function (event, XMLHttpRequest, ajaxOptions) { this; // dom element listening }

ajaxError( callback )

Permet d'attacher une fonction qui sera exécutée à chaque fois qu'une requête AJAX échouera. Cette méthode est un évènement AJAX ou AJAX Event .
Le XMLHttpRequest et les paramètres utilisés pour la requête sont passés en "callback".

Le code source de cet exemple est ci après présenté :
$("#myTest06 #msg").ajaxError(function(event, request, settings){ $(this).append("<li>Erreur lors de la requete vers " + settings.url + "</li>"); });
Ci après le prototype d'appel de la fonction :
function (event, XMLHttpRequest, ajaxOptions, thrownError) { // thrownError only passed if an error was caught this; // dom element listening }

ajaxSend( callback )

Permet d'attacher une fonction qui sera exécutée avant que la requête AJAX ne soit envoyée. Cette méthode est un évènement AJAX ou AJAX Event .
Le XMLHttpRequest et les paramètres utilisés pour la requête sont passés en "callback".

Le code source de cet exemple est ci après présenté :
$("#myTest07 #msg").ajaxSend(function(evt, request, settings){ $(this).append("<li>Starting request at " + settings.url + "</li>"); });
Ci après, le prototype d'appel de la fonction :
function (event, XMLHttpRequest, ajaxOptions) { this; // dom element listening }

ajaxStart( callback )

Permet d'attacher une fonction qui sera exécutée à chaque démarrage de requête AJAX , lorsqu'aucune autre requête n'est active. Cette méthode est un évènement AJAX ou AJAX Event .

Le code source de cet exemple est ci après présenté :
$("#myTest08 #loading").ajaxStart(function(){ $(this).show(); });
Ci après, le prototype d'appel de la fonction :
function () { this; // dom element listening }

ajaxStop( callback )>

Permet d'attacher une fonction à chaque fois d'une requête AJAX se termine. Cette méthode est un évènement AJAX ou AJAX Event .

Le code source de cet exemple est ci après présenté :
$("#myTest09 #loading").ajaxStop(function(){ $(this).hide(); });
Ci après, le prototype d'appel de la fonction :
function () { this; // dom element listening }

ajaxSuccess( callback )

Permet d'attacher une fonction qui sera exécutée à chaque fois qu'une requête AJAX sera complétée avec succès. Cette méthode est un évènement AJAX ou AJAX Event .
Le XMLHttpRequest et les paramètres utilisés pour la requête sont passés en "callback".

Le code source de cet exemple est ci après présenté :
$("#myTest10 #msg").ajaxSuccess(function(evt, request, settings){ $(this).append("<li>Requête terminée avec succès!</li>"); });

02 :: Fonctionnalités supplémentaires , Misc:

jQuery.ajaxSetup( options )

Permet d'assigner des paramètres globaux pour les requêtes AJAX.
Vous pouvez voir la description de "$.ajax()" pour plus de détails sur le nom des options.

Le code source de cet exemple est ci après présenté :
$.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); $.ajax({ data: myData });

serialize( )

Cette instruction permet de "serialize" , sérialiser au sein d'une chaîne de caractères type "query string" les valeurs d'éléments "input". L'instruction sérialisera tous les éléments donnés.

Vous pouvez tester l'exemple en utilisant le formulaire ci après :

serialize( )

Tester le sélecteur :

Single Single2 Multiple Multiple2 Multiple3
check1 check2 radio1 radio2

Le code source de cet exemple est ci après présenté :
function demo12(){ $("#myTest12 :checkbox,#myTest12 :radio").click(showValues); $("#myTest12 select").change(showValues); showValues(); } function showValues() { var str = $("#myTest12 form").serialize(); $("#myTest12 .results").text(str); }

serializeArray( )

Cette instruction "serialize()", sérialise tous les formulaires et éléments de formulaire (comme "serialize()") mais retourne les données au format JSON .
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

serializeArray( )

Tester le sélecteur :

Valeurs loggées :

Single Single2 Multiple Multiple2 Multiple3
check1 check2 radio1 radio2

Le code source de cet exemple est ci après présenté :
function demo13(){ $("#myTest13 :checkbox,#myTest13 :radio").click(showValues); $("#myTest13 select").change(showValues); showValues(); } function showValues() { var fields = $(":input").serializeArray(); $("#myTest13 #results").empty(); jQuery.each(fields, function(i, field){ $("#myTest13 #results").append(field.value + " "); }); }

: 11/03/2008 22:05:32 | : JQuery, ajax, requests, AJAX, requêtes, javascript, framework, ajax, library, jquery, j, query, Framework, Javascript, Library, Ajax, asyncronous, web2.0, ria, dom, cont,

Aucun commentaire enregistré