Je vous propose des astuces sur le développement web, l'environnement windows, des avis sur du hardware ou des jeux vidéos...
Mise à jour le 06/11/2011
Si vous maîtriser les bases du PHP et du Javascript, il n'y a déjà rien à apprendre de plus. Et oui, AJAX, c'est du PHP et du Javascript.
Aussi, le fait de faire des requêtes en AJAX améliore grandement le confort lors de la naviguation sur votre site en évitant les rechargements de pages inutiles.
Pour effectuer vos requêtes, il vous faut un objet javascript bien spécial. Voici une fonction toute prête pour le créer sans entrer dans le détail.
function getXMLHttpRequest() {
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 {
return null;
}
return xhr;
}
Pour l'appeler, il ne vous reste plus qu'a instancier votre objet dans une variable pour travailler avec.
var xhr = getXMLHttpRequest();
Imaginons que j'ai un bloc div que je souhaite remplir avec des données qui varieront au fil du temps. Le meilleur exemple est un panier sur un site de e-commerce.
L'objectif est de mettre à jour ce div à chaque fois que le visiteur clic sur les liens "Ajouter au panier"
Je vais à l'essentiel, sans doctype et autres. Simplement le div à mettre à jour et le lien vers la fonction Javascript
Ajouter au panier !
function contenuPanier() {
var xhr = getXMLHttpRequest(); /* Appel de l'objet XHR */
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
/* La requête vers le fichier PHP est terminée et s'est bien passée */
document.getElementById('panier').innerHTML = xhr.responseText;
}
else if (xhr.readyState < 4) {
/* La requête est en cours */
}
}
xhr.open("GET", "./ajax/ajax_contenuPanier.php, true); /* Appel de base sans paramètres */
xhr.send(null);
}
La fonction contenuPanier() va être la fonction qui va faire la requête en AJAX avec l'objet XHR. Oubliez pas de copier la fonction getXMLHttpRequest.
Ligne 6, on est dans la condition où la requête est effectuée. C'est donc là qu'on effectue ce que le souhaite avec le retour du fichier PHP appelé ligne 15.
Le contenu affiché par le fichier ajax_contenuPanier.php est à récupéré grâce à xhr.responseText.
Ligne 10, on est dans le cas où la requête est en cours. Vous pouvez par exemple gérer ici l'affichage d'une image de chargement.
Lignes 15 et 16, on appele le fichier PHP. Notez que l'on peut passer des paramètres dans l'URL ou encore passer en POST :
xhr.open("GET", "./ajax/ajax_contenuPanier.php?variable1="+variable1, true); /* Appel avec une variable en paramètre */
xhr.open("POST", "./ajax/ajax_contenuPanier.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); /* Spécifique au passage en POST */
xhr.send('idProduit='+idProduit); /* En POST, les paramètres passent ici */
header("Content-Type: text/plain; charset=utf-8"); //Format de retour AJAX, adaptez votre charset
//Faites ce que vous voulez ici. La fonction javascript recevra le contenu des echo et le HTML.
Votre fichier PHP doit donc générer le code HTMl que vous voulez voir dans le bloc div panier.