begin process at 2012 05 28 14:04:34
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Navigation

 > NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT

NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT




 Description

Cliquez pour voir la capture en taille normale
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

  • 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);
		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 !

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture DEFILEMENT DE BANNIERE PUBLICITAIRE ; ROTATION DE CADRE
Source avec Zip Source avec une capture EFFET DE SURBRILLANCE EN JAVASCRIPT
Source avec Zip Source avec une capture TELECHARGEMENT SANS RECHARGER LA PAGE
Source avec Zip Source avec une capture FADEIN EFFET DE FONDU, ANIMATION D'OPACITE TOUT EN JAVASCRIP...

 Sources de la même categorie

Source avec Zip Source avec une capture ANTI-ROBOTS V 1.0 par MacGaliver
Source avec une capture PRÉSENTOIR PAGE/SUJET par tiranus
Source avec Zip Source avec une capture NAVIGATEUR INTERNET HAVRET par HAVRETos
Source avec Zip WMANAGER.JS : GÉRER LES FICHIERS WMA AVEC WINDOWS MEDIA PLAY... par jdmcreator
Source avec Zip Source avec une capture MENU DE GAUCHE WIN XP par micking

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture MISE EN CACHE D'IMAGES AUTO [AJAX] par Allan007
Source avec Zip Source avec une capture SCROLLBAR CLASS par heycraft
Source avec Zip SYSTÈME D'UPLOAD DE FICHIER SANS RECHARGEMENT DE LA PAGE. par theptitprince
Source avec Zip Source avec une capture TELECHARGEMENT SANS RECHARGER LA PAGE par zulrigh
Source avec Zip Source avec une capture UPLOAD EN AJAX + FLASH (FANCY UPLOAD) par Vagners

Commentaires et avis

Aucun commentaire pour le moment.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

créer une télécommande de navigation [ par aegis64fr ] aegis64Bonjour à tous,J'ai réalisé un site en html et je le trouve un peu ringard.Pour lui donner du fun j'envisage de refaire la page principale sous Problème AJAX et balise <form> [ par Valentino ] Bonjour,J'ai récuperé un petit script qui me permet de faire de l'upload ajax (http://blogs.developpeur.org/cyril/archive/2007/03/24/ajax-et-upload-pa upload d'images sans input de type file et sans AJAX [ par barbe91 ] Bonjour tous le monde, j'ai un très très gros problème en ce moment et après des heures de recherches je ne trouve rien, mais alors rien de rien... angles arrondis et navigation ajax [ par clavz40 ] Bonjour tout le monde, Je créai actuellement un site web et rencontre un petit souci. Je vous explique, j’ai arrondi les angles de mes div via le s Execution d'un JS appelé par AJAX [ par soularix ] Bonjour, Je suis débutant (plutôt amateur) et je n'arrive pas [^^sad1] exécuter un JS appelé par un AJAX. Voici un exemple simplifié de ce que je veu Probleme formulaire et upload photo [ par Romain54000 ] Bonjour, Voila j'ai un script php qui me permet d'uploader une photo dans mon formulaire sans avoir besoin de recharger ma page ou de valider mon for Ajax, url et iframes imbriquées. [ par Ahaezod ] Bonjour J'ai sur ma page une iframe dans laquelle se trouve une seconde iframe. Il faut que lorsque ma deuxième iframe soit chargée, un script Ajax s script de jeu de cadre avec imagette et texte [ par kikizxr ] bonjour, je cherche a faire comme celui du RCT; http://www.rctoulon.com/ le cadre "a la une", "fil l'infos" j ai deja ce bout de script mais je ne s Script ajax/Php [ par Mickael33480 ] Bonjour à tous, Je vous contact car j'ai besoins d'un coups de main par rapport à un script que j'essaye de faire. Je débute en Javascript/Ajax et là ajouter un niveau menu CSS [ par ju0123456789 ] Bonjour, j'ai un menu deroulant vertical sur un niveau, mais je n'arrive pas à le mettre sur 2 niveaux, en CSS. Voici mon HTML : [code=html] PORT


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,671 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales