La méthode $.ajax()
La méthode $.ajax()
-
Objectifs
- Connaitre la méthode $.ajax().
-
$.ajax()et ses paramètres - Lorsque l’on envoie une requête HTTP, on demande quelque chose au serveur.
- Pour spécifier quelle est la ressource ciblée, il faut utiliser le paramètre
urlde$.ajax(): - Le fichier PHP exécuté côté serveur s’appelle more_com.php. C’est un lien relatif, le fichier PHP se trouve donc dans le même répertoire que le fichier JavaScript, et le fichier HTML auquel il est lié.
- Ce code fonctionne, mais il ne fait rien. Pour envoyer des informations au serveur, il faut envoyer une requête de type GET :
- On peut faire passer des paramètres avec GET pour les utiliser côté serveur dans l’array $_GET.
- Pour cela, il faut utiliser le paramètre data :
- Du côté serveur,
$_GET['utilisateur']contiendra la valeur de la variable nom_user. - Il faut spécifier maintenant le type de données à recevoir de PHP avec
dataType. On peut recevoir tout et n’importe quoi : du XML, du HTML, du texte, du JSON… (on utilisera ici du HTML) : - Pour envoyer des informations au serveur avec une requête HTTP, il faut commencer à spécifier un type POST :
- Pour faire passer les variables JavaScript qui contiennent les informations du formulaire au script PHP, il faut utiliser l’argument data :
-
Les paramètres
success,erroretcomplete -
Le paramètre
success - jQuery propose un paramètre pour gérer le retour de la fonction $.ajax() en cas de réussite.
- Le paramètre s’appelle success, et il ne sera exécuté QUE si l’appel AJAX a abouti. Ce paramètre prend en charge une fonction qui sera exécutée :
-
Le paramètre
error - L’argument statut est une chaîne de caractère automatiquement générée par jQuery pour donner le statut de la requête.
- Si l’appel AJAX a rencontré une erreur, le paramètre qui va être employé sera
error. Le paramètre exécute une fonction si l’appel AJAX a échoué : - La fonction exécutée par
errorprend en charges trois arguments : le résultat, le statut, et l’erreur. Le second argument est le même que poursuccess, il ne nous sera pas utile. Le premier est un objet XHR renvoyé par jQuery. Le dernier est une exception : vous pouvez ici placer une chaîne de caractère à afficher à votre visiteur si l’appel AJAX n’a pas fonctionné. -
Le paramètre
complete - Un dernier paramètre de $.ajax() : complete, qui va s’exécuter une fois l’appel AJAX effectué.
- Le paramètre va prendre deux arguments, l’objet resultat dont nous avons parler plus haut ainsi qu’un statut :
- C’est à l’intérieur de ces fonctions qu’il faut traiter la suite des évènements.
- Exemple : ajouter les commentaires reçus du serveur à un fil de commentaires sur une page.
- Imaginons un bloc div portant l’identifiant #commentaires qui contienne les commentaires déjà chargés dans la page. Nous allons y ajouter les commentaires reçus.
-
Exemple
$("#more_com").click(function(){
$.ajax({
url : 'more_com.php' // La ressource ciblée
});
});$("#more_com").click(function(){
$.ajax({
url : 'more_com.php', // La ressource ciblée
type : 'GET' // Le type de la requête HTTP
});
});le type GET est le type que jQuery prend par défaut.
$("#more_com").click(function(){
$.ajax({
url : 'more_com.php', // La ressource ciblée
type : 'GET' // Le type de la requête HTTP.
data : 'utilisateur=' + nom_user;
});
});
$("#more_come").click(function(){
$.ajax({
url : 'more_com.php', // La ressource ciblée
type : 'GET', // Le type de la requête HTTP
/**
* data n'est plus renseigné, on ne fait plus passer de variable
*/
dataType : 'html' // Le type de données à recevoir, ici, du HTML
});
});$("#envoyer").click(function(){
$.ajax({
url : 'send_mail.php', // Le nom du script a changé : c'est send_mail.php
type : 'POST', // Le type de la requête HTTP, ici devenu POST
dataType : 'html'
});
});$("#envoyer").click(function(){
$.ajax({
url : 'send_mail.php',
type : 'POST', // Le type de la requête HTTP, ici devenu POST
// On fait passer les variables au script more_com.php
data : 'email=' + email + '&contenu=' + contenu_mail,
dataType : 'html'
});
});$("#more_com").click(function(){
$.ajax({
url : 'more_com.php',
type : 'GET',
dataType : 'html', // On désire recevoir du HTML
success : function(code_html, statut){
// code_html contient le HTML renvoyé
}
});
});
$("#more_com").click(function(){
$.ajax({
url : 'more_com.php',
type : 'GET',
dataType : 'html',
success : function(code_html, statut){
// success est toujours en place
},
error : function(resultat, statut, erreur){
}
});
});$("#more_com").click(function(){
$.ajax({
url : 'more_com.php',
type : 'GET',
dataType : 'html',
success : function(code_html, statut){
},
error : function(resultat, statut, erreur){
},
complete : function(resultat, statut){
}
});
});// On reprend le même id que dans le précédent chapitre
$("#more_com").click(function(){
$.ajax({
url : 'more_com.php',
type : 'GET',
dataType : 'html',
success : function(code_html, statut){
// On passe code_html à jQuery() qui va nous créer l'arbre DOM !
$(code_html).appendTo("#commentaires");
},
error : function(resultat, statut, erreur){
},
complete : function(resultat, statut){
}
});
});
// Au clic sur le bouton #search je lance la fonction
$('#search').on('click', function(){
// J'initialise le variable box
var box = $('#result');
// Je définis ma requête ajax
$.ajax({
// Adresse à laquelle la requête est envoyée
url: '../inc/search.php',
// Le délai maximun en millisecondes de traitement de la demande
timeout: 4000,
// La fonction à apeller si la requête aboutie
success: function (data) {
// Je charge les données dans box
box.html(data);
},
// La fonction à appeler si la requête n'a pas abouti
error: function() {
// J'affiche un message d'erreur
box.html("Désolé, aucun résultat trouvé.");
}
});
});