I. Introduction

Vous avez sûrement entendu parler des concepts AJAX, du Web 2.0…
Ce qui se cache derrière ces termes à la mode est très simple à apprendre, en utilisant une méthode de formation structurée, pas à pas et orientée pratique.
Avec la méthode "Développement Facile", vous allez apprendre à développer des applications web à la fois performantes et que vos visiteurs adoreront !
Retrouvez un extrait de la formation gratuite "JavaScript Facile", composée de plus de 40 cours professionnels pour vous aider à progresser rapidement dans la maîtrise du langage JavaScript.

II. Pourquoi et comment utiliser AJAX avec des exemples d'applications

AJAX est l'acronyme d'Asynchronous JavaScript and XML.
Découvrez une présentation de son utilisation et de ses avantages,
ainsi que quelques exemples dans la vidéo suivante.

III. Mettez en œuvre AJAX JavaScript dans vos sites Web

Dans cette vidéo, vous allez apprendre à utiliser AJAX dans votre site web.
Découvrez l'objet XmlHttpRequest, ses attributs et ses méthodes,
tout cela suivi d'un exemple concret.


Ci-dessous, le code de l'exemple de la vidéo

 
Sélectionnez
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document DOM en JavaScript</title>
    
    <script type="text/javascript">

    /**
     * Modifie une balise HTML
     * @param  {[type]} sName le nom de la balise (name)
     * @param  {[type]} sTxt  la valeur à insérer dans la page web (dans la balise)
     * @return 
     */
    function modifHTML(sName, sTxt)
    {
        document.getElementById(sName).innerHTML = "<p>"+sTxt+"<br /></p>";
        return;
    }


    function affiche(f)
    {
        var sTxt = "HTML modifié sans recharger la page web ;)<br />";
        
        var l1    = f.elements["list1"];
        var l2    = f.elements["list2"];
        var index = l1.selectedIndex;

        if(index < 1)
            l2.options.length = 0;
        else
        {
            var xhr_object = null;

            if(window.XMLHttpRequest) // Firefox
                xhr_object = new XMLHttpRequest();
            else if(window.ActiveXObject) // Internet Explorer
                xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
            else
            { // XMLHttpRequest non supporté par le navigateur
                alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                return;
            }

            xhr_object.open("POST", "30-ajax.php", true);

            xhr_object.onreadystatechange = function()
            {
                if(xhr_object.readyState == 4)
                    eval(xhr_object.responseText);
            }

            xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            var data = "family="+escape(l1.options[index].value)+"&form="+f.name+"&select=list2";
            xhr_object.send(data);
        }


        modifHTML("write", sTxt);
        return;
    }

    </script>

    </head>

   <body>
    
      
      <center>
          <div id="write"></div>
          <br /><br />
          Choisissez un élément dans la première liste.<br/><br/>
          La deuxième liste se met à jour toute seule (interrogation d'une base de données)
          <br/><br/>
          
          <form class="CenteredForm" name="form_selects" id="form_selects" action="" method="" onsubmit="return false;">
            <fieldset>
              <legend>Faites un choix dans la liste de gauche<br>et observez le résultat dans celle de droite</legend>
              <div class="Left">
                Famille&nbsp;:
                <select name="list1" id="list1" class="ButtonL" onchange="affiche(this.form)">
                <option value="" selected="selected"></option>

                <option value="Canidés">Canidés</option>
                <option value="Félidés">Félidés</option>
                <option value="Équidés">Équidés</option>
                <option value="Bovidés">Bovidés</option>
                </select>
                &nbsp;&nbsp;&nbsp;Espèces&nbsp;:
                <select name="list2" id="list2" class="ButtonL">

                <option>buffle</option><option>taureau</option><option>vache</option><option>yack</option><option>zébu</option></select>
              </div>
            </fieldset>
          </form>

      </center>

    </body>

</html>			
			
 
Sélectionnez

<?php
/**

  The Initial Developer of the Original Code is
  Matthieu  - http://www.programmation-facile.com/
  Portions created by the Initial Developer are Copyright (C) 2013
  the Initial Developer. All Rights Reserved.

  Contributor(s) :

 */

header('Content-type: text/html; charset=iso-8859-1');

$aConnect 	= array();

$aConnect['ip']	= "mysql"; // le serveur
$aConnect['login']	= "formation"; // le login
$aConnect['password']	= "password"; // mot de passe
$aConnect['database']	= "formation"; // nom de la base de donnee
$aConnect['port'] = "3306"; // 

$oConnect = mysqli_connect($aConnect['ip'], $aConnect['login'], $aConnect['password'], $aConnect['database'], $aConnect['port'] ); 

$s_sqlSelect  = "SELECT `espece` FROM `animals` WHERE `famille` = '".$_POST["family"]."'";
$s_sqlSelect .= " ORDER BY `espece`";
$oResult = mysqli_query($oConnect,$s_sqlSelect);


//echo "s_sqlSelect : ".$s_sqlSelect;


echo 'var o = null;';
echo 'var s = document.forms["'.$_POST["form"].'"].elements["'.$_POST["select"].'"];';
echo 's.options.length = 0;';

// si la requête a réussi ?
if ($oResult)
	while( $oSqlObject = mysqli_fetch_object($oResult) )
		echo 's.options[s.options.length] = new Option("'.$oSqlObject->espece.'");';

// Déconnexion. 
$bClose = mysqli_close($oConnect); 


?>
 
Sélectionnez

-- /**

--   The Initial Developer of the Original Code is
--   Matthieu  - http://www.programmation-facile.com/
--   Portions created by the Initial Developer are Copyright (C) 2013
--   the Initial Developer. All Rights Reserved.

--   Contributor(s) :

--  */

-- --------------------------------------------------------

--
-- Structure de la table `animals`
--

DROP TABLE IF EXISTS `animals`;
CREATE TABLE IF NOT EXISTS `animals` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `famille` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `espece` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=19 ;

--
-- Contenu de la table `animals`
--

INSERT INTO `animals` (`id`, `famille`, `espece`) VALUES
(1, 'Bovidés', 'vache'),
(2, 'Bovidés', 'taureau'),
(3, 'Bovidés', 'zébu'),
(4, 'Bovidés', 'buffle'),
(5, 'Bovidés', 'yack'),
(6, 'Canidés', 'chien'),
(7, 'Canidés', 'loup'),
(8, 'Canidés', 'renard'),
(9, 'Canidés', 'lycaon'),
(10, 'Équidés', 'âne'),
(11, 'Équidés', 'cheval'),
(12, 'Équidés', 'zèbre'),
(13, 'Félidés', 'chat'),
(14, 'Félidés', 'lynx'),
(15, 'Félidés', 'puma'),
(16, 'Félidés', 'tigre'),
(17, 'Félidés', 'lion'),
(18, 'Félidés', 'lionne');
					
			

IV. La technique pour utiliser XMLHttpRequest avec AJAX

Complétez vos connaissances sur l'objet XMLHttpRequest grâce à cette vidéo,
et découvrez un exemple concret d'utilisation à la fin.


Ci-dessous, l'exemple de code

 
Sélectionnez

 <!DOCTYPE html> 
<html lang="fr"> 
<head>
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	 -->  
	<title>HTML5 JavaScript AJAX</title> 
	<meta charset="UTF-8"> 
	
	
	<style type="text/css">
	
	body{
	    font-family: Arial;
	}
	
	</style>
	
	<script type="text/JavaScript">
	
	var oXhr = 0; 
	
	/**
	 * vérifie  si la variable oXhr est bien un objet XMLHttpRequest
	 * @return {[type]} [description]
	 */
	function getOxhr()
	{
		if(window.XMLHttpRequest)// Pour les autres navigateurs (Mozilla, Firefox, Safari, Konqueror, Opéra, IE7)
		{
			oXhr = new XMLHttpRequest(); 
			alert("oui - (Mozilla, Firefox, Safari, Konqueror, Opéra, IE7 - xhr est un " + oXhr);
		}
		else if(window.ActiveXObject)// Pour Internet Explorer (IE 5, IE 5.5, IE 6)
		{ 
			oXhr = new ActiveXObject("Microsoft.XMLHTTP");
			alert("oui - IE 5, IE 5.5, IE 6 - xhr est un " + oXhr);
		}       
		else 
		{
			alert("Votre navigateur n'est pas compatible avec AJAX..."); 
			return;
		}
	
		oXhr.open("GET", "06-XMLHttpRequest-content.txt", false);
		oXhr.send(null);
	}
	
	</script>
</head> 

<body>  
	
	<header> 
		<span id="titre">Developpement Facile</span>  
	</header>
	<br /><br />
		
	<form name="form" action="test">
		
	</form>
	
	<p><input type="submit" id="btnId4" value="Vérifier oXhr" onclick="getOxhr();" /></p>
		
	<br /><br />
	<footer> 
		<hr> 
		<p>Copyright www.Developpement-Facile.com 2014</p>  
	</footer> 
</body> 
</html>					
			

V. La stratégie avancée de XMLHttpRequest et AJAX - partie 1

Découvrez les options avancées de XMLHttpRequest.
Ce cours est suivi d'un exemple concret.


Ci-dessous, l'exemple de code

 
Sélectionnez

<!DOCTYPE html> 
<html lang="fr"> 
<head>
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	 -->  
	<title>HTML5 JavaScript AJAX</title> 
	<meta charset="UTF-8"> 
	
	
	<style type="text/css">
	
	body{
	    font-family: Arial;
	}
	
	</style>
	
	<script type="text/JavaScript">
	
	var oXhr = 0; 
	
	/**
	 * vérifie  si la variable oXhr est bien un objet XMLHttpRequest
	 * @return {[type]} [description]
	 */
	function getOxhr(sFileLoad)
	{
		if(window.XMLHttpRequest)// Pour les autres navigateurs (Mozilla, Firefox, Safari, Konqueror, Opéra, IE7)
		{
			oXhr = new XMLHttpRequest(); 
			console.log("oui - (Mozilla, Firefox, Safari, Konqueror, Opéra, IE7 - xhr est un " + oXhr);
		}
		else if(window.ActiveXObject)// Pour Internet Explorer (IE 5, IE 5.5, IE 6)
		{ 
			oXhr = new ActiveXObject("Microsoft.XMLHTTP");
			console.log("oui - IE 5, IE 5.5, IE 6 - xhr est un " + oXhr);
		}       
		else 
		{
			alert("Votre navigateur n'est pas compatible avec AJAX..."); 
			return;
		}
			
		
		oXhr.onreadystatechange = function()
		{ 
			oDiv = document.getElementById("leDiv");  
			
			if(oXhr.readyState == 1)
				oDiv.innerHTML += "<br />Status: 1 (loading)<br />";
			
			if (oXhr.readyState == 2)
				oDiv.innerHTML += "Status: 2 (loaded)<br />";
			
			if (oXhr.readyState == 3)
				oDiv.innerHTML += "Status: 3 (interactive)<br />";
			
			if (oXhr.readyState == 4)
				oDiv.innerHTML += "Status: 4 (complete)<br />";
			
			// récupère la réponse du serveur
			if(oXhr.readyState==4 && oXhr.status==200)
			{
				console.log("Fichier transmis");
				oDiv.innerHTML += "Réponse du serveur : <br />";
				document.getElementById("returnTxt").value = oXhr.responseText;
			}	
		}
	
		oXhr.open("GET", sFileLoad, true);
		oXhr.send(null);
	
	}
	
	</script>

</head> 

<body>  
	<header> 
		<span id="titre">Developpement Facile</span>  
	</header>
	<br /><br />
		
	<div id="leDiv">La Méthode Développement Facile</div>
	
	<p><input type="text" name="returnTxt" id="returnTxt" size="269" value="" /></p>
	<p><input type="submit" id="btnId4" value="Charger le fichier txt" onclick="getOxhr('07-XMLHttpRequest-avance.txt');" /></p>
	<p><input type="submit" id="btnId5" value="Charger le fichier xml" onclick="getOxhr('07-XMLHttpRequest-avance.xml');" /></p>
	
	
	<br /><br />
	<footer> 
		<hr> 
		<p>Copyright www.Developpement-Facile.com 2014</p>  
	</footer> 
</body> 
</html>					
			

Ci-dessous, le contenu du fichier texte 07-XMLHttpRequest-avance.txt.

 
Sélectionnez


  The Initial Developer of the Original Code is
  Matthieu  - http://www.programmation-facile.com/
  Portions created by the Initial Developer are Copyright (C) 2013
  the Initial Developer. All Rights Reserved.

  Contributor(s) :

Ci-dessous, le contenu du fichier xml 07-XMLHttpRequest-avance.xml

 
Sélectionnez

<?xml version="1.0" encoding="utf-8"?>
<!-- 
/**

  The Initial Developer of the Original Code is
  Matthieu  - http://www.programmation-facile.com/
  Portions created by the Initial Developer are Copyright (C) 2013
  the Initial Developer. All Rights Reserved.

  Contributor(s) :

 */
 --> 
<annuaire>

	<personne class = "developpeur">
		<nom>Zuri</nom>
		<prenom>Adeline</prenom>
		<telephone>06 65 12 36 25</telephone>
		<email>adeline@dev-facile.com</email>
	</personne>

	<personne class = "developpeur">
		<nom>Del</nom>
		<prenom>Matthieu</prenom>
		<telephone>06 67 13 36 25</telephone>
		<email>matthieu@dev-facile.com</email>
	</personne>

	<personne class = "developpeur">
		<nom>Barr</nom>
		<prenom>Alice</prenom>
		<telephone>06 67 13 39 69</telephone>
		<email>alice@dev-facile.com</email>
	</personne>

	<personne class = "developpeur">
		<nom>Roge</nom>
		<prenom>Marine</prenom>
		<telephone>06 67 13 12 23</telephone>
		<email>marine@dev-facile.com</email>
	</personne>

	<personne class = "developpeur">
		<nom>Audra</nom>
		<prenom>Aurélia</prenom>
		<telephone>06 77 33 12 23</telephone>
		<email>aurelia@dev-facile.com</email>
	</personne>

</annuaire>

VI. La stratégie avancée de XMLHttpRequest et AJAX - partie 2

Dernière vidéo consacrée à XMLHttpRequest.
Vous allez découvrir de nouvelles méthodes et leurs mise en oeuvre dans un exemple concret.


L'exemple de code de la vidéo (Vous pouvez reprendre les fichiers texte et xml de l'exemple précédent) :

 
Sélectionnez


