Sébastien Warin

Creative Technologist
& Chief Technology Officer

Perso

Apr.26

26 avril 2006

My Sudoku Day n° 2

Allez 2ème et dernier jour de Sudoku pour moi ^^ J’ai en effet un peu ameiloré mon programme de Sudoku, et je vous presente la version final 1.1 ^^

Les nouveautés sont simples :

Possibilité de charger une grille depuis un fichier
Possibilité d’enregistrer la solution
Changement d’unité de mesure du temps ^^

Ce qui m’a permis de tester mon programme sur d’autre grille parce que jusque la je n’ai fait que resoudre une seule grille et en plus comme me dit Kevin : c’est du niveau Facile !!

Donc j’ai directement attaqué par une grille non pas du niveau facile, ni moyen, ni difficile (ca serai trop facile ^^) mais en niveau diabolique carrement ! Mon fichier TXT ressemble à ca :

# Grille tiré de e-sudoku.fr
# Niveau diabolique
6;0;7;8;0;0;0;0;0
0;0;0;2;4;0;0;0;5
0;3;0;0;0;0;0;0;0
0;7;8;0;0;6;9;0;0
0;0;1;0;0;0;2;0;0
0;0;4;5;0;0;7;1;0
0;0;0;0;0;0;0;3;0
4;0;0;0;9;7;0;0;0
0;0;0;0;0;4;8;0;7

# Grille tiré de e-sudoku.fr

# Niveau diabolique

6;0;7;8;0;0;0;0;0

0;0;0;2;4;0;0;0;5

0;3;0;0;0;0;0;0;0

0;7;8;0;0;6;9;0;0

0;0;1;0;0;0;2;0;0

0;0;4;5;0;0;7;1;0

0;0;0;0;0;0;0;3;0

4;0;0;0;9;7;0;0;0

0;0;0;0;0;4;8;0;7

J’execute mon petit programme « sudokusolver.exe diabolique.txt« , qui me ressout la grille (marre des screenshots, donc on fera sans), me demande de l’enregistrer où je dis « oui », et me créé le fichier :

# SudokuSolver 1.1 by Sebeuh <http://sebeuh.ajsinfo.net>
# Resolution de cette grille en 50ms
# Resolu le 26/04/2006 à 17:48
6;4;7;8;5;1;3;9;2
8;1;9;2;4;3;6;7;5
5;3;2;7;6;9;1;8;4
2;7;8;4;1;6;9;5;3
3;5;1;9;7;8;2;4;6
9;6;4;5;3;2;7;1;8
7;2;6;1;8;5;4;3;9
4;8;3;6;9;7;5;2;1
1;9;5;3;2;4;8;6;7

# SudokuSolver 1.1 by Sebeuh <http://sebeuh.ajsinfo.net>

# Resolution de cette grille en 50ms

# Resolu le 26/04/2006 à 17:48

6;4;7;8;5;1;3;9;2

8;1;9;2;4;3;6;7;5

5;3;2;7;6;9;1;8;4

2;7;8;4;1;6;9;5;3

3;5;1;9;7;8;2;4;6

9;6;4;5;3;2;7;1;8

7;2;6;1;8;5;4;3;9

4;8;3;6;9;7;5;2;1

1;9;5;3;2;4;8;6;7

C’est pas beau ca ?? 😀

Tu remarquera une fois de plus mon ti kevin qu’il me l’a resolu en 0 seconde, c’est pourquoi j’ai du changer d’unité de temps et donc pour etre exate il l’a résolu en 50ms (et 10ms pour la grille facile du 20minutes d’hier) !! Amuse toi a me preparer autant de grille que tu veux, je t’attends demain 🙂

Le code de la nouvelle version du programme console ICI (ps: le moteur n’a pas été modifié, seulement le programme console pour gérer le chargement et l’enregistrement des grilles)

Pour finir, vive le sudoku ^^

Perso,Dev

