Vous êtes sur la page 1sur 8

jQuery - 

AJAX
jQuery ajax () Méthode

Exemple
• Modifier le texte d'un élément <div> en utilisant une requête AJAX:
• $("button").click(function(){
    $.ajax({url: "demo_test.txt", type : " GET " ,success: function(result){
        $("#div1").html(result);
    }});
});

• Définition et utilisation
• La méthode ajax () est utilisée pour effectuer une demande AJAX (asynchrone HTTP).
• Toutes les méthodes jQuery AJAX utilisent la méthode ajax (). Cette méthode est surtout utilisée
pour les demandes où les autres méthodes ne peuvent pas être utilisés.
• Syntaxe
• $.ajax({name:value, name:value, ... })
• Les paramètres spécifie une ou plusieurs paires nom / valeur pour la requête AJAX.
jQuery - AJAX Présentation
AJAX est l'art de l'échange de données avec un serveur, et la mise à jour des parties d'une page Web
sans recharger la page entière.

Sans jQuery, AJAX codage peut être un peu difficile!


Ecrire du code AJAX régulier peut être un peu difficile, parce que les différents
navigateurs ont une syntaxe différente pour la mise en œuvre AJAX. Cela signifie que
vous devrez écrire du code supplémentaire pour tester différents
navigateurs. Cependant, l'équipe jQuery a pris soin de cela pour nous, afin que nous
puissions écrire des fonctionnalités AJAX avec une seule ligne de code.

jQuery et AJAX ?

jQuery fournit plusieurs méthodes pour des fonctionnalités AJAX.


Avec les méthodes jQuery AJAX, nous pouvons demander le texte,
HTML, XML ou JSON à partir d'un serveur distant en utilisant HTTP Get
et HTTP Post.
Nous pouvons charger les données externes directement dans les
éléments HTML sélectionnés de notre page Web!       
Méthodes jQuery-AJAX

nous allons examiner les méthodes les plus importantes jQuery-AJAX.

jQuery load() Method


une méthode AJAX simple, mais puissante.
la méthode load () charge les données à partir d'un serveur et met
les données renvoyées dans l'élément sélectionné.
Syntaxe:
$(selector).load(URL,data,callback);
Le paramètre d'URL requis spécifie l'URL que vous souhaitez charger.
Le paramètre Data en option spécifie un ensemble de query-string
paires clé / valeur à envoyer avec la demande.
Le paramètre de rappel (callback) optionnel est le nom d'une
fonction à exécuter après que la méthode load () soit terminée.
• Voici le contenu de notre fichier d'exemple: "demo_test.txt":
• <h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
• L'exemple suivant charge le contenu du fichier "demo_test.txt"
dans un élément <div> spécifique :
• Exemple
• $("#div1").load("demo_test.txt");

• Il est également possible d'ajouter un sélecteur jQuery au


paramètre d'URL.
• L'exemple suivant charge le contenu de l'élément avec id = "p1",
dans le fichier "demo_test.txt", dans un élément <div> spécifique:
• Exemple
• $("#div1").load("demo_test.txt #p1");
• Le paramètre de rappel optionnel spécifie une fonction de rappel à exécuter lorsque la
méthode load () est terminée. La fonction de rappel peut avoir différents paramètres:
• responseTxt - contient le contenu résultant si l'appel réussit
• statusTxt - contient l'état de l'appel
• xhr - contient l'objet XMLHttpRequest

L'exemple suivant affiche une alerte losque la méthode load () est terminée. Si la
méthode load () a réussi, il affiche "contenu externe chargé avec succès!", Et si elle
échoue, il affiche un message d'erreur:

Exemple
• $("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
        if(statusTxt == "success")
            alert("External content loaded successfully!");
        if(statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});
jQuery - AJAX get() and post() Methods

• La methode jQuery get () et post () sont utilisées pour demander des données à partir du serveur avec une
requête HTTP GET ou POST,

jQuery $ .get () Méthode


• Syntaxe: $.get(URL,callback);
• Le paramètre d'URL requis spécifie l'URL que vous souhaitez demander.
• Le paramètre de rappel optionnel est le nom d'une fonction à exécuter si la demande réussit.
• L'exemple suivant utilise la méthode $ .get () pour récupérer des données à partir d'un fichier sur le serveur:
• Exemple
• $("button").click(function(){
    $.get("demo_test.asp", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});
jQuery $ .post () Méthode
• La méthode $ .post () demande des données à partir du serveur en utilisant une requête HTTP POST.

• Syntaxe: $.post(URL,data,callback);

• Le paramètre d'URL requis spécifie l'URL que vous souhaitez demander.


• Le paramètre de données en option spécifie certaines données à envoyer avec la demande.
• Le paramètre de rappel optionnel est le nom d'une fonction à exécuter si la demande réussit.
• L'exemple suivant utilise le $ .post () pour envoyer des données avec la demande:
• Exemple
• $("button").click(function(){
    $.post("demo_test_post.asp",
    {
        name: "Donald Duck",
        city: "Duckburg"
    },
    function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

Vous aimerez peut-être aussi