[AJAX] Compatibilité IE / FF pour ajax ?

**crepeOsucre** · 20/06/2007, 14h21

Bonjour.

J'ai un petit site internet avec les pages comme suit :
- une div de titre qui contient le titre du site et le menu (id 'menu').
- en dessous les pages qui changent en fonction des clics sur le menu (id 'body').

J'utilise de l'ajax pour me faire la main.

Sous Firefox tout fonctionne bien.
Sous IE rien ne fonctionne (pas d'affichage des pages demandées), mais une erreur : "[...] a la valeur Null ou n'est pas un objet".

J'ai essayé de trouver des réponses simples et claires sur internet, mais rien de passionnant...

Ma page index.php (simplifiée):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
    <head>
        <!-- balises de forme -->
        <title>qFreeFax - Le fax gratuit et flexible pour les abonnés de Free</title>
        <link rel="stylesheet" type="text/css" href="index.css">
 
        <!-- fonctions javascript générales -->
        <script src="fonctions.js" type="text/javascript" LANGUAGE="JavaScript"></script>
    </head>
 
    <body onload="appelAjax('accueil')">
        <div id="menu">
            <a onclick="appelAjax('accueil')">accueil</a>
        </div>
        <div id="body">
        </div>
    </body>
 
</html>

Ma page de fonctions javascript (simplifiée) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
      var objRequete = new XMLHttpRequest();	// instanciation d'un objet XMLHttpRequest
 
		function appelAjax(newPage) 
       {
			// fonction appelée. param non utilisée ici
			//var ma_variable=document.getElementById("...").value;
 
          objRequete.open('get','traitNav.php?request='+newPage,true);	//ouverture d'une requete XMLHttpRequest avec paramètres methode get, mode asynchrone (true)
			objRequete.onreadystatechange = reponseAjax;		// nom de la fonction qui traite la reponse de l'accès précédent
			objRequete.send(null);									// envoie de la requete
 
            return true; // la fonction retourne vrai (sans incidence ici - syntaxiquement correct)
        }
 
 
        function reponseAjax() 
        {
		    if (objRequete.readyState==4) // 4: transaction terminée avec données chargées
           { 
				document.getElementById("body").innerHTML = objRequete.responseText; // modif du DOM
            }
        }

La page de traitement de la navigation (avec vérification de l'existence des fichiers etc...) n'est pas interessante dans ce cas.

Merci de vos réponses, il faut que ce site soit compatible FF et IE.
C'est cette méthode que je veux utiliser, pas une autre, car je ne peux pas rafraichir tout à chaque changement de page.

Guillaume

**E.Bzz** · 20/06/2007, 14h31

Bonjour,
sauf erreurs de ma part, la syntaxe est correcte.

Peut-être qu'IE trouve déplacé d'appeler un div "body" (la paille et la poutre, quoi

)

Essaye de l'appeler autrement ("corps", "le_body" ...)

A+

**crepeOsucre** · 20/06/2007, 14h37

J'ai changé le body, qui effectivement aurait pu provoquer un caprice de la part de IE.
Mais j'ai toujours mon erreur.

Il doit s'agir d'autre chose.

Guillaume

**E.Bzz** · 20/06/2007, 14h52

Envoyé par crepeOsucre

Il doit s'agir d'autre chose.

Que contient (au sens "chaine de caractères") ton objRequete.responseText au retour ?

A+

**crepeOsucre** · 20/06/2007, 15h01

Voici le code ma page php qui traite les évènements de navigation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<?php
 
//##############################################//
// Cette page récupère le paramètre d'url       //
// contenant la page demandée, et la transmet.  //
// D'autres paramètres peuvent bien sur être    //
// transmis dans l'URL comme la version de      //
// l'os etc...                                  //
//##############################################//
 
if (isset($_REQUEST["request"]))
{
    $newPage = $_REQUEST["request"];
    $newPage = ($newPage.".html");
    if (file_exists("./".$newPage))
    {
        include($newPage);
    }
    else
    {
        echo("La page demand&eacute;e n'existe pas");
    }
}
else
{
    echo("Une erreur est survenue");
}
 
?>

Si tout se passe bien, un include de la page demandée est retourné.
J'avoue que j'ai été surpris que constater que cela fonctionnait (sous FF) quand je l'ai écrit... Est-ce correct ?

Sinon, une simple chaine (message d'erreur) est retournée.

Guillaume

**E.Bzz** · 20/06/2007, 15h04

Heu ... oui mais justement, au-delà du fait que PHP n'est pas ma langue maternelle, ce qui compte pour le nav, c'est le code qu'il reçoit.
Le code finale généré par le serveur, quoi ...
Si tu fais un alert(objRequete.responseText), ça affiche quoi ?

A+

**crepeOsucre** · 20/06/2007, 15h08

La chaine qui est retournée est le code de la page appelée, en l'occurrence et pour le moment : du HTML.

Ca me parait correct. Autre chose peut-etre...

Guillaume

**E.Bzz** · 20/06/2007, 15h25

Envoyé par crepeOsucre

Ca me parait correct.

C'est l'essentiel

**crepeOsucre** · 20/06/2007, 15h27

Certes...

Mais j'ai surement tort puisque ça ne fonctionne pas.

Guillaume

**crepeOsucre** · 23/06/2007, 17h00

Bonjour,

Après avoir lu quelques cours je me suis rendu compte d'une chose, que l'objet XMLHttpRequest n'existe pas pour Internet Explorer. Il utilise de l'activeX... microsoft.

Voici un exemple de code à utiliser pour effectuer un échange asynchrone sous IE et FF :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var xhr= null;
if(window.XMLHttpRequest) //Firefoxetautres
xhr=newXMLHttpRequest();
elseif(window.ActiveXObject){ //InternetExplorer
try{
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { //XMLHttpRequestnonsupportéparlenavigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr=false;
}

ATTENTION : var xhr = null; peut vous jouer des tours. Si tout ne fonctionne pas comme vous le souhaitez, essayez de commenter cette ligne... Si c'est la cas pensez aussi à virer xhr=false;, qui ne serait pas défini.

Merci à Siddh pour son document interessant, sur ...developpez.com.
Ici : http://siddh.developpez.com/articles/ajax/

Guillaume

[AJAX] Compatibilité IE / FF pour ajax ?

JavaScript

Discussions similaires

Partager

Partager