dotNET,Sudoku

Apr.25

25 avril 2006

3 Sebastien

My Sudoku Day

Le sudoku n’est plus à presenter… Dire que certain ont fait des millions en créant des programmes capables de générer des grilles.. (ca aurait dû Netastate sur ce marché ^^).

Bref toujours est-il que bon nombre de personne s’eclatent ou plutôt se prennent la tête (hein chérie :-)) sur ce genre de casse tête !

Personnellement, j’ai fait mon 1er sudoku ce matin dans le train 🙂 (c’est bien Seb ^^) ! Et j’en suis venu à une conclusion : quitte a se prendre la tête autant se prendre la tête une bonne fois pour toute !!! C’est alors que je me suis mis en tête, a mon arrivée a Supinfo ce matin, de faire un résolveur de Sudoku : c’est ma journée Sudoku 😀

Plusieurs méthodes existent pour resoudre ce genre de problème ! Personnellement j’ai utilisé la méthode du BackTracking (kesako ici) qui consiste a placer les chiffres dès qu’ils sont possibles et de revenir en arrière quand ca ne l’est plus !

Avant :

Après :

Mon petit Kévin remarquera la vitesse de résolution pour cette grille : 0secondes ^^ Tu sais bien que je suis trop rapide pour toi 😀 (j’entends encore « ouai il pu ton algo, c’est de la m**** » ^^)

Bon biensur, dans l’état actuel, c’est assez galère pour entrer la grille dans le programme car elle est directement inscrite en dur dans le code mais vous remarquerez que mon application se compose de 2 fichiers :

Moteur.cs : contenant tout le moteur de résolution du sudoku et donc exploitable depuis n’importe qu’elle application (faudait refaire une belle interface graphique, XAML kevin ?? ^^ ou appli web !)
Program.cs : programme console qui exploite le moteur avec un exemple d’une grille trouvé dans le 20 minutes de ce matin.

Sur ceux je vous souhaite a tous une bonne soirée, et a bientôt 🙂

Sans oublier les sources :

Perso,Dev

dotNET,Sudoku

Apr.21

21 avril 2006

3 Sebastien

Les Complexes, pas complexe !!!

Très souvent en Informatique, on a besoin des maths. Les Complexes en font partie, on les utilisent beaucoup quand on travaille sur des applications graphique 2d/3d ! Personnellement, je les utilisent nottament dans mon simulateur d’immunologie (SimImmuno). Malheuresement, ma plateforme adorée .NET ne comporte pas de classe lié a l’utilisation des Complexes d’où mon idée de faire une structure pouvant manipuler les bases des complexes (operations de base, module, argument, etc..) pour pouvoir jouer avec les complexes dans n’importe quelle application !
La structure que j’ai ecrite nommé Complexe comporte :

1 constructeur pour créer de nouveau complexe :

// Création du complexe 3-i5
Complexe monComplexe = new Complexe(3,-5);

1 2	// Création du complexe 3-i5 Complexe monComplexe = new Complexe(3,-5);

2 accesseurs en get/set pour pouvoir recuperer ou modifier les parties Reelles et Imaginaires du complexe

// Recuperation de la partie Reele dans a : 
double a = monComplexe.Reel;
// Modification de la partie Imaginaire à -8 : 
monComplexe.Imaginaire = -8;

// Recuperation de la partie Reele dans a :

double a = monComplexe.Reel;

// Modification de la partie Imaginaire à -8 :

monComplexe.Imaginaire = -8;

4 accesseurs en lecture seule (get seulement) pour récupérer le Conjugué, le module, l’argument et le carré d’un complexe :

// Conjugué (retourne un nouveau Complexe)  :
Complexe le_conjugue = monComplexe.Conjugue;
// Module (retourne un double) :
double module = monComplexe.Module;
// Argument (retourne un double) :
double argument = monComplexe.Argument;
// Carré du complexe (retourne un nouveau Complexe) :
Complexe au_carre = monComplexe.Carre;