<!DOCTYPE html> 
<html lang="fr"> 
<head>
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	 -->  
	<title>HTML5 JavaScript AJAX</title> 
	<meta charset="UTF-8"> 
	
	
	<style type="text/css">
	
	body{
	    font-family: Arial;
	}
	
	</style>
	
	<script type="text/JavaScript">
	
	var oXhr = 0; 
	
	/**
	 * vérifie  si la variable oXhr est bien un objet XMLHttpRequest
	 * @return {[type]} [description]
	 */
	function getOxhr(sFileLoad)
	{
		if(window.XMLHttpRequest)// Pour les autres navigateurs (Mozilla, Firefox, Safari, Konqueror, Opéra, IE7)
		{
			oXhr = new XMLHttpRequest(); 
			console.log("oui - (Mozilla, Firefox, Safari, Konqueror, Opéra, IE7 - xhr est un " + oXhr);
		}
		else if(window.ActiveXObject)// Pour Internet Explorer (IE 5, IE 5.5, IE 6)
		{ 
			oXhr = new ActiveXObject("Microsoft.XMLHTTP");
			console.log("oui - IE 5, IE 5.5, IE 6 - xhr est un " + oXhr);
		}       
		else 
		{
			alert("Votre navigateur n'est pas compatible avec AJAX..."); 
			return;
		}
			
		
		oXhr.onreadystatechange = function()
		{ 
			oDiv = document.getElementById("leDiv");  
			
			if(oXhr.readyState == 1)
				oDiv.innerHTML += "<br />Status: 1 (loading)<br />";
			
			if (oXhr.readyState == 2)
				oDiv.innerHTML += "Status: 2 (loaded)<br />";
			
			if (oXhr.readyState == 3)
				oDiv.innerHTML += "Status: 3 (interactive)<br />";
			
			if (oXhr.readyState == 4)
				oDiv.innerHTML += "Status: 4 (complete)<br />";
			
			// Récupère la réponse du serveur
			if(oXhr.readyState==4 && oXhr.status==200)
			{
				console.log("Fichier transmis");
				oDiv.innerHTML += "Réponse du serveur : <br />";
				document.getElementById("returnTxt").value = oXhr.responseText;
	
				// Affiche les en-têtes HTTP
				console.log( oXhr.getAllResponseHeaders() );
				console.log( "--->  Content-type" );
				console.log( oXhr.getResponseHeader("Content-type") );
			}	
		}
	
		oXhr.open("GET", sFileLoad, true);
		oXhr.send(null);
	
	}
	
	</script>

