XMLHttpRequest et compatibilité navigateurs [Résolu]

Salut,

toujours beaucoup de question je vois :)
Je vais essayer de répondre à celle dont je suis sur, et les autres un peu moins ^^

Pour commencer :

quel est l'intérêt du DEUXIEME code? Est-ce que l'éventualité

 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");



est importante à prendre en compte? 

L'intérêt du deuxième code apparemment c'est qu'il permet de prendre en compte différente manière d'appeler l'objet XMLHttpRequest en fonction de la version de javascript utilisée par le navigateur IE. Pourquoi ? Certainement parce que microsoft à changé sa façon de gérer ça d'une version à une autre.
Est ce que cette éventualité est importante à prendre en compte ?
Je dirais qu'idéalement oui ^^ mais comme toujours, si tu commence à faire ton site de manière à prendre en compte tous les navigateurs, toutes les éventualités... tu n'as pas fini! C'est long et laborieux, mais au final ton site à plus de chance de pouvoir être visualisé par divers navigateur.
C'est donc à toi de peser le pour et le contre. Personnellement, et ce n'est pas parce que j'utilise le premier code que je dis ça (plus par faignantise, et oui :p), je pense que le premier code est suffisant.



Est ce qu'il serait possible de compiler tous les try catch ?
-> Compiler ?! Tu veux dire enchainer les uns dans les autres ?
Attention toutefois, je ne suis pas certain, mais il est quand même préférable, de devoir nommer différemment tes variables lorsque tu enchaines des if / else, try / catch les uns dans les autres (imbrication).
Ainsi ton code deviendrais celui ci :

