Ne pas recharger les pages avec ajax

J'ai vu quelques exemple sur le web utilisant getHTTPObject() pour des formulaire ou d'autres choses. Cela permet visiblement d'exécuter les requetes à l'intérieux de la page sans les recharger.

Moi je cherche à faire en sorte que lorsque l'on clique sur un lien, la page nese recharge pas, mais affiche bien le contenu demandé.


J'ai ceci sur mon site:

Code:

function ajax_request(methode, url, arguments,type, fonction) { 
         var http_request = false; /** http_request est la variable qui contient notre objet "ajax"*/ 
         var data=null; /** data est la variable qui contient les arguments*/ 
         var taille=0; /** taille est la variable qui la taille de data*/ 

         if(methode != "GET") { 
                  if(methode != "POST") { 
                          alert("Requete Ajax : methode incorrecte -> " + methode); 
                          return false; 
                  } 
         } 

         if(!arguments) { 
                 arguments=''; 
         } 

         if(type != "responseText") { 
                 if(type != "responseXML") { 
                          alert("Requete Ajax : type incorrecte -> " + type); 
                          return false; 
                 } 
         } 

         if(!url) { 
                 alert("Requete Ajax : url incorrecte"); 
                 return false; 
         } 

         if(!fonction) { 
                 alert("Requete Ajax : fonction incorrecte"); 
                 return false; 
         }else{ 
                 fonction=fonction+"(http_request."+type+")"; 
         } 

         if(methode == "GET") { 
                 url+="?"+arguments; 
         } else { 
                 data=arguments; 
                 taille=data.length; 
         } 


         if (window.XMLHttpRequest) { 
             http_request = new XMLHttpRequest(); 
             if (http_request.overrideMimeType) { 
                 http_request.overrideMimeType('text/xml'); 
             } 
         } else { 
             if (window.ActiveXObject) { 
                 try { 
                     http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
                 } catch (e) { 
                     try { 
                          http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
                     } catch (e) {} 
                 } 
             } 
         } 

         if (!http_request) { 
              alert('Cannot create an XMLHTTP instance'); 
              return false; 
         } else { 
             http_request.onreadystatechange = function() { 
                 if (http_request.readyState == 4) { 
                      if (http_request.status == 200) { 
                               eval(fonction); 
                               return true; 
                      } else { 
                               alert("Error no."+http_request.status+"\nAn error occur while receiving data"); 
                               return false; 
                      } 
                 } 

             } 
             http_request.open(methode, url ,true); 
             http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
             http_request.setRequestHeader("Content-length", taille); 
             http_request.setRequestHeader("Cache-Control", "no-cache"); 
             http_request.setRequestHeader("Connection", "close"); 
             http_request.send(data); 
         } 
} 

    function principal(reponse) { 
        document.getElementById("contenu").innerHTML = reponse; 
    } 

Et ceci le code avec le lien qui inclus login.php avec la fonction sondage()

 if ($loginOK == false) {
	
    if(isset($_GET['page'])){
    
	if ($_GET["page"] == "verify") {include('users.php'); verify(); }
     if ($_GET["page"] == "sondage") {include('login.php'); sondage($controlrow);}
		
    }else{
   echo '<img src="images/login/puce2.gif"/>&nbsp;<a href="#" onclick="javascript:ajax_request(\'POST\', \'?page=sondage\', \'ajax=true&Monpost1=\'+ document.getElementById(\'bouton\').value,\'responseText\',\'principal\');" ><span class="marron1">Créer un personnage</span></a><br />';

	}
	}

Mais si vous regardez ici, lorsque l'on clique sur créer un personnage on a la meme page s'intégrer sur la page actuel, ce qui est pas normal. Je ne trouve pas le problème

Demo: http://rpgillusion.franceserv.com/game/

Bonjour aussi et bienvenue sff,

à la requête qu'envoie le script JS à ton serveur, ce dernier doit renvoyer un bout de page (<div>...</div> en général) et non une page entière. Le reste de la page (header, footer et menu gauche dans ton cas) est en effet déjà là, c'est justement le but du script de ne pas avoir à tout recharger.

Felipe

Oui mais je comprend pas pourquoi la page entière est inséré. Je procède avec une include, qui s'insère normalement dans une div nommé "contenu" . J'aimerai comprendre pourquoi au lieu d'avoir une insersion de sondage() j'ai toute la page. C'est pas logique. J'ai testé plusieurs script js et ca fait ca pour tous.

Le lien que tu as mis dans le 1er post est: http://rpgillusion.franceserv.com/game/ qui correspond à http://rpgillusion.franceserv.com/game/index.php (en passant, la balise <body> est envoyée 3 ou 4 lignes trop tôt d'ailleurs, c'est plutôt juste après </head> en temps normal )

En reconstruisant une URL avec le lien, on obtient (comme si on cliquait sur 'Créer un personnage') la "page" http://rpgillusion.franceserv.com/game/index.php?page=sondage

Ca ne devrait pas renvoyer une page complète de la forme (doctype)<html><head></head><body></body><html> mais seulement ce qu'il y a à remplacer: la page est déjà à 90% chargée puisqu'il y a un Doctype, un titre, une feuille de style, du JS, un header, un menu gauche et un footer qui sont ceux déjà présents, déjà envoyé par le serveur 3 minutes avant ... En réponse à la demande ?page=sondage, le serveur ne doit renvoyer que les 10% manquants. Si c'est déjà ce que tu essaies de faire mais que ça ne fonctionne pas, le problème est dans le script PHP, il faut que tu le débogues à la main

En reprenant ton code + plein de messages, quelque chose du genre:

function p($texte) {
  echo '<p>'.$texte."</p>\n";
}
function vd($texte) {
  echo '<pre>'; var_dump($texte); echo "</pre>\n";
}

vd($loginOK);
vd($_GET['page']);

if ($loginOK == false) {
     p('DEBUT $loginOK==FALSE');
     if (isset($_GET['page'])) {
          p('DEBUT isset TRUE');
          if ($_GET["page"] == "verify") {
               p('DEBUT include USERS');
               require('users.php');
               p('INTERMEDIAIRE');
               verify();
               p('FIN verify()');
          }
          if ($_GET["page"] == "sondage") {
               p('DEBUT include LOGIN');
               require('login.php');
               p('INTERMEDIAIRE');
               sondage($controlrow);
               p('FIN sondage()');
          }
          p('FIN isset TRUE');
     }
     else {
          p('DEBUT isset *false*');
          echo '<img src="images/login/puce2.gif"/> <a href="#" onclick="javascript:ajax_request(\'POST\', \'?page=sondage\', \'ajax=true&Monpost1=\'+ document.getElementById(\'bouton\').value,\'responseText\',\'principal\');" ><span class="marron1">Créer un personnage</span></a><br />';
          p('FIN isset *false*');
	}
p('FIN $loginOK==FALSE');
}
p('if ($loginOK==FALSE) est FINI.');

EDIT: et require() au lieu d'include(), au cas où
Modifié par Felipe (22 Aug 2006 - 14:26)