// Conjugué (retourne un nouveau Complexe) :

Complexe le_conjugue = monComplexe.Conjugue;

// Module (retourne un double) :

double module = monComplexe.Module;

// Argument (retourne un double) :

double argument = monComplexe.Argument;

// Carré du complexe (retourne un nouveau Complexe) :

Complexe au_carre = monComplexe.Carre;

1 méthode : Rotation qui retourne un nouveau complexe de la rotation du complexe par un angle (en double) et d’un centre (Complexe)

// Rotation de monComplexe d'angle 3.0 par le centre 2+i4
Complexe nouveau_point = monComplexe.Rotation(3.0,new Complexe(2,4));

1 2	// Rotation de monComplexe d'angle 3.0 par le centre 2+i4 Complexe nouveau_point = monComplexe.Rotation(3.0,new Complexe(2,4));

4 surcharges d’operateurs pour les operations +, -, *, / respectivement addition, soustration, multiplication, division :

Complexe cmp1, cmp2, resultat;
cmp1 = new Complexe(3,-6);
cmp2 = new Complexe(6,7);
// Addition de cmp1 par cmp2
resultat = cmp1 + cmp2;
// Soustraction de cmp1 par cmp2
resultat = cmp1 - cmp2;
// Multiplication de cmp1 par cmp2
resultat = cmp1 * cmp2;
// Division de cmp1 pr cmp2
resultat = cmp1 + cmp2;

Complexe cmp1, cmp2, resultat;

cmp1 = new Complexe(3,-6);

cmp2 = new Complexe(6,7);

// Addition de cmp1 par cmp2

resultat = cmp1 + cmp2;

// Soustraction de cmp1 par cmp2

resultat = cmp1 - cmp2;

// Multiplication de cmp1 par cmp2

resultat = cmp1 * cmp2;

// Division de cmp1 pr cmp2

resultat = cmp1 + cmp2;

Et pour finir 1 surcharge de la methode ToString() afin de pouvoir recuperer le complexe en string sous la forme a+ib :

Complexe monComplexe = new Complexe(4,-5);
Console.WriteLine(monComplexe);
// Affiche a l'ecran : 4-5i

Complexe monComplexe = new Complexe(4,-5);

Console.WriteLine(monComplexe);

// Affiche a l'ecran : 4-5i

Bref il y a toutes les fonctions de bases sur les complexes pour pouvoir les utiliser très facilement dans vos développements 🙂

Screenshot du programme de Demo en mode Console :

Code source du programme console de Demo
~~Code source de ma structure complexe (v1.0)~~
UPDATE :
Code source de ma classe complexe (v1.1 du 22/02/07)

Pas si complexe les complexes maintenant 😀

Perso,Dev,.NET

Complexes,dotNET

Mar.16

16 mars 2006

5 Sebastien

AJAX, XMLHttp et le cache !!

En developpant le projet dotnet (lire mon post du 26/02/06) en XHTML/JS à la sauce AJAX, je me suis heurté à un problème de cache !
En effet que l’on utilise l’objet XMLHttpRequest pour Firefox & Co ou l’objet de IE (Microsoft.XMLHTTP), on appelle la méthode open et send pour récuperer un fichier XML par le code :

objXMLHTTP.open("GET", "http://localhost/demo_ajax/eleves.xml", false);
objXMLHTTP.send(null);
objXML = objXMLHTTP.responseXML;

objXMLHTTP.open("GET", "http://localhost/demo_ajax/eleves.xml", false);

objXMLHTTP.send(null);

objXML = objXMLHTTP.responseXML;

Le problème de cela, c’est qu’une fois le XML téléchargé, le navigateur le met dans son cache ! Si par la suite vous modifiez votre XML, votre application web ne tiendra pas compte des modifications même en rechargant la page (F5) ce qui est un peu embêtant !
Pour remedier à cela, une technique consiste a appeler la methode setRequestHeader pour définir le Cache-Control à no-cache par le code :

 objXMLHTTP.setRequestHeader("Cache-Control","no-cache");