function getHTTPObject()
{
  var xmlhttp = false;

  /* Compilation conditionnelle d'IE */
  /*@cc_on
  @if (@_jscript_version >= 5)
     try
     {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (e)
     {
        try
        {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (E)
        {
           try
           {
             xmlhttp = new XMLHttpRequest();
            }
           catch (A)                                   // Effectivement autre chose, puisque c'est un nom de variable tu peux mettre ce que tu veux tant que tu n'a pas utilisé déjà ce nom de variable dans un même bloc que celui ou tu es (bloc supérieur)
           {
            xmlhttp = false;
            }
           
        }
     }
}

Pour ce qui est des '@' en javascript... aucune idée. Je sais qu'en PHP ca permet de "zapper" l'erreur sur l'instruction s'il y en a une (elle n'est donc pas affichée sur le navigateur), mais en javascript je ne sais pas.
Puisqu'il s'agit d'un code de "compilation" (cf. le commentaire), j'imagine que ça permet de dire à l'interpréteur javascript : "compile moi ce code". A vérifier donc.

_jscript_version : Ce doit etre pour récupérer la version javascript.

Ben écoute je comprends pas, moi cette fonction :

function callScript ( scriptName, args ){
	
	var xhr_object = null; 
	     
	if(window.XMLHttpRequest) // Firefox 
	   xhr_object = new XMLHttpRequest(); 
	else if(window.ActiveXObject) // Internet Explorer 
	   xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
     return; 
	} 
	 
	xhr_object.open("POST", scriptName, true);
	     
	xhr_object.onreadystatechange = function() { 
	   if(xhr_object.readyState == 4) {
			//alert(xhr_object.responseText); // DEBUG MODE
			//document.write(xhr_object.responseText);
			eval(xhr_object.responseText);
		 }

		return xhr_object.readyState;
	} 
	 
	xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	
	xhr_object.send(args);

}

Marche très très bien, je l'utilise sur plusieurs site , je viens de mettre à jour FF et ça fonctionne toujours.
La petite différence que je vois encore avec ton script, c'est que j'ouvre avant de setter la fonction du onreadystatechange.
Essai de mettre l'instruction 'open' avant celle de onreadystatechange = function () {... pour voir ce que ça donne.

Re,

je m'aperçois que j'ai pas répondu à une question :

Try { } catch est effectivement utilisé en java, mais il faut croire qu'en javascript on peut également tenter de catcher les exception émise par certaines instructions.

Sinon concernant la compilation, j'ai trouvé cette page qui expliquer l'utilisation de la compilation de code javascript, et qui répondra plus précisément à ta question concernant les @if, etc..
La page : http://www.javascriptkit.com/javatutors/conditionalcompile.shtml

Bon j'ai toujours pas réussi à faire une XMLHttpRequest qui fonctionne, mais j'ai résolu mon problème autrement, finalement j'ai même pas besoin d'AJAX (bien la peine de mettre pris la tête la dessus). Mais je m'y replonge dès que je peux.

bien, sa peux toujours servir ! ^^

1/ /*@cc_on ... @*/ kezako?

Alors si on veut comprendre le mystère des /*@cc_on et des @if tout est bien expliqué dans la page de kij.

D'après ce que j'ai pu lire le code /* (qui introduit normalement un commentaire) associé au @ introduit une "compilation conditionnelle", mise au point par microsoft (donc ne fonctionnant uniquement sur IE).
Ce code permet de masquer des nouvelles commandes (telles que le try/catch), qui feraient planter les anciennes versions de IE (<IE4). Il n'y a que IE>=4 qui peut exécuter ce qui se trouve entre les /*@ ... @*/
Le truc c'est qu'aucun autre navigateur ne lira ces instructions, c'est une sorte de "message privé" pour IE>=4...
C'est un peu spécial, et je vais essayer de faire sans.


2/ Microsoft.XMLHTTP et Msxml2.XMLHTTP (et même plus si affinité)

Bon alors pour ce qui est de la différence entre Msxml2.XMLHTTP et Microsoft.XMLHTTP, apparemment Microsoft.XMLHTTP est la version la plus ancienne, et d'après ce que j'ai lu ça sert à rien de rajouter Msxml2.XMLHTTP. Il y a même une version MSXML2.XmlHttp.3.0... Bon ya une discussion ici où 3 développeurs se prennent un peu la tête à savoir à quoi ça sert de préciser les deux...


Malheureusement tout ça ne m'a pas aidé à résoudre mon problème... J'ai toujours ma requête AJAX sur les bras qui ne veut pas fonctionner sous IE... Je stagne au readyState=1...

Avis aux amateurs de "débugage"! Merci d'avance

ajax.html (lance la requête et affiche sous forme d'une alerte les données demandées)

<head>
<title>My first XMLHttpRequest</title>
<script language="JavaScript">

function ajax()  {
	var req = false; 
	req = new ActiveXObject("Microsoft.XMLHTTP");
	req.onreadystatechange = function() {
		if (req.readyState == 0) {document.write("0");}
		if (req.readyState == 1) {document.write("1");}
		if (req.readyState == 2) {document.write("2");}
		if (req.readyState == 3) {document.write("3");}
		if (req.readyState == 4) {
			if (req.status == 200) {treatRep();}
			else {alert("Problem: " + req.statusText);}
		}
	}
	req.open("POST", "sql.php", true);
	req.send(null);
	
	function treatRep() {  
		alert(req.responseText);
	}
}
	
</script>
</head>
<body>


<a href="javascript:ajax();">Click me</a>

</body>
</html>

et sql.php (récupère les données dans la bdd et les renvoie à ajax.html)

<?php

mysql_connect("localhost", "root", "");
mysql_select_db("test");
$reponse = mysql_query("SELECT * FROM membres");
$donnees = mysql_fetch_array($reponse);
echo $donnees['nom'];

mysql_close();
?>

Re, je profite d'une pause miam au boulot pour réagir :)

La seule chose qui diffère par rapport à mes scripts c'est :

xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4) {
//alert(xhr_object.responseText); // DEBUG MODE
//document.write(xhr_object.responseText);
eval(xhr_object.responseText);
}

return xhr_object.readyState;
}

xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");


Puisque le retour dans la fonction ne sert pas (?? tu peux toujours essayer de le mettre pour voir ce que ca change), j'opterais pour la ligne transmettant le header (qui a priori n'est pas dans le dernier script que tu as mis).
Mis à part ça... chez moi même sous IE7 ca fonctionne très bien.
Si en effectuant ces deux modifs il ne se passe toujours rien chez toi, deux autres solutions : soit il y a eu erreur dans ton script PHP appellé, ce qui fait que tu ne revient jamais à l'état '4'. Soit tu as une configuration d'IE peu banal ^^

