Discussion :

[gids01]

Bonjour,

J'aimerais réaliser un petit site internet avec AJAX.

Pour cela, j'aimerais avoir une page principale, avec un menu en haut, à droite et à gauche des espaces réservés aux news, ... et au milieu une page Internet.

Lorsque je clique sur un lien ou sur le menu, il n'y a que la page centrale qui est rechargée. Le menu, les news, sont dans un seul fichier et sont chargé que lorsque l'on arrive sur le site.

Est-ce que j'ai été clair?

Comment puis-je réaliser cela à l'aide d'ajax?

Merci pour votre aide

[gids01]

Personne n'a une petite idée pour réaliser cela?

[Giantrick]

Personne n'a une petite idée pour réaliser cela?

Je me permet de remettre une "couche" à cette demande car j'ai la même.

Aujourd'hui il y a plusieurs façon de recharger une page sans recharger les menus (par exemple),
- nous avons les iframes (un peu trop propriétaire à IE à mon goût)
- nous avons les frames qui permette la même chose mais en moins jolie (quoi que)
- nous avons aussi d'autres moyens via les variables en PHP (mais toute la page est rechargé, si l'on n'utilise ni frame ni iframe)

mais comme gids01, j'aimerais savoir si l'on peut avec du javascript ou mieux du AJAX, pointer le résultat d'un lien (menu) vers une zone de la page afin que seule cette partie de la page soit rechargée sans avoir à tout recharger.

Le but est de limiter la bande passsante, ainsi que le temps d'attente pour l'internaute.

Il me semble (mais je suis novice en AJAX) que grâce à cet objet il est possible de ne recharger qu'une partie de la page qui ne change pas...

Merci à vous...

[jeje13009]

Salut,

faites votre mise en page avec des div !!

ensuite il ne vous reste qu'à faire une requête ajax vers le fichier qui va vous renvoyer le contenu voulu...

le contenu va se retrouver dans le requete.responseText (ou responseXML selon le format d'échange que vous utilisez, mais pour dans ce cas il faudra parser votre xml).

en fin de boucle de votre fonction de callback vous mettez un document.getElementById('le_nom_de_votre_div_destination').innerHTML = requete.responseText (je laisse volontairement de côté la partie xml car je suis pas encore au point la-dessus)...

=> je pars du principe que vous connaissez JavaScript et AJAX, donc ma réponse est sommaire... si besoin je vous envoie une boucle complète de requête AJAX avec un modèle de lien ;-)

[Giantrick]

Salut,

=> je pars du principe que vous connaissez JavaScript et AJAX, donc ma réponse est sommaire... si besoin je vous envoie une boucle complète de requête AJAX avec un modèle de lien ;-)

Merci pour votre réponse, et effectivement je suis novice en AJAX et débutant en Javascript.

Personnellement je n'ai pas encore construit de module en javascript je ne fais que reprendre des fonctions déjà écrites que je modifie en fonction de mes besoins (un peu facile mais cela me suffit, et désolé pour les purites...)

Alors si votre proposition de m'envoyer une boucle complète de requête AJAX avec un modèle de lien (en test pour l'exemple) je suis preneur, ensuite j'en ferais mon affaire pour le mettre à ma sauce selon mes besoins et les docs que j'ai déjà sur le sujet.

merci d'avance.

En attendant je me document un peu sur le site http://www.xajaxproject.org/ que l'on m'a donné sur un autre forum mais je n'ai pas beaucoup de temps pour apprendre tous seul.

donc re-merci d'avance...

[jeje13009]

re-bonjour,

je crois qu'il faut bien commencer par là, récupérer des bouts de code pour les arranger à sa sauce ;-) bon courage...

voici la boucle de la requete :
**********
function Requete(){ //définition de la classe
if(window.ActiveXObject) return new ActiveXObject('Microsoft.XMLHTTP'); //pour IE
if(window.XMLHttpRequest) return new XMLHttpRequest();
else alert('Votre Navigateur ne prend pas en charge la technologie AJAX ! Utilisez Firefox -ou IE- pour visiter ce site...'); //pour les autres navigateurs
}

function Answer(requete,zone){ //fonction de callback
if(requete.readyState == 4){
if(requete.status == 200){
document.getElementById(''+zone+'').innerHTML = requete.responseText;
}
else alert("Une erreur [code : "+requete.status+"] est survenue...");
window.status = "Terminé";
}
else if(requete.readyState < 4){
window.status = "Chargement en cours... "+(requete.readyState*25)+"%"; //progression de la requete dans la barre de status du navigateur
}
}

function Ask(zone,fichier,methode,donnees){ //script de requete AJAX
var requete = false;
var requete = new Requete();

requete.open(''+methode+'',''+fichier+'',true);

if(methode == "POST") requete.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

requete.onreadystatechange = function(){ Answer(requete,zone);} //appel de la fonction de callback

requete.send(donnees);
}
**********

et voici un modèle de lien correspondant :
**********
<a href="javascript:Ask('article1.txt','GET','null');">Article 1</a>
ou
<span onClick="javascript:Ask('traitementForm.php','POST','var1=donnee1&var2=donnee2');">Soumettre le Formulaire</span>
**********

voila, en fait j'ai mis deux modèles de lien pour passer un coup par href et l'autre par onClick, de même pour POST et GET...

j'espère que ça t'aidera ;-)