Article 1 Ajax

Comment faire entrer votre site
dans l're du Web 2.0 avec AJAX

Par Matthieu - Dveloppement Facile
Date de publication : 21 juillet 2014
Formation AJAX pour crer des sites et des applications web dynamiques
travers six cours complets en vido, accompagns d'exemples de codes sources, crez
des sites et des applications web dynamiques grce AJAX.
Dcouvrez pourquoi et comment utiliser AJAX et apprenez le mettre en uvre dans vos
sites web
Vous verrez comment utiliser l'objet XMLHttpRequest.
Commentez cet article :
Comment faire entrer votre site dans l're du Web 2.0 avec AJAX par Matthieu - Dveloppement Facile
I - Introduction..............................................................................................................................................................3
II - Pourquoi et comment utiliser AJAX avec des exemples d'applications................................................................ 3
III - Mettez en uvre AJAX JavaScript dans vos sites Web...................................................................................... 3
IV - La technique pour utiliser XMLHttpRequest avec AJAX......................................................................................6
V - La stratgie avance de XMLHttpRequest et AJAX - partie 1..............................................................................8
VI - La stratgie avance de XMLHttpRequest et AJAX - partie 2...........................................................................10
VII - Comment utiliser AJAX avec des fichiers txt.................................................................................................... 12
VIII - Recevez gratuitement la formation "Javascript Facile".................................................................................... 14
IX - Remerciements................................................................................................................................................... 14
-2-
Le contenu de cet article est rdig par Dveloppement Facile et est mis disposition selon les termes de la Licence Creative Commons Attribution - Partage dans
les Mmes Conditions 3.0 non transpos. Les logos Developpez.com, en-tte, pied de page, css, et look & feel de l'article sont Copyright 2013 Developpez.com.
http://programmation-facile.developpez.com/tutoriels/ajax/comment-faire-entrer-votre-site-dans-ere-web-2-0-avec-ajax/
I - Introduction
Vous avez srement entendu parler des concepts AJAX, du Web 2.0
Ce qui se cache derrire ces termes la mode est trs simple apprendre, en utilisant une mthode de formation
structure, pas pas et oriente pratique.
Avec la mthode "Dveloppement Facile", vous allez apprendre dvelopper des applications web la fois
performantes et que vos visiteurs adoreront !
Retrouvez un extrait de la formation gratuite "JavaScript Facile", compose de plus de 40 cours professionnels pour
vous aider progresser rapidement dans la matrise du langage JavaScript.
II - Pourquoi et comment utiliser AJAX avec des exemples d'applications

AJAX est l'acronyme d'Asynchronous JavaScript and XML.
Dcouvrez une prsentation de son utilisation et de ses avantages,
ainsi que quelques exemples dans la vido suivante.
Le contenu dynamique ne peut pas tre affich dans ce support, veuillez consulter la page en ligne pour le visualiser.
III - Mettez en uvre AJAX JavaScript dans vos sites Web

