[AJAX] Compatibilité IE / FF pour ajax ?
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:
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:
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
Pas de problème de nom pour le 'body'
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
Chaine : objRequete.responseText
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
Piste XMLHttpRequest et ActiveXObject
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:
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