1	objXMLHTTP.setRequestHeader("Cache-Control","no-cache");

Le problème, c’est que ca marche PAS 😀 Enfin du moins sur pas mon Firefox…. ^^

La technique que j’ai implémenté est de passer des parametres uniques dans l’URL de notre fichier XML !
Je m’explique, les adresses URL http://monserveur/monfichier.xml?id=1 et http://monserveur/monfichier.xml?id=2 retourne tous les deux le même fichier à savoir monfichier.xml, ici les parametres n’ont aucune influence coté serveur mais pour le coté client, le navigateur (IE,FF,..) pense que ce sont 2 fichiers differentes car les URL ne sont pas identique et donc on contourne le problème de cache !!
Personnellement, j’utilise pour cela la fonction getTime() de l’objet Javascript Date qui retourne le nombre de millisecondes depuis le 1er Janvier 1970 ! On obtient bien un parametre unique a moins de déregler son horloge au millieme de seconde près ^^.
Le code final:

objXMLHTTP.open("GET", "http://localhost/mon_app/mon_fichier.xml?ms=" + new Date().getTime(), false); objXMLHTTP.setRequestHeader("Cache-Control","no-cache");
objXMLHTTP.send(null); objXML = objXMLHTTP.responseXML;

1 2	objXMLHTTP.open("GET", "http://localhost/mon_app/mon_fichier.xml?ms=" + new Date().getTime(), false); objXMLHTTP.setRequestHeader("Cache-Control","no-cache"); objXMLHTTP.send(null); objXML = objXMLHTTP.responseXML;

Elle est pas belle vie ?? ^^ 🙂

Perso,Dev

AJAX,Javascript,Web 2.0,XMLHttpRequest

Mar.04

4 mars 2006

4 Sebastien

Maudit connecteur d’alimentation !!!

Mon entourage et surtout celui de Supinfo connait mes galères avec le cordon d’alimentation de mon ordinateur portable !!
A chaque fois que je branche mon portable sur secteur cela peut durer plus d’une heure voir ne pas marcher du tout !!! Je dois a chaque fois faire le MacGyver avec un morceau de scotch pour essayer de faire passer le courant !!!
La cause ? Un mauvais contact au niveau du connecteur d’alimentation dans mon portable !
J’ai entierement demonté mon ordinateur pour recuperer la carte mère et analyser le problème avec mon cher ami François dit Phaco 🙂
Le problème venait d’une soudure qui a laché, le connecteur n’etait donc plus attaché ce qui provoquait ces faux contacts ! On a donc désoudé ce connecteur pour le recoler a la super-glue et refaire les soudures ! On a du mettre un petit fil (vive les MacGyver !!) entre deux soudure pour remplacer la pine du connecteur qui avait cassé !!

C’est bô nan ?? 🙂
Une fois les soudure refaitent, remontage et tests !! Ca MARCHE 😀 Fini les missions pour brancher mon portable au secteur !!!!
Quelques photos pour illustrer cette réparation (1er fois que je démonte un portable quand même ^^) :

General,Perso

Bricolage

Mar.02

2 mars 2006

3 Sebastien

Qu’est ce qu’on s’amuse en ASM !!!!

Dans le cadre des cours d’architecture des ordinateurs a Supinfo, je me suis amusé a faire un petit programme COM pour processeur 8086 en assembleur qui calcule la somme des termes des lignes dans une matrice !! (un truc qui sert a rien, je sais !!!)

Le principe est simple, je definie une matrice de 4×3 dans mon programme et il m’affiche le resultat pour chaque ligne !

Exemple matrice nommé tab :

3 4 9

14 11 2

6 4 8

7 5 1

Definie en ASM par :

