Actualités

AJAX, Fête des fleurs, Lesson 1
clockEcrit par Poil | clock2006-03-27 00:00:00
je viens de faire quelques tests en AJAX et j'avoue que c'est de la balle et que je ne peux m'empêcher de faire partager ma joie =)

la possibilité:
exécuter n'importe quel script php, page html, à partir d'une bête fonction javascript. lui passer des paramètres et afficher le résultat. le tout sans bouger de la page courante.

exemple:
je suis dans une page/script et je voudrais faire une action de sauvegarde de quelques variables ou autre dans une base de données sans avoir à faire "changer de page et effectuer le script, si le résultat est bon revenir à la page d'avant".

pour ça je vais avoir un petit bouton html qui va appeler une fonction javascript "save(valeur)". dans cette fonction je vais pouvoir, grâce à la méthode javascript httprequest (la principale fonction AJAXienne) appeler mon script qui fait le travail dans la base de données, lui passer des paramètres, récupérer le résultat et ensuite je décide d'afficher une alerte pour dire que c'est sauvé. pour vous montrer que c'est pas compliqué voici le code de l'exemple ci-dessus.

la page html (php) :
$la_valeur="chose";
echo "";
?>

le script save.php :
include('fonctions.php');
$la_valeur=$_POST['la_valeur'];
if ( save_la_valeur($la_valeur)) echo "saved";
else echo "pas saved, bugged...";
?>
le code javascript à placer dans head (ou pas) de la page html..
function save(la_valeur) { 
//fonction appelée onclick sur le bouton
http_request = new XMLHttpRequest();
//création de l'objet de requête
http_request.overrideMimeType('text/xml'); 
// apparemment faut mettre ça donc on le met
// la fonction à appeler une fois la requête faite
http_request.onreadystatechange = function() { 
alert_test(http_request); 
};
// la méthode (post ou get) et le nom du script à appeler
// (pour passer des éléments au script faut mettre POST)
http_request.open('POST', "save.php", true);
// quand y'a POST faut mettre ça donc on le met aussi 
http_request.setRequestHeader(
'Content-Type','application/x-www-form-urlencoded'
);
// la liste des valeurs à 
// lui passer sous la forme machin=1&truc=2
http_request.send("la_valeur="+la_valeur);  
// note: si rien à passer au script mettre null dans send()
}
function alert_test(http_request) { 
//fonction appelée une fois la requête faite
if (http_request.readyState == 4) { 
if (http_request.status == 200) { 
// si requête ok
//affichage du responseText 
// (= ce qu'on a mis en echo dans le script save.php)
alert(http_request.responseText);
}
}
}
c'est tout. je pense que ça peut servir à un peu tout plein de truc que ce soit de l'html, du php, du voicexml, ... un very great tuto en anglais et plus complet (traite le cas IE (activeX)) ici: <clic> un jour ça vous servira ;)

Commentaires

 
émotion
clockEcrit par bonsouere | clock2010-05-07 16:09:48
En 2006, Benjqmin découvre Ajax... et apparement, c'est l'émoi, l'émerveillement, une renaissance.
 
Développé par Poil - Graphismes de DarkDaV - Icônes sous licence Creative Commons (famfam, nuovo ...)
Durée de génération : 0.3061408996582 secondes