jQuery - Ajax
AJAX est un acronyme pour JavaScript et XML asynchrones et cette technologie nous aide à charger des données à partir du serveur sans actualisation de la page du navigateur.
Si vous êtes nouveau avec AJAX, je vous recommande de parcourir notre Tutoriel Ajax avant de continuer.
JQuery est un excellent outil qui fournit un riche ensemble de méthodes AJAX pour développer une application Web de nouvelle génération.
Chargement de données simples
Il est très facile de charger des données statiques ou dynamiques à l'aide de JQuery AJAX. JQuery fournitload() méthode pour faire le travail -
Syntaxe
Voici la syntaxe simple pour load() méthode -
[selector].load( URL, [data], [callback] );Voici la description de tous les paramètres -
URL- L'URL de la ressource côté serveur à laquelle la demande est envoyée. Il peut s'agir d'un script CGI, ASP, JSP ou PHP qui génère des données dynamiquement ou à partir d'une base de données.
data- Ce paramètre facultatif représente un objet dont les propriétés sont sérialisées en paramètres correctement codés à transmettre à la demande. Si spécifié, la demande est effectuée à l'aide duPOSTméthode. Si omis, leGET méthode est utilisée.
callback- Une fonction de rappel appelée après que les données de réponse ont été chargées dans les éléments de l'ensemble correspondant. Le premier paramètre passé à cette fonction est le texte de réponse reçu du serveur et le second paramètre est le code d'état.
Exemple
Considérez le fichier HTML suivant avec un petit codage JQuery -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('/jquery/result.html');
});
});
</script>
</head>
<body>
<p>Click on the button to load /jquery/result.html file −</p>
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>Ici load() lance une requête Ajax vers l'URL spécifiée /jquery/result.htmlfichier. Après le chargement de ce fichier, tout le contenu serait rempli à l'intérieur de <div> étiqueté avec l' étape ID . En supposant que notre fichier /jquery/result.html ne comporte qu'une seule ligne HTML -
<h1>THIS IS RESULT...</h1>Lorsque vous cliquez sur le bouton donné, le fichier result.html est chargé.
Obtenir des données JSON
Il y aurait une situation où le serveur renverrait une chaîne JSON contre votre demande. Fonction utilitaire JQuerygetJSON() analyse la chaîne JSON renvoyée et met la chaîne résultante à la disposition de la fonction de rappel en tant que premier paramètre pour prendre des mesures supplémentaires.
Syntaxe
Voici la syntaxe simple pour getJSON() méthode -
[selector].getJSON( URL, [data], [callback] );Voici la description de tous les paramètres -
URL - L'URL de la ressource côté serveur contactée via la méthode GET.
data - Un objet dont les propriétés servent de paires nom / valeur utilisées pour construire une chaîne de requête à ajouter à l'URL, ou une chaîne de requête préformatée et encodée.
callback- Une fonction appelée lorsque la demande se termine. La valeur de données résultant de la digestion du corps de la réponse sous forme de chaîne JSON est transmise en tant que premier paramètre à ce rappel et l'état en tant que second.
Exemple
Considérez le fichier HTML suivant avec un petit codage JQuery -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('/jquery/result.json', function(jd) {
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>');
$('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.json file −</p>
<div id = "stage" style = "background-color:#eee;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>Voici la méthode de l'utilitaire JQuery getJSON() lance une requête Ajax vers l'URL spécifiée result.jsonfichier. Après le chargement de ce fichier, tout le contenu serait passé à la fonction de rappel qui serait finalement remplie à l'intérieur de <div> étiqueté avec l' étape ID . En supposant que notre fichier result.json a le contenu au format json suivant -
{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}Lorsque vous cliquez sur le bouton donné, le fichier result.json est chargé.
Transmission de données au serveur
Plusieurs fois, vous collectez les entrées de l'utilisateur et vous les transmettez au serveur pour un traitement ultérieur. JQuery AJAX a rendu assez facile la transmission des données collectées au serveur en utilisantdata paramètre de toute méthode Ajax disponible.
Exemple
Cet exemple montre comment transmettre une entrée utilisateur à un script de serveur Web qui renverrait le même résultat et que nous l'imprimerions -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
var name = $("#name").val();
$("#stage").load('/jquery/result.php', {"name":name} );
});
});
</script>
</head>
<body>
<p>Enter your name and click on the button:</p>
<input type = "input" id = "name" size = "40" /><br />
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Show Result" />
</body>
</html>Voici le code écrit en result.php script -
<?php
if( $_REQUEST["name"] ){
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>Vous pouvez maintenant entrer n'importe quel texte dans la zone de saisie donnée, puis cliquer sur le bouton "Afficher le résultat" pour voir ce que vous avez entré dans la zone de saisie.
Méthodes JQuery AJAX
Vous avez vu le concept de base d'AJAX en utilisant JQuery. Le tableau suivant répertorie toutes les méthodes JQuery AJAX importantes que vous pouvez utiliser en fonction de vos besoins de programmation -
| N ° Sr. | Méthodes et description |
|---|---|
| 1 | jQuery.ajax (options)
Chargez une page distante à l'aide d'une requête HTTP. |
| 2 | jQuery.ajaxSetup (options)
Configurez les paramètres globaux pour les requêtes AJAX. |
| 3 | jQuery.get (url, [données], [rappel], [type])
Chargez une page distante à l'aide d'une requête HTTP GET. |
| 4 | jQuery.getJSON (url, [données], [rappel])
Chargez les données JSON à l'aide d'une requête HTTP GET. |
| 5 | jQuery.getScript (url, [rappel])
Charge et exécute un fichier JavaScript à l'aide d'une requête HTTP GET. |
| 6 | jQuery.post (url, [données], [rappel], [type])
Chargez une page distante à l'aide d'une requête HTTP POST. |
| sept | load (url, [données], [rappel])
Chargez du HTML à partir d'un fichier distant et injectez-le dans le DOM. |
| 8 | sérialiser ()
Sérialise un ensemble d'éléments d'entrée en une chaîne de données. |
| 9 | serializeArray ()
Sérialise tous les formulaires et éléments de formulaire comme la méthode .serialize () mais renvoie une structure de données JSON avec laquelle vous pouvez travailler. |
Événements JQuery AJAX
Vous pouvez appeler diverses méthodes JQuery au cours du cycle de vie de la progression de l'appel AJAX. Sur la base de différents événements / étapes, les méthodes suivantes sont disponibles -
Vous pouvez parcourir tous les événements AJAX .
| N ° Sr. | Méthodes et description |
|---|---|
| 1 | ajaxComplete (rappel)
Attachez une fonction à exécuter chaque fois qu'une requête AJAX se termine. |
| 2 | ajaxStart (rappel)
Attachez une fonction à exécuter chaque fois qu'une requête AJAX commence et qu'aucune n'est déjà active. |
| 3 | ajaxError (rappel)
Attachez une fonction à exécuter chaque fois qu'une requête AJAX échoue. |
| 4 | ajaxSend (rappel)
Joindre une fonction à exécuter avant l'envoi d'une requête AJAX. |
| 5 | ajaxStop (rappel)
Attachez une fonction à exécuter chaque fois que toutes les requêtes AJAX sont terminées. |
| 6 | ajaxSuccess (rappel)
Attachez une fonction à exécuter chaque fois qu'une requête AJAX se termine avec succès. |