[AJAX] Chargement d'une seule partie de la page

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

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

Citation:

---

Envoyé par gids01

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) 8O

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. :lol:

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...;)

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

Citation:

---

Envoyé par jeje13009

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... ;)

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

Merci beaucoup pour le code, je vais le prendre et l'analyser pour comprendre ce que tu m'as mis et ensuite le tester...

A bientôt pour le retour...

ps : sincèrement, cela me semble un peu compliqué mais qui ne tente rien n'a rien... ;)

Re,

en fait j'ai sorti la fonction de callback de la fonction de requete (mais ca tu dois le touver aussi dans les tuto)...

j'ai également fait la fonction de requete à ma sauce, comme j'utilise tantot des requetes en GET et d'autres en POST, j'ai fait une seule fonction qui s'adapte à la methode demandée... :)

pou les liens, j'ai oublié l'agument qui définit la zone d'affichage :
href="javascript:Ask('le_nom_du_div_destination','article1.txt','GET','null');"

voilà, c'est mieux comme ça...

Le principe d'AJAX est justement de te permettre de modifier
une partie de ta page sans la recharger complétement.

C'est enfin un cumul de technologie qui permet d'approcher le
fonctionnement d'une application installée localement sur le poste client.

Voici un morceau de code qui va peut être t'aider :

La page index.html (XHTML 1.1) : ========================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<title>Le titre de ton site</title>
<meta http-equiv="content-type"
content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="function.js"></script>
</head>
<body>
<div id="mondiv">
Premier contenu
<form method="post" action="javascript:void">
<input type="button" name="go" value="Go !" onclick="Callback( )" />
</form>
</div>
</body>
</html>
============================================


Le fichier function.js : ===============================


MESG_NO_XMLHTTPREQUEST = "Votre navigateur ne permet pas l'utilisation de toutes les fonctionnalités de ce site !";
MESG_NO_CONNECT_SERVER = "Impossible de contacter le serveur actuellement. Veuillez essayer à nouveau dans un instant.\n Détail de l'erreur : ";
MESG_NO_HTTP_RESPONSE = "Un problème est survenu dans la communication entre votre navigateur et le serveur !";
MESG_RESPONSE_MALFORMED = "Le format de la réponse renvoyée par le serveur est invalide !";
MESG_NO_CHILDNODES = "Aucune réponse à traiter !";



/* --------------------------------------------------------------------
FONCTIONS GENERIQUES (XMLHttpRequest)
-------------------------------------------------------------------- */

/*
*
*/
var request = null;
function HttpRequest( method , url , async , resp_handle )
{
try {
request = new XMLHttpRequest( ); /* No Microsoft */
}
catch ( newxmlhttp ) { /* Yes Microsoft */
try {
request = new ActiveXObject( "Msxml2.XMLHTTP" );
}
catch ( oldxmlhttp ) {
try {
request = new ActiveXObject( "Microsoft.XMLHTTP" );
}
catch ( err ) {
request = null;
}
}
}

if( !request )
{
alert( MESG_NO_XMLHTTPREQUEST );
return( false );
}

InitReq( method.toLowerCase( ) , url , async , resp_handle , arguments[4] );

return( true );
}


/*
*
*/
function InitReq( method , url , async , resp_handle , args )
{
try {
request.onreadystatechange = resp_handle;
request.open( method , url , async );
if( method == "post" ) request.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded; charset=iso-8859-1" );
request.send( args );
}
catch ( err ) {
alert( MESG_NO_CONNECT_SERVER + err.message );
}
}

/*
*
*/
function HttpResponse( )
{
if( request.readyState != 4 ) return( false );

if( request.status != 200 )
{
alert( MESG_NO_HTTP_RESPONSE );
return( false );
}

if( ! request.responseXML )
{
alert( MESG_RESPONSE_MALFORMED );
return( false );
}

return( true );
}

/*
*
*/
function Callback( )
{
var url = "http://localhost:80/xml.php";
var data = "";

return( HttpRequest( "post" , url , true , Resp_Callback , data ) );
}