Dans cette vido, vous allez apprendre utiliser AJAX dans votre site web.
Dcouvrez l'objet XmlHttpRequest, ses attributs et ses mthodes,
tout cela suivi d'un exemple concret.
Ci-dessous, le code de l'exemple de la vido

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.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 insrer dans la page web (dans la balise)
* @return
*/
function modifHTML(sName, sTxt)
{
document.getElementById(sName).innerHTML = "<p>"+sTxt+"<br /></p>";
return;
}
-3-
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 lment dans la premire liste.<br/><br/>
La deuxime liste se met jour toute seule (interrogation d'une base de donnes)
<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 rsultat dans celle de
droite</legend>
<div class="Left">
Famille :
<select name="list1" id="list1" class="ButtonL" onchange="affiche(this.form)">
<option value="" selected="selected"></option>
<option value="Canids">Canids</option>
<option value="Flids">Flids</option>
<option value="quids">quids</option>
<option value="Bovids">Bovids</option>
</select>
-4-
Espces :
<select name="list2" id="list2" class="ButtonL">
<option>buffle</option><option>taureau</option><option>vache</option><option>yack</option><option>zbu</option><
</div>
</fieldset>
</form>
</center>
</body>
</html>
<?php
/**
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'], $aCo

);
$s_sqlSelect = "SELECT èspece` FROM ànimals` WHERE `famille` = '".$_POST["family"]."'";
$s_sqlSelect .= " ORDER BY èspece`";
$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 requte a russi ?
if ($oResult)
while( $oSqlObject = mysqli_fetch_object($oResult) )
echo 's.options[s.options.length] = new Option("'.$oSqlObject->espece.'");';
// Dconnexion.
$bClose = mysqli_close($oConnect);
?>
-- /**
----

-5-
--
--
Contributor(s) :
--
*/
-- ---------------------------------------------------------- Structure de la table ànimals`

-DROP TABLE IF EXISTS ànimals`;
CREATE TABLE IF NOT EXISTS ànimals` (
ìd` int(11) NOT NULL AUTO_INCREMENT,
`famille` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
èspece` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (ìd`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=19 ;
--- Contenu de la table ànimals`
-INSERT INTO ànimals` (ìd`, `famille`, èspece`) VALUES
(1, 'Bovids', 'vache'),
(2, 'Bovids', 'taureau'),
(3, 'Bovids', 'zbu'),
(4, 'Bovids', 'buffle'),
(5, 'Bovids', 'yack'),
(6, 'Canids', 'chien'),
(7, 'Canids', 'loup'),
(8, 'Canids', 'renard'),
(9, 'Canids', 'lycaon'),
(10, 'quids', 'ne'),
(11, 'quids', 'cheval'),
(12, 'quids', 'zbre'),
(13, 'Flids', 'chat'),
(14, 'Flids', 'lynx'),
(15, 'Flids', 'puma'),
(16, 'Flids', 'tigre'),
(17, 'Flids', 'lion'),
(18, 'Flids', 'lionne');
IV - La technique pour utiliser XMLHttpRequest avec AJAX

Compltez vos connaissances sur l'objet XMLHttpRequest grce cette vido,
et dcouvrez un exemple concret d'utilisation la fin.
Ci-dessous, l'exemple de code

<!DOCTYPE html>
<html lang="fr">
<head>
<!-/**
Contributor(s) :
-6-
*/
-->
<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;
/**
* vrifie 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, Opra, IE7)
{
oXhr = new XMLHttpRequest();
alert("oui - (Mozilla, Firefox, Safari, Konqueror, Opra, 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="Vrifier oXhr" onclick="getOxhr();" /></p>
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
-7-
V - La stratgie avance de XMLHttpRequest et AJAX - partie 1

Dcouvrez les options avances de XMLHttpRequest.
Ce cours est suivi d'un exemple concret.
Ci-dessous, l'exemple de code

<!DOCTYPE html>
<html lang="fr">
<head>
<!-/**
Contributor(s) :
*/
-->
body{
font-family: Arial;
}
</style>
var oXhr = 0;
/**
*/
function getOxhr(sFileLoad)
{
{
console.log("oui - (Mozilla, Firefox, Safari, Konqueror, Opra, IE7 - xhr est un " + oXhr);
}
{
console.log("oui - IE 5, IE 5.5, IE 6 - xhr est un " + oXhr);
}
else
{
return;
}
oXhr.onreadystatechange = function()
{
oDiv = document.getElementById("leDiv");
if(oXhr.readyState == 1)
-8-
oDiv.innerHTML += "<br />Status: 1 (loading)<br />";

if (oXhr.readyState == 2)
oDiv.innerHTML += "Status: 2 (loaded)<br />";
oDiv.innerHTML += "Status: 3 (interactive)<br />";
oDiv.innerHTML += "Status: 4 (complete)<br />";
// rcupre la rponse du serveur
if(oXhr.readyState==4 && oXhr.status==200)
{
console.log("Fichier transmis");
oDiv.innerHTML += "Rponse du serveur : <br />";
document.getElementById("returnTxt").value = oXhr.responseText;
}
}
oXhr.open("GET", sFileLoad, true);
oXhr.send(null);
}
</script>
</head>
<body>
<header>
</header>
<br /><br />
<div id="leDiv">La Mthode Dveloppement 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('07XMLHttpRequest-avance.txt');" /></p>
<p><input type="submit" id="btnId5" value="Charger le fichier xml" onclick="getOxhr('07XMLHttpRequest-avance.xml');" /></p>
<br /><br />
<footer>
<hr>
</footer>
</body>
</html>
Ci-dessous, le contenu du fichier texte 07-XMLHttpRequest-avance.txt.

Contributor(s) :
Ci-dessous, le contenu du fichier xml 07-XMLHttpRequest-avance.xml

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

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>
<nom>Del</nom>
<prenom>Matthieu</prenom>
<email>matthieu@dev-facile.com</email>
</personne>
<nom>Barr</nom>
<prenom>Alice</prenom>
<email>alice@dev-facile.com</email>
</personne>
<nom>Roge</nom>
<prenom>Marine</prenom>
<email>marine@dev-facile.com</email>
</personne>
<nom>Audra</nom>
<prenom>Aurlia</prenom>
<email>aurelia@dev-facile.com</email>
</personne>
</annuaire>
VI - La stratgie avance de XMLHttpRequest et AJAX - partie 2

Dernire vido consacre XMLHttpRequest.
Vous allez dcouvrir de nouvelles mthodes et leurs mise en oeuvre dans un exemple concret.
L'exemple de code de la vido (Vous pouvez reprendre les fichiers texte et xml de l'exemple prcdent) :
<!DOCTYPE html>
<html lang="fr">
<head>
<!-/**
- 10 -

Contributor(s) :
*/
-->
body{
font-family: Arial;
}
</style>
var oXhr = 0;
/**
*/
function getOxhr(sFileLoad)
{
{
}
{
}
else
{
return;
}
{
// Rcupre la rponse du serveur
{
oDiv.innerHTML += "Rponse du serveur : <br />";
document.getElementById("returnTxt").value = oXhr.responseText;
// Affiche les en-ttes HTTP
console.log( oXhr.getAllResponseHeaders() );
console.log( "---> Content-type" );
console.log( oXhr.getResponseHeader("Content-type") );
- 11 -
}
}
oXhr.send(null);
}
</script>
</head>
<body>
<header>
</header>
<br /><br />
<p><input type="text" name="returnTxt" id="returnTxt" size="269" value="" /></p>
<br /><br />
<footer>
<hr>
</footer>
</body>
</html>
VII - Comment utiliser AJAX avec des fichiers txt

