Le site officiel de jesus2099 (oh yeah)

blog-notes: XMLHttpRequest : Chargement à la volée d'une portion de page

Archives

01 juin 2005

XMLHttpRequest : Chargement à la volée d'une portion de page

Introduction

Il existe un moyen de charger une partie d'une page web sans recharger la page entièrement.

Comment faire?

En utilisant l'objet XMLHttpRequest! J'ai testé mon code dans les navigateurs suivants avec lesquels il est compatible:

  • Opera 8
  • Firefox 1
  • Internet Explorer 6
  • Internet Explorer 5
  • Netscape 7

Il faut écrire un petit javascript à mettre dans un fichier js référencé sur la page principale comme ceci, par exemple:

<head>
...
<script type="text/javascript" src="utils.js">
</script>
...
</head>

Voilà le code qu'il faut écrire dans ce fichier javascript:

Ensuite, dans la page principale, il suffit d'appeler:

loadXMLdoc("url", "id", "Chargement...");

Où url est l'adresse de la page à charger, id est l'identifiant de l'objet dans lequel on veut afficher le contenu de la page et où le troisième paramètre (optionnel) est le message à afficher pendant le chargement.

Un exemple

Après avoir cliqué sur le bouton ci-après, la page 20050601listeFichiersHtml.php sera chargée et son résultat apparaîtra ci-dessous!

(^_^)

À propos

Ici ça n'est pas le cas mais si votre morceau de page contient des caractères spéciaux unicodes par exemple, il faut bien spécifier l'encodage. Ici, en php:

header("Content-Type: text/html; charset=utf-8");

On peut tester si le chargement s'est bien effectué ou afficher une alerte, ouvrir une fenêtre... tout ce qu'on veut! C'est le principe de chargement progressif utilisé sur gmail.com. Moi, je l'utilise dans mon blog, pour l'affichage des catégories.

Ce code est juste un exemple; on peut, outre le statut 200 qui signifie que la requête s'est bien passée, gérer le statut 304 (page non rechargée car identique au cache), 404 (page non trouvée), 301 (requête redirigée). Voir la liste complète des codes d'erreur et des statuts HTTP dans le chapitre suivant.

En gros, dans mon cas il me suffit de tester si le statut est < 400

if(statut < 400) { ...

Si c'est vrai alors il n'y a pas d'erreur et on peut afficher le résultat.

Référence

Je me suis inspiré de ces pages (jibbering, apple, w3schools, ...), en modifiant le code pour permettre de faire plusieurs chargement simultanés. Ces pages contiennent toutes les explications détaillées.

Voici aussi la liste des statuts HTTP 1.1.

jesus2099 . 15:33 . Poster ce message

6 commentaire(s)

bonjour,
je voudrais me servir de ce code mais je ne sais pas dans quoi mettre loadXMLdoc("url", "id", "Chargement...");
ce que j'ai à charger est une page html contenant du texte et des images.
Merci de bien vouloir m'aider.

Blogger alexletiti . 31/10/05 20:47

Salut Alex,
J'ai bien reçu ton email et j'y répondrai bientôt (je rentre de vacances)!

Blogger jesus2099 . 04/11/05 08:56

Bonjour,

Juste un petit mot pour te remercier de ton petit script qui tourne sur mon forum et mon chat (avec un setInterval) pour le raffraichissement des messages et des connectés. Parfait !!!

Anonymous thierrysudfr . 24/03/06 08:33

Salut Thierry, je suis bien content de t'avoir été utile !

Blogger jesus2099 . 05/07/06 16:45

Bien content que ça marche chez toi, mais est-ce que ça marche chez mac ? Dans ce cas, c'est la solution à beaucoup de problèmes !
Jusqu'à présent je devais travailler avec des iframes cachées...

Blogger kato . 22/09/06 21:33

Salut Kato !
C'est rigolo qu'un Kato écrive à Jesus2099 (^_^)

Je pense que le code doit fonctionner sur Mac ... Il me semble que je l'ai testé. Enfin, maintenant, j'utilise un truc tout fait — c'est la même chose mais j'ai l'impression que c'est mieux fait.
Ça s'appelle prototype et voici pas mal de docs.

Si tu veux un exemple, regarde le code source de ma page d'accueil. Je l'utilise pour afficher un message spécial dans la langue du visiteur (fr, vi, ja ou en)

Bonne chance !

Blogger jesus2099 . 22/09/06 23:25

Ici pas de langage SMS du style eh mé c tro for t tou puiçan toa !. Si je suis de bonne humeur et que j'ai le temps je traduis, mais j'ai maintenant plutôt tendance à supprimer.

Ajouter un commentaire ← PAS DE SMS !

Je participe au comité de lutte contre l'usage du langage SMS et des fautes volontaires sur Internet