/*
*
*/
function Resp_Callback( )
{
if( HttpResponse( ) == false ) return( false );

try {
var docXML = request.responseXML.documentElement;

var xhtml = docXML.getElementsByTagName( "xhtml" )[0].firstChild.nodeValue;

document.getElementById( "mondiv" ).innerHTML = xhtml;

return( true );
}/* try */
catch ( err ) {
alert( MESG_RESPONSE_MALFORMED + "\n\n" + err.message );
return( false );
}/* catch */
}



============================================

Le fichier xml.php : ===============================
<?php
define( "XML_DTD" , "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>" );
define( "XML_ROOTNODE_BEGIN" , "<params>" );
define( "XML_ROOTNODE_END" , "</params>" );

$xhtml = <<<EOT
Nouveau contenu
<form method="post" action="javascript:void">
<input type="button" name="new_go" value="New Go !" onclick="Callback( )"/>
</fieldset>
</form>
EOT;

$xml = "<xhtml><![CDATA[" . $xhtml . "]]></xhtml>";

XMLSend( $xml );

/*
*
*/
function XMLSend( $nodes = "" )
{
$xml = XML_DTD;
$xml .= XML_ROOTNODE_BEGIN;
$xml .= $nodes;
$xml .= XML_ROOTNODE_END;

header( "Content-Type: text/xml" );

echo "$xml";
}
?>
============================================


PS : Histoire de cogiter un peu plus, comment gérer proprement le reload ?
Et oui si tu reload la page tu retrouves le contenu d'origine du div et pas le dernier
contenu envoyé dynamiquement via ton script PHP.

re,

si tu utilises PHP, pourquoi pas une simple variable de session ??

mais sans PHP je dois avouer que je ne vois pas bien...

alors la solution ?

Citation:

---

Envoyé par jeje13009

re,

si tu utilises PHP, pourquoi pas une simple variable de session ??

mais sans PHP je dois avouer que je ne vois pas bien...

alors la solution ?

---

Pour les sessions, je ne vois pas bien comment elles peuvent me servir pour ne recharger qu'une partie de la page ? mais là encore, j'utilise PHP à quelques 15-20% de son potentiel ! :roll:

je suis en train de bosser sur une solution liée à AJAX et PHP grace à une bibliothèque PHP qui intègre AJAX via xajax.

cela me semble un peu plus simple mais je n'ai pas encore tout réussit.

Je vous tiens au courant... et si cela ne fonctionne pas comme je veux je m'attaquerais à vos solutions... ;)

Merci encore pour vos réponses.

Lorsque je parlais de variable de session, je faisais référence à la question d'ericduval quant au reload...

pour ce qui te concerne, ce n'est que Javascript qui t'intéresse en premier lieu avec notamment XmlHttpRequest !

Citation:

---

Envoyé par jeje13009

pour ce qui te concerne, ce n'est que Javascript qui t'intéresse en premier lieu avec notamment XmlHttpRequest !

---

Je suis actuellement sur une solution avec une alternative AJAX & PHP.

Je bloque pour la personaliser à mes besoins mais cela fonctionne.

Voilà l'autre sujet de discussion auquel je participe et qui m'a donnée cette alternative !

http://www.developpez.net/forums/sho...d.php?t=299842

Aller fini pour ce soir... je reprendrais demain !

Et merci encore pour votre aide ! à très vite. :lol:

Citation:

---

Envoyé par jeje13009

Lorsque je parlais de variable de session, je faisais référence à la question d'ericduval quant au reload...

---

Oui effectivement les sessions ("cookie only") sont une des solutions.
En fait, je suis à la recherche de la bonne méthode pour gérer l'environnement d'un
utilisateur suite à un reload (j'ai laissé un autre post à ce sujet).

salut,

en fait je pensais plutot créer une variable de session dans laquelle tu renfermerais le nom de la derniere requete...
au chargement du fichier (donc au reload par ex), une boucle vérifie l'existence ou non de cette variable et le cas échéant effectue la requete sur la cible désignée, sinon ca charge la cible initiale...

c'est juste une piste lancée, je n'ai pas encore réfléchi pour ma part sur ce problème...