Dans la vido suivante, dcouvrez la rcupration et l'analyse du texte
Ci-dessous, le code de la vido

<!DOCTYPE html>
<html lang="fr">
<head>
<!-/**
Contributor(s) :
*/
-->
body{
- 12 -
font-family: Arial;
#reponseServeur {
width: 750px;
font-size: 14px;
margin: 10px;
padding: 5px;
background-color: #5882FA;
}
</style>
var oXhr = 0;
/**
* Chargement d'informations depuis le serveur via AJAX.
*/
function getOxhr(sFileLoad, sCmd)
{
{
}
{
}
else
{
return;
}
{
// Rcupre la rponse du serveur
{
}
}
// Si c'est une commande dans un fichier texte

if( sCmd == "cmd")
eval(oXhr. responseText);
else
document.getElementById("reponseServeur").innerHTML = oXhr.responseText;

oXhr.send(null);
- 13 -
}
</script>
</head>
<body>
<header>
</header>
<br /><br />
<p><input type="submit" id="btnId6" value="Charger la commande js" onclick="getOxhr('09-ajaxjs.txt', 'cmd');" /></p>
<div id="reponseServeur">Chargement en attente...</div>
<br /><br />
<footer>
<hr>
</footer>
</body>
</html>
Le contenu du fichier 09-ajax-js.txt ci-dessous.

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 cration d'applications performantes,
vous pouvez recevoir gratuitement la formation JavaScript Facile avec des cours pas pas, accompagns des codes
source comments.
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 dcouvrir comment utiliser la technologie AJAX, la syntaxe XML, XSL, le DOM, la gestion des
vnements, les tableaux array, les classes Math, Date
Formation Javascript Facile !
Cliquez ici pour recevoir gratuitement la Formation JavaScript Facile !
IX - Remerciements
Merci beaucoup l'quipe de rdaction de Developpez.com de contribuer la diffusion de ce tutoriel.
J'adresse galement un merci tout particulier Malick SECK pour sa relecture orthographique.
- 14 -

Article 1 Ajax

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Article 1 Ajax

Transféré par

Droits d'auteur :

Formats disponibles

Comment faire entrer votre site

dans l're du Web 2.0 avec AJAX

Date de publication : 21 juillet 2014

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

III - Mettez en uvre AJAX JavaScript dans vos sites Web

Ci-dessous, le code de l'exemple de la vido

$aConnect['ip'] = "mysql"; // le serveur

$oConnect = mysqli_connect($aConnect['ip'], $aConnect['login'], $aConnect['password'], $aConnect['database'], $aCo

The Initial Developer of the Original Code is

the Initial Developer. All Rights Reserved.

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

IV - La technique pour utiliser XMLHttpRequest avec AJAX

Ci-dessous, l'exemple de code

V - La stratgie avance de XMLHttpRequest et AJAX - partie 1

Ci-dessous, l'exemple de code

oDiv.innerHTML += "<br />Status: 1 (loading)<br />";

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

The Initial Developer of the Original Code is

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

The Initial Developer of the Original Code is

VI - La stratgie avance de XMLHttpRequest et AJAX - partie 2

the Initial Developer. All Rights Reserved.

VII - Comment utiliser AJAX avec des fichiers txt

Ci-dessous, le code de la vido

// Si c'est une commande dans un fichier texte

oXhr.open("GET", sFileLoad, true);

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

VIII - Recevez gratuitement la formation "Javascript Facile"

Vous aimerez peut-être aussi