XMLHttpRequest et compatibilité navigateurs Résolu/Fermé

Question

Bonjour tout le monde,

Pour créer un objet XMLHttpRequest compatible avec IE et Firefox j'ai trouvé deux codes différents. Un m'a l'air assez simple et je n'ai pas de mal à le comprendre.
Alors que le 2ème, trouvé ici https://openweb.eu.org/articles/objet_xmlhttprequest/ à l'air plus complet mais me pose problème à interpréter.


Le PREMIER:

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) {
--etc--


Le DEUXIEME:


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 */
           {
              /*
              Traitement de la réponse.
              Ici on affiche la réponse dans une boîte de dialogue.
              */
              alert(xmlhttp.responseText);
           }
        }
     }
  }
  return xmlhttp;
}	   

Voilà mes questions:

- Je ne comprends pas ces lignes, qui contiennent des @ devant certaines instructions, et qui mettent toute la première partie en commentaire.

/*@cc_on
  @if (@_jscript_version >= 5)

-----

 @else
     xmlhttp = false;
  @end @*/


	   
- J'ai cherché des infos sur l'instruction try...catch, en pensant que c'était du javascript, mais tout ce que j'ai trouvé la mentionne dans des cours de java. Je ne connais rien en java, mais c'est possible de mélanger java et javascript?

- Est-ce qu'il serait pas possible de combiner ainsi tous les try...catch?

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 (e)                                   // là, il faudrait surement autre chose que (e) mais je sais pas quoi...
           {
            xmlhttp = false;
            }
           
        }
     }
}



- Et enfin, quel est l'intérêt du DEUXIEME code? Est-ce que l'éventualité

 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

est importante à prendre en compte?


Merci d'avance à tous celles et ceux qui pourront m'éclairer ! 

:)

kij_82 · Accepted Answer

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.

kij_82 · Answer

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

chantaussel · Answer

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 (=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) My first XMLHttpRequest Click me et sql.php (récupère les données dans la bdd et les renvoie à ajax.html)

kij_82 · Answer

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 ^^

chantaussel · Answer

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 My first XMLHttpRequest 3 7 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 "
"; echo $leaf01[1]; echo "
"; echo $leaf01[2]; echo "
"; echo $leaf01[3]; echo "

"; echo $leaf02[0]; echo "
"; echo $leaf02[1]; echo "
"; echo $leaf02[2]; echo "
"; echo $leaf02[3]; mysql_close(); ?>

kij_82 · Answer

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.

chantaussel · Answer

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!

chantaussel · Answer

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+

chantaussel · Answer

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.

sagaff · Answer

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 : test

kij_82 · Answer

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;

chantaussel · Answer

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:

C'est très curieux ...

kij_82 · Answer

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 :

chantaussel · Answer

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 ! ;)

More · Answer

bien, sa peux toujours servir ! ^^

XMLHttpRequest et compatibilité navigateurs

15 réponses

Discussions similaires