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

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

Par GuillaumeB

Exemple d’Ajax : L’iframe

Vous connaissez probablement l’iframe (<iframe>) en HTML qui consiste à récupérer une page Internet et la présenter sur votre site dans un cadre. Nous allons procéder de cette manière mais en proposant une solution « ajaxée ». En d’autres termes, nos pages se trouveront dans un dossier spécifique, fichiers, et le processus sera opéré à l’aide d’un JavaScript, zebulon.js.

function new_xhr(){ var xhr_object = null; if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject){ try { xhr_object = new ActiveXObject(« Msxml2.XMLHTTP »); } catch (e) { xhr_object = new ActiveXObject(« Microsoft.XMLHTTP »); } } else { alert(« Votre navigateur ne supporte pas les objets XMLHTTPRequest… »); xhr_object = false; } return xhr_object;}function load_page(select) { var xhr2 = new_xhr(); xhr2.onreadystatechange = function(){ if ( xhr2.readyState == 4 ){ if(xhr2.status != 200){ document.getElementById(« content »).innerHTML = »Error code  » + xhr2.status; } else { document.getElementById(« content »).innerHTML = xhr2.responseText; } } else { document.getElementById(« content »).innerHTML = « Chargement en cours …<br /><img src=’loading.gif’ alt= »/> »; } } xhr2.open(« GET », select.split(‘?’)[1]+ ».html », true); xhr2.send(null);}

Quelques explications :
Dans un premier temps, de la ligne 1 à 17, nous définissons l’objet XMLHttpRequest (xhr pour les intimes!). De même que pour l’exemple précédent, nous prenons en compte les navigateurs compatibles avec XMLHttpRequest tels que Firefox ou Safari (ligne 3) ainsi que le cas particulier d’Internet Explorer (ligne 5).
Puis, nous déterminons la fonction qui va recharger le contenu de la page (lignes 18 à 33).
Les fichiers externes chargés par le nouvel élément xhr seront placés dans la section content sur notre index.html. Pendant ce processus, un témoin d’activité apparaîtra, ici il s’agit de l’image loading.gif.

Voici maintenant de manière très basique ce à quoi notre index.html ressemble :

<html><head><link rel= »stylesheet » type= »text/css » href= »style.css » media= »screen » /><script type= »text/javascript » src= »zebulon.js »></script></head><body><a href= »?fichiers/zebulon1″ onclick= »load_page(this.href);return false; »>Page 1</a> |<a href= »?fichiers/zebulon2″ onclick= »load_page(this.href);return false; »>Page 2</a> |<a href= »?fichiers/zebulon3″ onclick= »load_page(this.href);return false; »>Page 3</a> | </p><p id= »content »>Ceci est la page principale</p><p></body></html>

Quelques explications :
Dans la tête de la page (<head>) nous plaçons un lien vers le JavaScript (ligne 4) et la feuille de style (ligne 3). Par souci de clarté, nous n’avons quasiment pas stylisé la page. De la ligne 7 à 9 nous avons construit trois liens vers trois pages extérieures (zebulon1.htmlzebulon2.html et zebulon3.html) localisées dans le dossier fichiers. La fonction Onclick sert à communiquer avec notre JavaScript. Ainsi une fois la page rapatriée, celle-ci sera placée dans la section content comme défini dans zebulon.js. La valeur return false permet de ne pas recharger l’index.html.

Remarques :
Dans la mesure ou les fichiers extérieurs seront intégrés à index.html, il ne faut pas y inclure les balises <html>, <head> ou <body>, mais seulement son contenu brut.

Notre dossier principal contient donc : zebulon.jsstyle.cssindex.html, le dossier fichiers contenant les pages externes. Il ne manque plus qu’à y ajouter notre témoin d’activité, loading.gif.

Voir l’exemple 2c – Télécharger l’exemple

(Vous noterez qu’une fois les pages chargées par le JavaScript, celles-ci sont accessibles immédiatement par la suite.)

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

Installation du système d'exploitation Après avoir effectué nos réglages de la machine virtuelle, nous pouvons maintenant procéder à l'installation du…

Fermer