Clients  
|
Qu'est-ce qu'AJAX et comment l'utiliserAJAX veut dire Asynchronous JavaScript and XML. En clair, c'est un moyen de faire une requête HTML (vers une page, ou un script) et d'afficher (à l'aide du DHTML) le résultat de la requête sans être obligé de recharger la page actuelle. Ça permet d'atteindre un niveau de dynamisme proche à une application standard (comme Word par exemple). L'idée derrière l'AJAX date de bien longtemps. C'est avec Internet Explorer 5 que Microsoft introduit l'objet XMLHttpRequest qui est toujours utilisé aujourd'hui. Depuis, presque tous les fureteurs supportent cet objet. Pour comprendre AJAX, il suffit de comprendre ces 3 étapes faciles :
Tout ce passe en JavaScripts. 1 - Créer un objet XMLHttpRequestPour créer l'objet, vous devez tenir compte des différents fureteurs. IE utilise un objet ActiveX, les autres fureteurs utilisent l'objet JavaScripts XMLHttpRequest. Tout d'abord, on essaie de créer l'objet standard en JavaScripts. Si ça ne marche pas, on essaie une des saveurs d'Internet Explorer.
try {
// Mozilla, Firefox, Opera et le reste du monde.
req = new XMLHttpRequest();
}
catch (error) {
try {
// IE
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error) {
try {
// IE
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (error) {
req = false;
}
}
}
À partir de maintenant, l'utilisation de l'objet se fait de la même façon que ce soit la version d'IE ou de Firefox. XMLHttpRequest
2 - Faire une requêteUne fois l'objet créé, on fait une requête avec celui-ci.
req.open("GET", "/hello.php", true);
req.onreadystatechange = a_sFunction;
req.send(null);
La méthode open() prend 3 paramètres :
La méthode onreadystatechange() permet d'indiquer, quelle fonction JavaScripts va être appelé une fois la requête lancée. C'est cette fonction qui est responsable de recevoir et afficher le résultat de la requête. (Nous verrons plus bas comment écrire cette fonction.) La méthode send() lance la requête. 3 - Recevoir et afficher la réponseUne fois la requête effectuée, nous devons attendre la réponse et agir une fois celle-ci parvenus. Plus haut nous avons défini avec la méthode onreadystatechange() une fonction qui recevra la réponse. Il est temps de créer celle-ci.
function a_sFunction
{
if(req.readyState == 4)
{
var response = req.responseText;
document.getElementById(ajaxResponse).innerHTML = response;
}
}
Pour connaître le statut de la requête, nous devons utiliser la propriété readyState. Une fois la réponse disponible (if(req.readyState == 4)), nous pouvons utiliser la méthode responseText() pour convertir la réponse en string et ensuite afficher celle-ci dans un <div> avec la fonction innerHTML() ExempleVoici un exemple plus complet (que vous pouvez tester ici). ajax_exemple.html<html>
<head>
<script>
function AJAX(a_sURL, a_sDiv)
{
if (a_sURL != undefined)
{
this.m_sURL = a_sURL;
}
if (a_sDiv != undefined)
{
this.m_sDiv = a_sDiv;
}
if (this.m_Request != undefined)
{
this.m_Request.abort();
delete this.m_Request;
}
this.m_Request = this.createReqestObject();
var m_This = this;
this.m_Request.onreadystatechange = function() {m_This.handleResponse()};
this.m_Request.open("GET", this.m_sURL, true);
this.m_Request.send(null);
}
AJAX.prototype.m_sURL = undefined;
AJAX.prototype.m_sDiv = undefined;
AJAX.prototype.m_Request = undefined;
AJAX.prototype.createReqestObject = function()
{
var req;
try {
// Mozilla, Firefox, Opera et le reste du monde.
req = new XMLHttpRequest();
}
catch (error) {
try {
// IE
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error) {
try {
// IE
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (error) {
req = false;
}
}
}
return req;
}
AJAX.prototype.handleResponse = function()
{
if (this.m_Request.readyState == 4)
{
// On regarde pour 0 à cause d'un bug dans Firefox.
if (this.m_Request.status == "200" || this.m_Request.status == "0")
{
var content = getById(this.m_sDiv);
content.innerHTML = this.m_Request.responseText;
if (this.onDraw != undefined)
{
this.onDraw();
}
}
else
{
if (this.onError != undefined)
{
this.onError({status:this.m_Request.status, statusText:this.m_Request.statusText});
}
}
delete this.m_Request;
}
else
{
getById(this.m_sDiv).innerHTML = "<img src='/images/working.gif' alt='En traitement...'>";
}
}
function getById(a_id)
{
if (document.getElementById)
{
return document.getElementById(a_id);
}
else if (document.all)
{
return document.all[a_id];
}
else if (document.layers)
{
return document.layers[a_id];
}
return null;
}
</script>
<script>
function Envoyer()
{
var URL = 'ajax_exemple.php?nom=' + escape(document.forms['form'].fNom.value);
var ajax = new AJAX(URL, 'reponse');
}
</script>
</head>
<body>
<form id='form'>
<p>Veuillez indiquez votre nom : <input type="textbox" id="fNom" onKeyUp="javascript:Envoyer();"</p>
</form>
<div id="reponse"></div>
</body>
</html>
ajax_exemple.php
<?php
// Desactiver la cache.
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate( "D, d M Y H:i:s") . " GMT" );
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
// Nous devons utiliser urldecode() car javascript transmet le tout à l'aide de la fonction escape() (' ' devient '%20')
// Nous devons utiliser htmlspecialschars() pour éviter les attaques de type XSS.
// Et nous utilisons utf8_encode() car à moins de spécifier autre chose dans le header, la réponse retourner doit être en utf-8.
echo "Bonjour ". utf8_encode(htmlspecialchars(urldecode($_GET['nom'])));
?>
 Cet article vous a plu? Lisez mes autres articles pour découvrir d'autres trucs.Sébastien Brodeur Il est strictement interdit de reproduire ce texte sans la permission écrite de l'auteur. Commentaire(s)John Doe - 2006-12-02 08:49:04
cool
John Doe - 2006-12-14 15:07:11
sympa :)
Sébastien Brodeur - 2007-02-23 17:42:03
J'ai corrigé plusieurs petits bugs avec Firefox. J'espère que cette nouvelle version de l'article vous plaira.
Hybrid - 2007-03-21 06:48:25
Article intéréssant
Jimmy - 2007-04-03 06:23:41
exEmple, ça s'écrit avec un e.
Sébastien Brodeur - 2007-04-09 07:36:23
Merci Jimmy.
Le français est ma bête noir. Je corrige le tout ce soir. Frédérick St-Laurent - 2007-07-07 16:03:42
Sébastien a du se mélanger avec l'anglais!
John Doe - 2008-06-15 02:59:23
Attention, getAllResponseHeaders() retourne les entetes HTTP, et pas HTML
John Doe - 2008-06-15 03:00:51
oups : // Desactiver la cache.
cache est masculin Sébastien Brodeur - 2008-06-15 23:11:18
Merci, j'ai ajusté le texte :-)
Reno - 2008-07-15 12:39:23
la réponse retourner => la réponse retournée
highness - 2008-10-05 08:53:08
merci pour la piste
francois - 2008-12-13 03:44:05
sympa merci !
gino - 2009-03-28 11:26:57
ca serait intéressant peut etre de mettre un petit délais pour les requetes plus complex, afin de ne pas faire une requete a chaque lettre ajouter
Ibrahim - 2009-12-13 08:39:21
Merci beaucoup
Ajouter un commentaire |
Les gens qui ont consulter cet article, ont aussi consultez ceux-ci : |
||||||||||||||||||
Mes blogs
Haut de la page
Imprimmer cette page