Elément XSLT XSL template
Query possède une riche bibliothèque de méthodes (fonctions) pour le développement d’AJAX
jQuery possède une riche bibliothèque de méthodes (fonctions) pour le développement d’AJAX.
Les différents navigateurs mettent en œuvre Ajax différemment, ce qui signifie que si vous adoptez la méthode typique de JavaScript pour mettre en œuvre Ajax, vous devez écrire un code différent pour les différents navigateurs afin de vous assurer que Ajax fonctionne sur tous les navigateurs.
Mais, heureusement, jQuery simplifie le processus de mise en œuvre d'Ajax en prenant soin de ces différences de navigateur. Il propose des méthodes simples telles que load(), $.get(), $.post(), etc. pour mettre en œuvre un Ajax qui fonctionne de manière transparente sur tous les navigateurs.
Dans les prochains chapitres, vous apprendrez à charger des données depuis le serveur ainsi qu'à envoyer et recevoir des données à l'aide des méthodes HTTP GET et POST via jQuery Ajax.
Remarque : Les requêtes Ajax sont déclenchées par le code JavaScript ; votre code envoie une requête à une URL, et lorsque la requête est terminée, une fonction de rappel peut être déclenchée pour traiter la réponse. De plus, comme la demande est asynchrone, le reste de votre code continue à s'exécuter pendant que la demande est traitée.
AJAX = Asynchronous JavaScript and XML.
AJAX est une technique permettant de créer des pages web rapide et
dynamique.
AJAX permet de mettre à jour des pages web asynchrone en échangeant de
petites quantités de données avec le serveur dans les coulisses. Cela
signifie qu'il est possible de mettre à jour certaines parties d'une
page web, sans recharger la page entière.
Vous pouvez en apprendre plus sur AJAX dans notre tutoriel AJAX.
jQuery fournit un riche ensemble de méthodes pour le développement de web AJAX.
Avec AJAX jQuery, vous pouvez demander des données TXT, HTML, XML ou JSON d'un serveur distant en utilisant HTTP Get et HTTP Post.
Et vous pouvez charger des données distantes directement dans certains éléments HTML de votre page web !
La méthode load() jQuery est une fonction d'AJAX simple (mais très puissante). Elle possède la syntaxe suivante :
$(sélecteur) .load (url ,donnees, rappel )
Utilisez le sélecteur pour définir le ou les éléments HTML pour changer le contenu
et le paramètre url pour spécifier une adresse web pour vos données.
Voir l’exemple en haut.
Les deux autres paramètres donnees et rappel ne sont utilisés que dans les cas suivants :
Si vous voulez envoyer des données vers le serveur, vous devez utiliser le paramètre donnees .
Si vous avez besoin déclencher une fonction après achèvement, utilisez le paramètre de rappel . Le paramètre rappel ou callback est une fonction qui doit être exécutée après l'achèvement de la fonction load ()
Pour cela créer un fichier texte « test1.txt » avec le contenu suivant :
Code
Exemple : Copier le code
AJAX n'est pas un langage de programmation.<br>
C'est juste une technique pour créer de<br /> meilleurs applications web et plus interactif.
Placer le fichier texte dans votre serveur dans le même dossier que le fichier html de l'exemple suivant:
Avertissement: Il faut que les deux fichiers soit placés dans un serveur web, si non ajax ne fonctionne pas!
Exemple : Copier le code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery AJAX</title>
<script src = " http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js " ></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div.teste").load('test1.txt');
});
});
</script>
</head>
<body>
<div class="teste"><h2>AJAX va changer le texte dans cet élément div si vous cliquez sur le bouton Changer</h2></div>
<button>Changer </button>
</body>
</html>
En outre, la fonction de rappel peut avoir trois paramètres différents :
responseTxt - Contient le contenu résultant si la demande aboutit.
statusTxt - Contient l'état de la demande (succès ou erreur).
jqXHR - Contient l'objet XMLHttpRequest.
Voici la version modifiée de l'exemple précédent qui affichera le message de réussite ou d'erreur à l'utilisateur en fonction de l'état de la demande.
Code
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery AJAX</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div.teste").load('test1.txt', function(responseTxt, statusTxt, jqXHR){
if(statusTxt == "success"){
alert("Votre nouveau contenu chargé avec succès!");
}
if(statusTxt == "error"){
alert("Erreur: " + jqXHR.status + " " + jqXHR.statusText);
}
});
});
});
</script>
</head>
<body>
<div class="teste"><h2>AJAX va changer le texte dans cet élément div si vous cliquez sur le bouton Changer</h2></div>
<button>Changer </button>
</body>
</html>
$.Ajax(options) est la syntaxe de la fonction d'AJAX de bas niveau.
$.ajax offre plus de fonctionnalités que des fonctions de niveau supérieures comme load, get et post, mais il est aussi plus difficile à utiliser.
L'option paramètre prend les paires name|value définissant les données de l'url, mots de passe, les types de données, filtres, jeux de caractères, fonctions timeout et erreur.
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery la méthode .ajax()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"test1.txt", success:function(result){
$("div h2").html(result);
}});
});});
</script>
</head>
<body>
<h2>Ce texte ne sera pas changé</h2>
<div><h2>Laissez AJAX changer ce
texte</h2></div>
<button>Changer le texle</button>
</body>
</html>
Remarque : Pour tester cet exemple Ajax, vous devez placer les fichiers HTML sur un serveur web. Vous pouvez mettre en place un serveur web local sur votre PC en installant WampServer ou XAMPP. Vous devez ouvrir le fichier de démonstration en utilisant "http://" car Ajax fait des requêtes HTTP.
Note : Les requêtes Ajax ne peuvent être faites que vers les fichiers qui existent sur le même serveur web que celui qui héberge la page à partir de laquelle la requête Ajax est envoyée, pas vers des serveurs externes ou distants pour des raisons de sécurité. C'est ce qu'on appelle la politique same-origin.
Pour une référence complète AJAX jQuery, s'il vous plaît aller à notre référence jQuery AJAX Méthodes .
|
Cours precedent: jQuery manipulation css |
Sommaire de : JQuery |