Bonjour,
j'anticipe vos réponses qui vont être du type => va consulter la doc java script,Ajax,....
Je voudrais donc comme le tire l'indique pouvoir rafraichir un div (qui est en fait mon corps) afin de rendre la navigation plus fluide.
Le DIV corps de ma page php inclus un fichier composé d'HTML et de Java script. un différent fichier sera donc appelé selon la page désirée.

J'ai lu ce tutoriel en me penchant en particulier sur l'objet wmlhttprequest : tutorial

Je voudrais simplement exposé ce que je compte faire et que vous puissiez donner des critiques ou des suggestions pour mener ce projet à bien :D.

1) Envoi d'une requête HTTP avec en paramètre une variable contenant la page désirée
2) Du coté serveur on va traiter cette requête à l'aide d'un fichier PHP par exemple
3) On récupère les données avec l'une des deux propriétés suivantes
* responseText : pour récupérer les données sous forme de texte brut
* responseXML : pour récupérer les données sous forme d'arbre XML
=> Déjà des questions apparaissent , dans mon cas le fichier à afficher comporte du html & java script, comment dois-je procéder ?

Voila j'aimerais bien un guide (ou des guides) qui puisse me rediriger vers le droit chemin si je viens de dire des choses incohérentes ou stupides. Suis je bien en train de suivre la bonne méthode..

Je vous remercie d'avance (j'ai hâte de me lancer :P)

Gab

Ben poursuis le tuto que tu as commencé et tu seras en mesure de le faire. J'ai souvent utilisé cette méthode.

Bonjour,

j'ai besoin d'être éclairci sur un point.

J'ai un fichier php dans lequel j'ai un <DIV id=corps> :c'est celui ci que je veux rafraichir (sans rafraichir toute la page).

Pour le moment à l'aide du java script je peux 'onclick' changer le contenu de ma <DIV id=corps> en chargeant différent fichier XML.
Je peux donc afficher différents corps sans rafraichir la page entière.

Cependant mon corps ne doit pas être uniquement composé de texte. Il est composé de vidéos et de textes.

initialement j'avais mes différentes pages html composant le corps qui s'includaient dans la
<DIV id=corps>. Mes pages html comportaient un peu de texte un script pour exécuter la video un peu de teste un script pour exécuter la vidéo..

Mais maintenant que je change ma <DIV id=corps> grâce au contenu des différents fichiers XML je ne sais plus comment gérer mes vidéos.

J'ai besoin d'aide

Merci

gab

Tu peux très bien mettre du HTML dans ton XML, tu peux même de contenter de charger du HTML sans le formater dans un fichier XML.

PS: Mets <div> en minuscules si tu veux pas te faire traiter de vieillard.

bonjour,

J'ai trouvé ce script qui est en fin de compte exactement ce que je recherche

<script type="text/javascript">
     function envoieRequete(url,id)
     {
     var xhr_object = null;
     var position = id;
     if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
     else
    if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
    
     // On ouvre la requete vers la page désirée
     xhr_object.open("GET", url, true);
     xhr_object.onreadystatechange = function(){
     if ( xhr_object.readyState == 4 )
     {
     // j'affiche dans la DIV spécifiées le contenu retourné par le fichier
     document.getElementById(position).innerHTML = xhr_object.responseText;
     }
     }
     // dans le cas du get
     xhr_object.send(null);
    
     }
     </script>

et voici le code html qui fait le changement

<a href="#" onclick="envoieRequete('croissance2.html','CORPS');" >test1</a>
<a href="#" onclick="envoieRequete('biomecanique2.html','CORPS');" >test2</a>

Ceci marche bien mise à part:
1) les accents(question d'encodage des données)
2) lorque je click sur test 1 ou 2 le texte s'affiche bien mais la div corps perds certaines propriété comme son arrière plan,sa largeur ainsi que sa hauteur


gab

Pour les accents, c'est à cause des pages croissance2.html et biomecanique2.html. Vérifie que ce que tu mets dans ton head correspond bien.

Pour le 2), aurais-tu un exemple en ligne ?

Dans le cas d'une methode post asynchrone on peut faire ça aussi:

<script type="text/javascript">
     function envoieRequete(url,args,id)
     {
     var xhr_object = null;
     var position = id;
     if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
     else
    if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
    
     // On ouvre la requete vers la page désirée
     xhr_object.open("POST", url, true);
     xhr_object.onreadystatechange = function(){
     if ( xhr_object.readyState == 4 )
     {
     // j'affiche dans la DIV spécifiées le contenu retourné par le fichier
     document.getElementById(position).innerHTML = xhr_object.responseText;
     }
     }
     // dans le cas du get
     xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr_object.send(args);
    
     }
     </script>

On peut l'appeler ainsi:

<a href="#" onclick="envoieRequete('croissance2.html','arbre=pommier&viande=jambon','CORPS');" >test1</a>

Dans ce cas present on peut aussi envoyé un ou des arguments
A bientôt

Même si ça ne répond pas au problème, c'est une utilisation relativement "mauvaise" d'ajax. Changer le contenu de la page sans recharger la page ne rend pas la navigation beaucoup plus fluide, dans la mesure ou l'utilisateur s'attend à un rechargement de page quand il clique sur un lien, et parce qu'avec les différents cache, le rechargement de page est pratiquement instantané.
En contrepartie, toutes tes pages auront la même url, il sera donc impossible de linker vers autre chose que la page d'accueil. Les boutons précédents et suivant du naviagetur n'auront pas l'effet désiré, les robots n'auront pas accès à tes autres pages, donc aurevoir le référencement, et j'en passe. Ca peut être rigolo de faire un site comme ça pour s'essayer à l'ajax, mais c'est un choix à faire avec prudence.