</head> 

<body>  

	<header> 
		<span id="titre">Developpement Facile</span>  
	</header>
	<br /><br />
	
	
	<div id="leDiv">La Méthode Développement Facile</div>
	
	<p><input type="text" name="returnTxt" id="returnTxt" size="269" value="" /></p>
	<p><input type="submit" id="btnId4" value="Charger le fichier txt" onclick="getOxhr('07-XMLHttpRequest-avance.txt');" /></p>
	<p><input type="submit" id="btnId5" value="Charger le fichier xml" onclick="getOxhr('07-XMLHttpRequest-avance.xml');" /></p>
	
	
	<br /><br />
	<footer> 
		<hr> 
		<p>Copyright www.Developpement-Facile.com 2014</p>  
	</footer> 
</body> 
</html>
			

VII. Comment utiliser AJAX avec des fichiers txt

Dans la vidéo suivante, découvrez la récupération et l'analyse du texte


Ci-dessous, le code de la vidéo

 
Sélectionnez

 <!DOCTYPE html> 
<html lang="fr"> 
<head>
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	 -->  
	<title>HTML5 JavaScript AJAX</title> 
	<meta charset="UTF-8"> 
	
	
	<style type="text/css">
	
	body{
	    font-family: Arial;
	}
	
	#reponseServeur { 
		width: 750px;
		font-size: 14px;
		margin: 10px;
		padding: 5px;
		background-color: #5882FA;
	}
	
	</style>
	
	<script type="text/JavaScript">
	
	var oXhr = 0; 
	
	/**
	 * Chargement d'informations depuis le serveur via AJAX.
	 * @return {[type]} [description]
	 */
	function getOxhr(sFileLoad, sCmd)
	{
		if(window.XMLHttpRequest)// Pour les autres navigateurs (Mozilla, Firefox, Safari, Konqueror, Opéra, IE7)
		{
			oXhr = new XMLHttpRequest(); 
			console.log("oui - (Mozilla, Firefox, Safari, Konqueror, Opéra, IE7 - xhr est un " + oXhr);
		}
		else if(window.ActiveXObject)// Pour Internet Explorer (IE 5, IE 5.5, IE 6)
		{ 
			oXhr = new ActiveXObject("Microsoft.XMLHTTP");
			console.log("oui - IE 5, IE 5.5, IE 6 - xhr est un " + oXhr);
		}       
		else 
		{
			alert("Votre navigateur n'est pas compatible avec AJAX..."); 
			return;
		}
			
		
		oXhr.onreadystatechange = function()
		{ 
			oDiv = document.getElementById("leDiv");  
			
			if(oXhr.readyState == 1)
				oDiv.innerHTML += "<br />Status: 1 (loading)<br />";
			
			if (oXhr.readyState == 2)
				oDiv.innerHTML += "Status: 2 (loaded)<br />";
			
			if (oXhr.readyState == 3)
				oDiv.innerHTML += "Status: 3 (interactive)<br />";
			
			if (oXhr.readyState == 4)
				oDiv.innerHTML += "Status: 4 (complete)<br />";
			
			// Récupère la réponse du serveur
			if(oXhr.readyState==4 && oXhr.status==200)
			{
				console.log("Fichier transmis");
	
				// Si c'est une commande dans un fichier texte
				if( sCmd == "cmd")
					eval(oXhr. responseText);
				else
					document.getElementById("reponseServeur").innerHTML = oXhr.responseText;
			}	
		}
	
		oXhr.open("GET", sFileLoad, true);
		oXhr.send(null);
	
	}
	
	</script>
	
