Accueil » Dossiers » Tutoriaux » DHTML, Ajax, Drag and Drop : Dynamisez votre site Internet !

DHTML, Ajax, Drag and Drop : Dynamisez votre site Internet !

Par GuillaumeB

Différences entre Ajax et HTML

Afin de comprendre le mécanisme d’Ajax, il est intéressant de le comparer à du HTML standard. Dans le premier exemple ci-dessous (2a), nous avons placé un simple lien vers une seconde page statique. Puisque nous passons d’une page à l’autre, l’URL de la barre d’adresse est différent (default.htm et page2.htm). En revanche, dans notre exemple 2b, la requête a été opérée indirectement à l’aide d’un JavaScript qui a pour fonction d’aller chercher la seconde page et de placer son contenu sur la page default.htm. Puisque ce processus est réalisé du côté serveur, nous ne quittons pas la page default.htm, la barre d’adresse est donc identique – ce qui explique pourquoi il est si difficile de sauvegarder une application en Ajax à un état donné.

Voici un petit exemple (2a) de page classique – Télécharger l’exemple
Voici un  petit exemple (2b) de page utilisant Ajax. – Télécharger l’exemple

Voici le JavaScript utilisé dans l’exemple 2b dans son intégralité :

var http = createRequestObject();function createRequestObject() { var objAjax; var browser = navigator.appName; if(browser == « Microsoft Internet Explorer »){ objAjax = new ActiveXObject(« Microsoft.XMLHTTP »); }else{ objAjax = new XMLHttpRequest(); } return objAjax;}function getNewContent(){ http.open(‘get’,’page2.htm’); http.onreadystatechange = updateNewContent; http.send(null); return false;}function updateNewContent(){ if(http.readyState == 4){ document.getElementById(‘LeContenu’).innerHTML = http.responseText; }}

Quelques explications :
AJAX repose sur un étonnant paradoxe. En effet, la technologie fut introduite en 1998  par le Remote Scripting de Microsoft qui permettait de récupérer certaines données du serveur grâce à un applet Java en communiquant avec un JavaScript. Microsoft a donc développé l’objet XMLHttpRequest dans Internet Explorer 5, vous le connaissez plus vraisemblablement sous le nom d’Active X.  Les développeurs ont mis en avant un projet de standardisation de cette technologie auprès du World Wide Web Consortium (W3C). Aujourd’hui, la plupart des navigateurs modernes tels que Firefox, Safari ou même Internet Explorer 7 embarquent une version standard de l’objet XMLHttpRequest. Cependant, par souci de compatibilité avec les versions antérieures d’Internet Explorer, il faudra procéder à une reconnaissance du navigateur utilisé.

Dans notre JavaScript, cela correspond à la boucle if…else ci-dessous :

var browser = navigator.appName; if(browser == « Microsoft Internet Explorer »){ objAjax = new ActiveXObject(« Microsoft.XMLHTTP »); }else{ objAjax = new XMLHttpRequest(); } return objAjax;}

Le processus général se déroule en trois temps, grâce à trois fonctions introduites en ligne 2, 12 et 18.
C’est l’élément XMLHttpRequest (ligne 8) qui va chercher les nouvelles données (HTTP, XML ou TXT) à l’aide d’une commande HTTP. Ici, nous chargeons la seconde page appelée page2.htm. Puisque la requête est effectuée depuis le serveur même, l’action est donc désynchronisée par rapport à l’utilisateur. C’est la fonction updateNewContent(), en ligne 18, qui placera le contenu de page2.htm directement sur default.htm et plus précisément dans la section (<div>) identifiée par le mot-clé LeContenu (ligne 20).

5 Commentaires
0

Vous aimerez aussi

5
Poster un Commentaire

avatar
5 Fils de commentaires
0 Réponses de fil
0 Abonnés
 
Commentaire avec le plus de réactions
Le plus populaire des commentaires
0 Auteurs du commentaire
dan4Glups0lucifer Auteurs de commentaires récents
  S’abonner  
plus récent plus ancien Le plus populaire
Notifier de
lucifer
Invité
lucifer

J’aimerai savoir (l’exemple 3b) comment faire en sorte que les éléments qui ont pour class "exeception" ne puissent pas posséder l’effet du drag and drop ?

En effet si dans notre div, on a un champ input (par exemple) eh bien on ne peut pas remplir ce champs.

Sinon c’est un très bon tuto 😛

Anonyme
Invité
Anonyme

Tous simplement, comment faire une fonction qui mettent fin à "Drag.init" ?

je vais faire un onclick="stop_Drag();"

Mais comment faire ?

Glups
Invité
Glups

Je n’ai pu faire fonctionner cette application qu’en remplaçant 200 par 0 (au niveau du test sur xhr2.status)
Ensuite, impeccable.

Glups
Invité
Glups
Glups a dit :

Je n’ai pu faire fonctionner cette application qu’en remplaçant 200 par 0 (au niveau du test sur xhr2.status)
Ensuite, impeccable.

(Je parle de l’exemple 2c)

dan4
Invité
dan4

C’est super mais ça ne fait pas un vrai iframe.

Je dois avoir un index avec un autre fichier en iframe ou include qui lui seul se charge quand je clique sur un élément du conteneur.

Plus dans Tutoriaux
Tutoriel VirtualBox : créer une machine virtuelle

Suite des réglages Disquette : Tout comme pour le lecteur CD/DVD, il est également possible d'activer le lecteur de disquette…

Fermer