Navigation par ajax, chargement des pages sans rechargement

Télécharger le projet
Commenter

Description

bonjour, cette forme de navigation est de plus en plus répandus sur le web 2.0.

l'idée est donc de "télécharger" le contenu d'une partie d'une page web, et de l'afficher dans un cadre

Ici j'ai rajouter une navigation par le "#", c'est à dire qu'en cliquant sur précédent on retourne sur le contenu d'avant ; l'idée est en fait de vérifier à intervalle régulier le texte qui se trouve après le # et d'en ajouter le contenu dans le cadre.
(j'ai rajouter un système de cache pour une navigation plus fluide )

Source / Exemple : 


var xhr_object = null; // declaration de la variable
                var longueur_init=0;
		if(window.XMLHttpRequest){ // Firefox 
			  xhr_object = new XMLHttpRequest();} // declaration de lobjet
		else if(window.ActiveXObject){ 
					//IE 6.0 et les plus anciens
				var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
										"MSXML2.XMLHTTP.5.0",
										"MSXML2.XMLHTTP.4.0",
										"MSXML2.XMLHTTP.3.0",
										"MSXML2.XMLHTTP",
										"Microsoft.XMLHTTP");
					for(var i=0; i<XmlHttpVersions.length && !xhr_object; i++){
						try{
							//cree l'objet XmlHttpRequest
							xhr_object = new ActiveXObject(XmlHttpVersions[i])
							}
						catch(error){}
					}

		}else { // XMLHttpRequest non supporté par le navigateur 
			var xhr_object = null;
		}	
var Cache = new Array();
function changePage(hash){
		var page = hash.replace("#","")+".html";
		if(typeof(Cache[page]) == "undefined"){
		xhr_object.open("GET", page, true);
		xhr_object.onreadystatechange = function(){
			if(xhr_object.readyState == 4 && (xhr_object.status == 200 || xhr_object.status == 0)){
			document.getElementById('page').innerHTML = xhr_object.responseText;
			Cache[page] = xhr_object.responseText;
			document.location.hash=hash;
			_Hashencours = hash;
			}
		}
		xhr_object.send(null);
		}else{
		document.getElementById('page').innerHTML = Cache[page];document.location.hash=hash;_Hashencours = hash;}
		
}

var _Hashencours=document.location.hash;
window.onload=function(){if(_Hashencours != ""){changePage(_Hashencours);}else{changePage('accueil');}}

window.setInterval(function(){
			if(_Hashencours != document.location.hash){
					changePage(document.location.hash);
			}
	},100);

Conclusion :


Un seul problème, le fait de cliquer sur précédent sur certain navigateur change toute la page, et pas simplement de hash ... Mais fonctionne parfaitement sous FF. Une solution serait l' UrlRewriting !
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (zulrigh)