jQuery et Ajax – Cours PDF

Qu’est-ce que AJAX ?

AJAX est une technologie utilisée pour faciliter les changements de données en temps réel et les mises à jour sur une page sans nécessiter de rechargement de page.

AJAX est synonyme de Javascript asynchrone et XML.

Expliquant cela:

Asynchrone: La réponse du serveur ne doit pas être immédiate, comme le fait un chargement de page. D’autres choses peuvent arriver entre-temps.

Javascript: Le langage côté client que vous utilisez pour faire des requêtes et gérer les réponses du serveur XML: Le format souvent utilisé pour transmettre des données entre Javascript et le serveur.

Extrait de cours

jQuery fournit le support pour Ajax.

load()

Une des méthodes les plus simples est la méthode load(). Elle permet d’envoyer une requête Ajax vers une URL et d’insérer la réponse obtenue dans l’élément sélectionné par le sélecteur :

$(sélecteur).load(url);

Par exemple, supposons qu’une page PHP getVilles.php accepte le nom d’un pays comme paramètre et renvoie comme réponse la liste des villes de ce pays. On peut charger dans un élément dont le id est villes la liste des villes du Canada comme ceci :

$(‘#villes’).load(‘getVilles.php?pays=Canada’);

Cette méthode accepte aussi un deuxième sélecteur, fourni avec l’URL et séparés par un espace. Seuls les éléments ciblés par ce deuxième sélecteur seront chargé par la méthode.

Par exemple :

$(‘#villes’).load(‘getVilles.php?pays=Canada p’);

Charge dans l’élément de id villes tous les paragraphes inclus dans la réponse envoyée par getVilles.php.

Au lieu d’être fournis avec l’URL, les paramètres de la requête peuvent être fournis sous-forme d’un deuxième argument de la méthode. Dans ce cas, c’est la requête http POST qui est utilisée. Il faut donc que la ressource invoquée (ici la page getVilles.php) en tienne compte :

$(‘#villes’).load(‘getVilles.php’,{pays:’Canada’});

Finalement, on peut ajouter comme dernier argument une méthode de callback qui sera invoquée dès que la requête est traitée. Cette méthode reçoit 3 arguments : la réponse obtenue, le statut de la requête et l’objet XMLHTTPRequest utilisé. Par exemple :

$(‘#villes’).load(‘getVilles.php’,{pays:’Canada’},

function( response, status, xhr ) {

if (status == ‘error’ ) {

alert(‘Erreur : ‘+ xhr.status + ‘ ‘ + xhr.statusText);

}

});

Profitez de ce manuel de formation en PDF pour comprendre mieux le JQuery et enrichir votre connaissance.

Commencez à télécharger ce cours adapté pour vous et à apprendre JQuery.

get()
La méthode get() est similaire à load() . Il y a 2 différences de base entre les 2 méthodes :
1. get( ) envoie toujours une requête GET, alors que load() envoie une requête POST si on
lui transmet les paramètres sous -forme d’un objet JavaScript ;
2. load() charge la réponse dans l’élément indiqué dans le sélecteur tandis que get()
transmet la réponse à une mét hode de callback qui décide quoi en faire.
Par exemple :
$.get(‘getVilles.php’,{pays:’ Canada ‘},function(data,status){
$(‘#villes’).html(data);
})
post()
Cette méthode est similaire à get (), sauf qu’elle envoie une requête POST.
getJSON()
Cette méthode est similaire à get (), sauf qu’elle considère que le type de réponse est JSON . La
réponse est donc automatiquement analysée avec la méthode parseJSON() et convertie vers un
objet ou un tableau JavaScript . Pour que cette analyse réussisse, il faut que réponse suive les
règles de JSON. En particulier, les propriétés et leurs val eurs doivent être entourées de double
qu otes ( » « ).