tab	DW	3,4,9,14,11,2,6,4,8,7,5,1

1	tab DW 3,4,9,14,11,2,6,4,8,7,5,1

Le programme nous affiche :

16 27 18 13

1	16 27 18 13

(car 3+4+9=16, 14+11+2=27, etc….)

Sans en faire tout un roman, voici le code (env. 30 lignes) :

; ==============================================
org  100h		; Structure d'un .COM 
JMP code		; Demarrage du programme

; ======= Variable du tableau de données =======
tab	DW	3,4,9,14,11,2,6,4,8,7,5,1 	; matrice de 4x3

code:
; ============= Init des registres =============
MOV	AX, 0		; AX : Somme par ligne
MOV	CX, 0		; CX : Index du tableau TAB
MOV	DI, 0		; DX : Compteur de ligne

boucle:
; ============== Boucle principale =============
LEA	BX, tab		; Chargement du tableau TAB dans BX
MOV	SI, CX		; Calcul de l'index dans SI
ADD	SI, SI		; 		du tableau TAB
MOV	DX, [BX+SI]	; Mets le tab[SI] dans DX
ADD	AX, DX		; Additionne AX = AX + DX
INC	CX		; Incremente CX pour la boucle
INC	DI		; Incremente DI pour le compteur de ligne
CMP	DI, 3		; Si DI=3, nouvelle ligne (newline)
JE	newline	
CMP	CX, 12		; Si AX = 12, fin du programme (fin)
JGE	fin
JMP 	boucle		; Retour au debut de la boucle

newline:
; ================ Nouvelle ligne ===============
MOV	BL, 10		; Divise AX/10
DIV	BL		; AL = quotien et AH = reste
ADD	AL, 48		; Char ASCII de AL (quotient)
MOV	BH, AH		; Sauvegarde du reste (AH) dans BH
ADD	BH, 48		; Char ASCII de BH (reste)
MOV    	AH, 0Eh		; Fonction d'affichage   
INT    	10h       	; Interruption 1OH : affichage de AL (quotient)
MOV	AL, BH		; Reste (BH) dans AL
INT    	10h  		; Interruption 1OH : affichage de AL (reste)
MOV	AL, 10		; AL = 10  (Saut de ligne = \n en C = char 10 + 13)
INT	10h		; Affiche AL=10
MOV	AL, 13		; AL = 13
INT	10h     	; Affiche AL=13
MOV	DI, 0		; Remet DI a 0
MOV	AX, 0		; Remet AX a 0
JMP	boucle		; Retour au debut de la boucle

fin:
; ================= Fin du programme ==============
RET			; Retourne la main a l'OS

; ==============================================

org 100h ; Structure d'un .COM

JMP code ; Demarrage du programme

; ======= Variable du tableau de données =======

tab DW 3,4,9,14,11,2,6,4,8,7,5,1 ; matrice de 4x3

code:

; ============= Init des registres =============

MOV AX, 0 ; AX : Somme par ligne

MOV CX, 0 ; CX : Index du tableau TAB

MOV DI, 0 ; DX : Compteur de ligne

boucle:

; ============== Boucle principale =============

LEA BX, tab ; Chargement du tableau TAB dans BX

MOV SI, CX ; Calcul de l'index dans SI

ADD SI, SI ; du tableau TAB

MOV DX, [BX+SI] ; Mets le tab[SI] dans DX

ADD AX, DX ; Additionne AX = AX + DX

INC CX ; Incremente CX pour la boucle

INC DI ; Incremente DI pour le compteur de ligne

CMP DI, 3 ; Si DI=3, nouvelle ligne (newline)

JE newline

CMP CX, 12 ; Si AX = 12, fin du programme (fin)

JGE fin

JMP boucle ; Retour au debut de la boucle

newline:

; ================ Nouvelle ligne ===============

MOV BL, 10 ; Divise AX/10

