Actualité du Web

Exemples d’utilisation d’une requête AJAX

ajax1.html.html

Exemple 1: traitement d'une réponse de type texte.

<html>
<head>
<title>Exemple 1</title>
<script type="text/javascript" language = "javascript">
xhr = false;
xhr = new XMLHttpRequest();
/* Fonction de traitement d'une requête Ajax:
*  Cette fonction  accepte deux paramètres
        - url: page qui reçoit la requête
        - destination: objet de la page html dans lequel le résultat sera affecté. 
Tester cet exemple avec les fichiers suivants:
ajax0.txt (Contenu: <strong>Bonjour </strong>
ajax.php (Contenu:

<?php
setlocale((LC_TIME,"fra");
echo '<strong>' . strftime("%A %B %Y"). '</strong> World !';

*/      
function requete(url, destination)
{ 
/* Etape 1 Création d'une instance de l'objet XMLHttpRequest
*************************************************************/


//Vérification si l'instance a été créée avec succès */
if(xhr) {
/* Etape 2: Initilisation de la requête à l'aide de la méthode open
*******************************************************************
*   paramètre 1: Méthode http GET ou POST
*   paramètre 2: url de la page qui reçoit la requête sur le serveur http, si la requete envoie 
                 des paramètres et que la méthode http utilisée est GET alors il faut préciser 
                 aussi la valeur de ces paramètres.
                                Exemeple http://serveur/page?p1=v1&p2=v2.
        paramètre 3: peut prendre deux valeurs
                                true: la requête est envoyée en mode asynchrone 
   									(valeur par défaut).
                                false: la requête est envoyée en mode synchrone
        paramètre 4: nom d'utilisateur (optionnel)
        paramètre 5: mot de passe (optionnel)                                           
*/
xhr.open("GET", url);

/* Etape 3: Envoi de la requête:
********************************
*    la méthode send envoie la requête au serveur http (l'équivalent de la méthode submit()
         d'un formulaire) elle accepte un paramètre qui peut prendre l'une des valeurs suivantes:
                                  * null : si la requête n'admet aucun paramètre ou si la méthode 
											d'envoi est GET.
                                          * liste des paramètres de la requête  
*/
xhr.send(null);

/* Etape 4: Réception de la réponse
***********************************
* Si la requête est envoyée en mode asynchrone, on doit définir un gestionnaire d'événement qui 
* sera appelé à chaque fois que l'état de la requête change, l'état d'une requête ajax est 
* défini par l'attribut xhr.readyState qui prend les valeurs suivantes
                                                0 (requête non initialisée) : avant l'appel de la méthode open
                                                1 (requête initilisée, mais non envoyée au serveur): avant 
													l'appel de la méthoode send
                                                2 (reqête envoyée) :
                                                3 (en cours de réception) 
                                                4 (terminée) : réponse entièrement reçue.
* le gestionnaire d'événement (une fonction javascript) est défini par l'attribut 
*	xhr.onreadystatechange, dans cette exemple 
* une fonction javascript anonyme est utilisée.

*/
xhr.onreadystatechange = function()
{
//objet html dans lequel le résultat sera affecté.
var obj = document.getElementById(destination);
// On teste si la réponse est entièrement téléchargée (xhr.readyState==4 ) et que la page est reçue 
// sans erreur (xhr.status==200)
if (xhr.readyState == 4 && xhr.status == 200) 
{


/**
 Affichage du résultat de la requête
*/
obj.innerHTML = xhr.responseText;
// On peut aussi affihcer le résultat en utilisant cette instruction
/* document.f.zone1.value= xhr.responseText;*/
}// fin if
} //fin fonction anonyme

} //fin if(xhr)
}// fin fonction get
</script>
</head>
<body>
<H1>Exemple 1</H1>
<form name="f">
<input type = "button" value = "Message" onclick = "requete('http://localhost/web2/ajax0.txt',
'te')">

<input type="text" name="zone1" id="zone">

</form>
<div id="te">
<p></p>
</div>
</body>
</html>

Exemple 2: récupération d'un document XML

/* Document XML utilisé dans cet exemple
ajax2.xml:
<root><personne><nom>Larbi</nom><age>3</age></personne>
<personne><nom>Dana</nom><age>4</age></personne>
<personne><nom>Lima</nom><age>32</age></personne></root>
*/
<html>
<head>
<title>Exemple 1</title>

</head>
<body>
<H1>Données XML</H1>
<script type="text/javascript" language = "javascript">
xhr = false;
xhr = new XMLHttpRequest();
if(xhr) {
url="http://localhost/web2/ajax2.xml";
xhr.open("GET", url);
xhr.send(null);
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4 && xhr.status == 200) 
{
// Récupération du document XML
xml= xhr.responseXML;

var str = '';

//personne est de type nodeList qui contient la liste des éléments "personne"
var personne = xml.getElementsByTagName("personne");
for (i=0 ; i<personne.length ; i++)
{   
        //p est un noeud de type Element "personne" 
    p=personne.item(i);
        //p.firstChild est un élément de type nom
        // l'élément nom ne contient qu'un seul noeud de type Text: le nom de la personne. 
        //(ceci sera vrai uniquement si le document xml ne contient aucun espace entre 
        // en dehors des éléments noms et age) on accède à ce noeud  uniqueà l'aide de 
        // firstChild.
    var nom = p.firstChild.firstChild.nodeValue;
    var age = p.lastChild.firstChild.nodeValue;
    str += nom + ' ' + age + '<br />';
/*
 ___ le code suivant fonctionne même si le document xml contient des espaces ou des sauts
 ___ de ligne
for (i=0 ; i<xml.getElementsByTagName('personne').length ; i++)
{
    var personne = xml.getElementsByTagName('personne')[i];
    var nom = personne.getElementsByTagName('nom')[0].firstChild.nodeValue;
    var age = personne.getElementsByTagName('age')[0].firstChild.nodeValue;
    str += nom + ' ' + age + '<br />';
        
}



*/
}// fin for
 
document.write(str);

}// fin if
} //fin fonction anonyme

} //fin if(xhr)
</script>

</body>
</html>

Réagir à cet article

Exemples d’utilisation d’une requête AJAX

1er décembre 2009, par anadeveloppeur

Une petite rectification à faire : A la fin du fichier XML, il faut fermer la balise root
Cordialement

Répondre à ce message

RSS -

IT FORMATION

Rubriques

Actualité du Web

Exemples d’utilisation d’une requête AJAX