Merci pour vos réponses :)

Voilà où j'en suis:

- Je viens de télécharger la dernière mise à jour de Firefox (2.0.0.13 sortie le 25 mars 2008, donc hier) et là...oh rage et désespoir mon script qui marchait nickel sur ff ne marche plus, bloqué au stade readyState=1 avec la console d'erreurs qui me dit :

1. (au moment ou je charge la page d'accueil de mon site, avant même d'ouvrir la page contenant la requête XMLHttpRequest) uncaught exception: Permission refusée d'appeler la méthode Location.toString

2. (puis lorsque je clique sur le lien qui appelle la requête XMLHttpRequest) uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIXMLHttpRequest.send]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://mon_site.html :: envoyerReq :: line 55" data: no]
Ce qui correspond à la ligne

req.send(data);

- Je désinstalle ff 2.0.0.13, ré-installe la version 2.0 et là tout fonctionne!

- Je vous remets ci-dessous mes 2 pages de code (elles sont un peu différentes que les premières, mais petit à petit j'essaie d'aller... et bien là où je veux aller!)

- J'ai essayé avec la ligne return req.readyState; en plus, ça ne change rien (si ce n'est qu'il y a un petit temps d'attente avant l'affichage du résultat de la requête)

- Pour IE7 c'est le calme plat... Je vais essayer de résinstaller IE6 pour voir.

- J'ai pris note du site http://www.jquery.com, mais n'ayant jamais travaillé avec des bibliothèques ça va me prendre un peu de temps à décortiquer. En tout cas merci!

- Est-ce que quelqu'un aurait une adresse d'un page web qui contient une requête XMLHttpRequest qui fonctionne que je puisse l'essayer de chez moi et jeter un oeil... Parce que là je n'y comprends vraiment plus rien!!!

Et encore MILLE MERCI!


ajax.html

<html>
<head>
<title>My first XMLHttpRequest</title>
<script language="JavaScript">


function ajax()  {
	var req; 
	if (window.XMLHttpRequest) { // Mozilla
		req = new XMLHttpRequest();
		if (req.overrideMimeType) { // problème firefox
			req.overrideMimeType('text/xml');
		}
	}
	else {
		if (window.ActiveXObject) { // C'est Internet explorer < IE7
			try { req = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e) {
				try {
					req = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch(e) {
					req = null;
				}
			}
		}
	}
	return req;
}
	
function envoyerReq(i) {
	var req = ajax();
	if (req==null) {
		alert ("AJAX impossible");
	}
	else {	
		req.onreadystatechange = function() {
			if (req.readyState != 4) {
				document.write(req.readyState);
			}
			if (req.readyState == 4) {
				document.close();
				if (req.status == 200) {
					document.open();
					document.write(req.responseText);
					document.close();
				}
				else {alert("Problem: " + req.statusText);}
			}
		}
		req.open("POST", "sql.php", true);
                req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		data = "i="+i;
		req.send(data);  
	}
}

	
</script>
</head>
<body>


<a href="javascript:envoyerReq(3);">3</a>
<a href="javascript:envoyerReq(7);">7</a>

</body>
</html>

sql.php

$i = $_POST['i'];
$j = $i * 2;
mysql_connect("localhost", "mon_site", "********");
mysql_select_db("ma_bdd");
$reponse = mysql_query("SELECT * FROM leaf WHERE sosa='$i' OR sosa='$j'");
$donnees = mysql_fetch_array($reponse);
$leaf01[0] = $donnees['nom'];
$leaf01[1] = $donnees['prenom'];
$leaf01[2] = $donnees['naissance'];
$leaf01[3] = $donnees['deces'];

$donnees = mysql_fetch_array($reponse);
$leaf02[0] = $donnees['nom'];
$leaf02[1] = $donnees['prenom'];
$leaf02[2] = $donnees['naissance'];
$leaf02[3] = $donnees['deces'];

echo $leaf01[0];
echo "<br>";
echo $leaf01[1];
echo "<br>"; 
echo $leaf01[2];
echo "<br>";
echo $leaf01[3];
echo "<br><br>";
echo $leaf02[0];
echo "<br>";
echo $leaf02[1];
echo "<br>"; 
echo $leaf02[2];
echo "<br>";
echo $leaf02[3];

mysql_close();
?>

Ha! C'était ça! (du moins pour ff) J'ai mis la fonction open avant onreadystatechange et ça marche dans la nouvelle version de ff. J'aurais vraiment pas cru qu'un ptit truc comme ça puisse tout faire planter, dans une seule version en plus... Vraiment MERCI kij :)))