DIV BL ; AL = quotien et AH = reste

ADD AL, 48 ; Char ASCII de AL (quotient)

MOV BH, AH ; Sauvegarde du reste (AH) dans BH

ADD BH, 48 ; Char ASCII de BH (reste)

MOV AH, 0Eh ; Fonction d'affichage

INT 10h ; Interruption 1OH : affichage de AL (quotient)

MOV AL, BH ; Reste (BH) dans AL

INT 10h ; Interruption 1OH : affichage de AL (reste)

MOV AL, 10 ; AL = 10 (Saut de ligne = \n en C = char 10 + 13)

INT 10h ; Affiche AL=10

MOV AL, 13 ; AL = 13

INT 10h ; Affiche AL=13

MOV DI, 0 ; Remet DI a 0

MOV AX, 0 ; Remet AX a 0

JMP boucle ; Retour au debut de la boucle

fin:

; ================= Fin du programme ==============

RET ; Retourne la main a l'OS

Wahou, vive la galère ^^ Heuresement qu’ils ont inventés les langages de haut niveau, parce que voila la galère pour faire un programme relativement simple (….et sans interêt d’ailleur ^^) !

A noter aussi que mon programme ne gere que 2 octects à l’affichage (AH et AL = 8 + 8 = 16bits), ce qui fait que la valeur maximum est 99 à l’affichage, au dessus ca affiche divers caractères !!

Au passage, un grand merci a Alex C. (a.k.a EvilSnake) pour son aide au niveau de la gestion de l’affichage des resultats a l’ecran !! C’est toujours un plaisir de coder avec toi 🙂

Téléchargez le fichier code source ASM

Perso,Dev

ASM,Processeur,SupInfo

Feb.26

26 février 2006

9 Sebastien

AJAX

Dans le cadre de mon projet Dotnet, je me suis mis a utiliser AJAX ^^ C’est pourquoi, je vais brievement vous exposer ce qu’est AJAX avec un petit exemple d’utilisation car je sais que tout le monde préfere la pratique que la théorie !!

AJAX késako ??
Non non je ne fais pas le ménage à l’eau de javel ^^ AJAX c’est tout simplement l’avenir du Web (concept Web 2.0) ! AJAX pour Asynchronous JavaScript And XML (en francais : « XML et Javascript asynchrones ») est une méthode de développement des applications Web !
En effet tous les échanges client<>serveur se font en arrière plan dans des fichiers XML pilotés avec des scripts JS !

Sans AJAX : actuellement, quand vous êtes sur une page A d’un site et que vous demandez la page B, votre navigateur web (IE, Firefox, ..) renvoie une requête HTTP demandant la page B, le serveur vous reponds en vous envoyant tout le code HTML (+ JS, images, CSS, …) de cette page !

Deux inconvenients :

on renvoie une requete HTTP, c’est long, le navigateur devient tout blanc, faut le temps qu’il charge la nouvelle page !!!
et surtout, c’est bête de tout recharger car en général sur un site, la difference entre 2 pages n’est que le contenu; les menus, l’habillage graphique (design) reste identique !!

Avec AJAX : maintenant grâce a AJAX on resoud ces deux problemes :

Avec navigateur charge tout le code HTML de la page A (+ images, css, et scripts JS nottament pour gérer l’AJAX)
Quand vous demandez la page B, votre navigateur ne bouge pas, c’est un script JS qui derrière va venir telecharger un fichier XML contenant juste le contenu de la novelle page !

Deux avantages :

Impression d’instantané, le contenu arrive sans voir le chargement !
Impression d’instantané renforcé par le fait que seul le fichier XML contenant le contenu de la nouvelle page transite par le reseau, ce qui reduit enormement les echanges client<>serveur (le design n’est chargé qu’une seule fois pour la 1er page !)

En une phrase, AJAX va donc révolutionner les applications Web 🙂

