Accueil > > > NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT
NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT
Information sur la source
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
- 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 !
Sources du même auteur
Sources de la même categorie
Commentaires et avis
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
|
Derniers Blogs
IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|