Zone Webmasters - Ecrire le contenu d'un fichier dans un élement

> Accueil > Codes sources > Code sources JavaScript > AJAX > Ecrire le contenu d'un fichier dans un élement

Ecrire le contenu d'un fichier dans un élement

Par: Rudy | Categorie: AJAX

Description

Code source qui permet d'afficher le contenu d'un fichier externe dans un élément, avec un message d'attente et un système de mise en cache pour ne pas avoir à recharger le même fichier plusieurs fois. (Ajax en mode asynchrone)

Code source

<script type="text/javascript">
<!--

//Fonction qui permet d'ecrire dans un élément

var Ecrire = function Ecrire(id, message)
{
    if (document.getElementById) document.getElementById(id).innerHTML = message;
}

//Tableau de mise en cache

var ContenuPage = new Array();

//Message d'attente

var MsgChargement ='<div id="Chargement">[Chargement]</span><br/>Veuillez patienter...</div>';

//Charger le fichier et l'affiche dans un élément

var Charger = function Charger(id, fichier)
{

	if(ContenuPage[fichier])
	{ 
		Ecrire(id, ContenuPage[fichier]);
	}
	else
	{
		if(window.XMLHttpRequest) obj = new XMLHttpRequest(); //Pour Firefox, Opera,...

		else if(window.ActiveXObject) obj = new ActiveXObject("Microsoft.XMLHTTP"); //Pour Internet Explorer 

		else return(false);
	
		if (obj.overrideMimeType) obj.overrideMimeType("text/xml"); //Évite un bug de Safari

   
		var contenu ='';
		obj.onreadystatechange = function()
		{
			if(obj.readyState == 1)
				Ecrire(id, MsgChargement);
			if(obj.readyState == 2)
				Ecrire(id, MsgChargement);
			if(obj.readyState == 3)
				Ecrire(id, MsgChargement);
			if(obj.readyState == 4)
			{
				if(obj.status == 200)
				{
					contenu = obj.responseText;
					ContenuPage[fichier] = contenu;
				}
				else contenu ="Erreur " + obj.status;
				Ecrire(id, contenu);
			}
		};    
   
		obj.open("GET", fichier, true);
		obj.send(null);
	}
}
-->
</script>

<!-- Exemple d'utilisation -->
<a href="#" onClick="Charger('Contenu','page.php');">Charger contenu</a>
<a href="#" onClick="Charger('Contenu','page2.php');">Charger contenu 2</a>

<div id="Contenu"></div>




Imprimer ce code source




Commentaires

Commentaires



aucun commentaire

Ajouter un commentaire

Vous devez être membre pour commenter ce code source.

>> Inscrivez vous





Faire un lien | Partenaires ©2005-2008 Rudy Onfroy Tous droits réservés Contact | RSS | Plan | Haut