</head> 

<body>  

	<header> 
		<span id="titre">Developpement Facile</span>  
	</header>
	<br /><br />
	
	<div id="leDiv">La Méthode Développement Facile</div>
	
	
	<p><input type="submit" id="btnId4" value="Charger le fichier txt" onclick="getOxhr('07-XMLHttpRequest-avance.txt');" /></p>
	
	<p><input type="submit" id="btnId5" value="Charger le fichier xml" onclick="getOxhr('07-XMLHttpRequest-avance.xml');" /></p>
	
	<p><input type="submit" id="btnId6" value="Charger la commande js" onclick="getOxhr('09-ajax-js.txt', 'cmd');" /></p>
	
	<div id="reponseServeur">Chargement en attente...</div>
	
	<br /><br />
	<footer> 
		<hr> 
		<p>Copyright www.Developpement-Facile.com 2014</p>  
	</footer> 
</body> 
</html>					
			

Le contenu du fichier 09-ajax-js.txt ci-dessous.

 
Sélectionnez

alert("Message d'alerte provenant du serveur et encodé dans un fichier texte");

VIII. Recevez gratuitement la formation "Javascript Facile"

Si vous souhaitez aller plus loin dans la création d'applications performantes,
vous pouvez recevoir gratuitement la formation JavaScript Facile avec des cours pas à pas, accompagnés des codes source commentés.
Ainsi, vous progresserez à votre rythme, avec un suivi personnalisé et individuel. Vous avez la possibilité de poser toutes vos questions techniques à la fin de chaque cours.
Vous allez ainsi découvrir comment utiliser la technologie AJAX, la syntaxe XML, XSL, le DOM, la gestion des événements, les tableaux array, les classes Math, Date…

Formation Javascript Facile !
Cliquez ici pour recevoir gratuitement la Formation JavaScript Facile !Cliquez ici pour recevoir gratuitement la Formation JavaScript Facile !

IX. Remerciements

Merci beaucoup à l'équipe de rédaction de Developpez.com de contribuer à la diffusion de ce tutoriel.
J'adresse également un merci tout particulier à Malick SECKMalick SECK pour sa relecture orthographique.