Pour plus d’info sur AJAX :http://fr.wikipedia.org/wiki/AJAX
Des exemples AJAX: http://fr.wikipedia.org/wiki/AJAX#Liens_externes

Bon passons à la pratique

Pour cet exemple, on nous allons créer une page qui liste les éléves de ma classe 🙂 Pour cela, nous créons un fichier XML contenant les données :

<?xml version="1.0" ?>
  <supinfo>
  	<student id="48759" sex="M" age="19">Sébastien Warin</student>
  	<student id="45813" sex="M" age="18">Kévin Drouvin</student>
  	<student id="47934" sex="M" age="18">Benoit Scourion</student>
  	<student id="47715" sex="M" age="19">Amaury Balmer</student>
  </supinfo>

<?xml version="1.0" ?>

<student id="48759" sex="M" age="19">Sébastien Warin</student>

<student id="45813" sex="M" age="18">Kévin Drouvin</student>

<student id="47934" sex="M" age="18">Benoit Scourion</student>

<student id="47715" sex="M" age="19">Amaury Balmer</student>

</supinfo>

Vous remarquerez que les ID, Sexe et Age sont contenu dans les attributs de la balise studient alors que les noms sont dans la balise ! (ps: désolé pour les autres éléves, je n’ai pas tout mis, ca veux pas dire que je ne vous aimes pas :-)) L’on nommera ce fichier : eleves.xml

Créons maintenant la page HTML de base doctypé en XHTML 1.0 Strict :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
  	<title>Test AJAX by Sebeuh</title>
  	<SCRIPT LANGUAGE="JavaScript">
  		function update()
  		{
  			// Script AJAX
  		}
  	</SCRIPT>
  </head>
  <body>
  	<h1>Test AJAX</h1>
  	<div id="contenu"></div>
  	<input type="button" name="update" value="Mise a jour AJAX" onclick="javascript:update();" />
  </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Test AJAX by Sebeuh</title>

function update()

{

// Script AJAX

}

</SCRIPT>

</head>

<body>

</body>

</html>

Cette page contient une fonction Javascript : update() qui contiendra tout le code JS pour l’ AJAX, une balise DIV nommé contenu où sera affiché la liste des éléves ainsi qu’un bouton nommé update qui appelera notre fonction update().

Il nous reste plus qu’a ecrire le code de notre fonction update() ! Commencons par definir quelques variables que nous initialiserons :

var objXMLHTTP = null;
var objXML = null;
var browser = null;
if(window.XMLHttpRequest) // Pour Firefox
{
 	objXMLHTTP = new XMLHttpRequest();
 	objXML = document.implementation.createDocument('','doc',null);
 	browser = "FF";
}
else if(window.ActiveXObject) // Pour IE
{
 	objXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");
 	objXML = new ActiveXObject('Microsoft.XMLDOM');
 	browser = "IE";
}
else
 	alert("Votre navigateur ne supporte pas les objets XMLHTTP et XMLDOM... Utilisez IE ou Firefox !!");

var objXMLHTTP = null;

var objXML = null;

var browser = null;

if(window.XMLHttpRequest) // Pour Firefox

{

objXMLHTTP = new XMLHttpRequest();

objXML = document.implementation.createDocument('','doc',null);

browser = "FF";

}

else if(window.ActiveXObject) // Pour IE

{

objXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");

objXML = new ActiveXObject('Microsoft.XMLDOM');

browser = "IE";

}

else

alert("Votre navigateur ne supporte pas les objets XMLHTTP et XMLDOM... Utilisez IE ou Firefox !!");

La variable browser nous permet de savoir si l’on utilise IE ou Firefox (and co comme Opera, etc…) ! En fonction du navigateur, l’on utilise soit l’ActiveX Microsoft XMLHTTP et XMLDOM pour IE ou XMLHttpRequest et createDocument pour les amis de Firefox !

Nous allons maintenant télécharger le XML grace a notre objet objXMLHTTP et stocker dans notre objet objXML grace au code :