Par contre pour IE c'est toujours pareil... Alors je vais te demander un grand service. Je me demande si ce problème de IE ne viens pas de chez moi (pb de configuration comme tu disais) et du coup si je te fais passer l'adresse de mon site (ou du moins des deux pages qui s'y trouvent pour l'instant...) par MP est-ce que tu pourrais jeter un oeil avec IE et me dire si ça fonctionne de chez toi?

Thanks a million!

Bon le problème ne vient apparemment pas du navigateur mais bien de mon script... Il faut que je ressorte mes bouquins et dès que j'y vois plus clair je reviens faire un ptit bilan ici.

(Que les choses peuvent être laborieuses quand on débute!)

merci encore et a+

Bonjours, moi j'ai un petit soucis, j'ai repris le deuième code, ca fonctionne correctement sous firefox, mais sous IE j'ai droit à une erreur : 'document.getElementById(...)' a la valeur NULL ou n'est pas un objet

Voici le code complet de la page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
</head>
<script type="text/javascript">

function getHTTPObject()
{
var xmlhttp = false;

/* Compilation conditionnelle d'IE */
/*@cc_on
@if (@_jscript_version >= 5)
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E)
{
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/

/* on essaie de créer l'objet si ce n'est pas déjà fait */
if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (e)
{
xmlhttp = false;
}
}

if (xmlhttp)
{
/* on définit ce qui doit se passer quand la page répondra */
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState == 4) /* 4 : état "complete" */
{
if (xmlhttp.status == 200) /* 200 : code HTTP pour OK */
{
document.getElementById('babble').innerHTML=xmlhttp.responseText;

}
}
}
}
return xmlhttp;
}

function rafraichir() {
var xmlhttp = getHTTPObject();
xmlhttp.open('GET','test4.php',true);
xmlhttp.send(null);
setTimeout('rafraichir()', 1000);
}
rafraichir();

</script>

<body>

<div id="babble">
<? echo time(); ?>
</div>

</body>
</html>

Bien sur l'erreur que tu as es normale, il s'agit de cette ligne :

document.getElementById('babble').innerHTML=xmlhttp.responseText; 

qui est un exemple de ce qu'il peut être fait au retour de l'appel du script PHP. Si tu n'as aucun élément (par exemple une DIV) dans ta page qui se nomme "babble", une erreur javascript aura lieu.
Il y aurait fallu corriger comme ceci pour ne pas avoir de faute :

if ( document.getElementById("babble") )
   document.getElementById('babble').innerHTML=xmlhttp.responseText; 

Salut!

J'avais aussi essayé de voir où était le probleme dans le script de sagaff, mais je ne comprends car il a bien une div 'babble' dans son script:

<div id="babble"> 
<? echo time(); ?> 
</div>

C'est très curieux ...

Certes il y en a bien une :) seulement la fonction javascript est appellée :

rafraichir(); 

Avant que celle ci soit définie dans la page.

Le mieux est donc d'appeler la fonction javascript après avoir construit le Body, comme ceci :

<body>

<div id="babble">
<? echo time(); ?>
</div>

</body> 
<script language="javascript">
rafraichir();
</script>

Ok! je comprends...
En fait tout ce qui est dans <head> est exécuté avant même que le reste du code html de la page ne soit chargé, donc dans le cas de sagaff au moment où il ouvre sa page, la fonction est:

1. "chargée" ou "enregistrée" (grâce à la définition de fonction),
2. puis exécutée (avec l'appel de fonction) avant que le navigateur ait lu ce qu'il y avait dans le body, et donc ça plante.

C'est très clair, merci ! ;)