Cours Ajax
1. AJAX (Asynchronous JavaScript and XML). 1
4. méthodes de XMLHttpRequest. 2
5. Utiliser un objet XMLHttpRequest. 2
6. Frameworks Javascript lies à Ajax. 3
7. XmlHttpRequest avec jQuery. 3
1. AJAX (Asynchronous JavaScript and XML)
AJAX est un ensemble de technologies du web pour rafraîchir (modifier ou mettre à jour) une partie de page web sans recharger la page complète.
asynchrone = l’appel d’un code serveur en utilisant Ajax n’est pas bloquant. la suite du code javascript est interprétée sans attendre la réponse du serveur
En pratique, le XML a été remplacé par du JSON.
Principe de L’ajax
1. le navigateur envoie une requête HTTP au serveur
2. on peut utiliser la méthode GET ou la m méthode POST
3. le serveur traite la demande (html, php, texte, . . .)
4. la réponse est r récupérée par le navigateur, qui appelle une fonction javascript pour traiter la réponse.
2. AJAX par Javascript
JavaScript intègre nativement une classe appelée XmlHttpRequest (XHR). En l’instanciant, on peut envoyer une requête HTTP vers un serveur grâce à cet objet XHR.
Connaitre si le navigateur supporte la technologie ajax
Avant d’instancier l’objet XMLHttpRequest il faut tester si le navigateur supporte cet objet.
var xhr = null; if ( window.XMLHttpRequest ||window.ActiveXObject )
{
if ( window.ActiveXObject ){ try xhr = new ActiveXObject("Msxml2.XMLHTTP");
catch(e)
xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
else xhr = new XMLHttpRequest(); }
else{ alert("Le navigateur ne supporte pas l'objet XMLHTTPRequest..."); return ;
3. L’objet XMLHttpRequest
Les attributs de XMLHttpRequest
• Status : statut sous forme numerique (ex 200 OK, 404 Not Found)
• statusText : statut sous format texte
• readyState : état de l’objet (0= uninitialized, 1=open, 2=sent, 3=receiving, 4=loaded)
• Onreadystatechange : permet d’attacher un gestionnaire d’évènement ´
• responseText : reponse du serveur sous forme texte ´ (HtML ou JSON)
• responseXML : reponse du serveur sous forme XML
Remarque
Quand les données sont reçues du serveur et qu’elles sont prêtes a être traitées : • readyState = 4 • Status = 200
4. méthodes de XMLHttpRequest
• ouverture d’une connexion pour envoi ou réception de données (GET, POST) : open(method,url,async)
• envoi d’une requête : send(content)
• mettre fin a la requête : abort()
5. Utiliser un objet XMLHttpRequest
var myrequest=getXMLHTTPRequest();
var url=’get_data.php’;
myrequest.open("GET", url, true) ;
myrequest.onreadystatechange=processdata ;
myrequest.send(null) ;
function processdata() {
if (my request.readyState==4) {
if (my request.status==200) {
var mytext=my request.responseText ; document.getElementById("text data").innerHTML=my text ; } } }
6. Frameworks Javascript lies à Ajax
1 Prototype (www.prototypejs.org)
2 Scriptaculous (script.aculo.us)
3 jQuery (jquery.com)
4 Rico (openrico.org)
5 Dojo (dojotoolkit.org)
6 Google Web Toolkit (Java)
7. XmlHttpRequest avec jQuery
Instancier un objet XmlHttpRequest devient extrêmement simple, grâce à la fonction jQuery.ajax() ou $.ajax() :
$.(document).ready(function(){
/* * Utilisons $.ajax pour créer une instance de XmlHttpRequest */
$.ajax();
});
Exemple : soit un fil de commentaire qui se recharge en AJAX en cliquant sur un bouton « plus de commentaires » d'identifiant #more_com.
On va écouter l'évènement click() sur ce bouton et dès qu'il sera réalisé, on instanciera un objet XHR.
$(document).ready(function(){ /* * Ecoutons l'évènement click() */ $("#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;
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){ }
}); }); });