objXMLHTTP.open("GET", "http://localhost/demo_ajax/eleves.xml", false);
objXMLHTTP.send(null);
objXML = objXMLHTTP.responseXML;

objXMLHTTP.open("GET", "http://localhost/demo_ajax/eleves.xml", false);

objXMLHTTP.send(null);

objXML = objXMLHTTP.responseXML;

Il nous reste plus qu’a exploiter le contenu du XML pour l’afficher ! Pour cela nous allons définir une variable out qui contiendra le code HTML a afficher dans notre balise DIV contenu ainsi qu’une variable nbEleves pour contenir le nombre d’eleves afin d’en faire une boucle.

var out = "";
var nbEleves = objXML.documentElement.getElementsByTagName("student").length;

1 2	var out = ""; var nbEleves = objXML.documentElement.getElementsByTagName("student").length;

Nous allons maintenant faire une boucle pour le nombre d’eleves de notre fichier XML et remplir notre variable out par le code :

for(var a = 0 ; a < nbEleves ; a++) {
 	var id = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("id");
 	var sexe = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("sex");
 	var age = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("age");
 	if(browser == "IE")
 		var name = objXML.documentElement.getElementsByTagName("student").item(a).text;
 	else
 		var name = objXML.documentElement.getElementsByTagName("student").item(a).textContent;
 	out= out + "ID: " + id + " Sexe: " + sexe + " Age: " + age + " Nom : " + name + " <br />";
}

for(var a = 0 ; a < nbEleves ; a++) {

var id = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("id");

var sexe = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("sex");

var age = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("age");

if(browser == "IE")

var name = objXML.documentElement.getElementsByTagName("student").item(a).text;

else

var name = objXML.documentElement.getElementsByTagName("student").item(a).textContent;

out= out + "ID: " + id + " Sexe: " + sexe + " Age: " + age + " Nom : " + name + " <br />";

}

Vous remarquerez que pour récuperer le contenu d’une balise (et non ses attributs) soit ici le nom de l’eleve, cela differt selon le navigateur que l’on utilise. Sous IE nous utilisons la proprieté text alors que sous Firefox & Co c’est la proprieté textContent.

Il nous reste plus qu’a afficher notre variable out dans notre DIV :

var today = new Date();
var heure = today.getHours() + ":" +today.getMinutes() + ":" +today.getSeconds();
if (document.getElementById)
 	document.getElementById("contenu").innerHTML =  "Mise a jour : " + heure + "<br/>" + out;

var today = new Date();

var heure = today.getHours() + ":" +today.getMinutes() + ":" +today.getSeconds();

if (document.getElementById)

document.getElementById("contenu").innerHTML = "Mise a jour : " + heure + "<br/>" + out;

J’ai rajouté l’heure, cela est biensur facultatif !!

Vous pouvez vous amusez à modifier le contenu dans notre fichier XML (eleves.xml) et cliquez sur le bouton « Mise a jour AJAX » de notre page pour voir que celle ci se met a jour sans pour autant faire un allé-retour sur le serveur 🙂

Cet exemple est certe très simple mais ouvre les pleins de voie, a vous de faire marcher votre imagination… Moi je dis, vive AJAX 😀

(Page complete : https://sebastien.warin.fr/…/ajax.txt)

Perso,Dev

AJAX,Javascript,Web 2.0

Previous Next

Page 4 of 5

Sébastien Warin

Creative Technologist& Chief Technology Officer

Apr.26

My Sudoku Day n° 2

Apr.25

My Sudoku Day

Apr.21

Les Complexes, pas complexe !!!

Mar.16

AJAX, XMLHttp et le cache !!

Mar.04

Maudit connecteur d’alimentation !!!

Mar.02

Qu’est ce qu’on s’amuse en ASM !!!!

Feb.26

AJAX

Creative Technologist
& Chief Technology Officer