[Ajax] XMLHttpRequest ou document.implementation ?

XMLHttpRequest ou document.implementation ? [Ajax] - HTML/CSS - Programmation

Marsh Posté le 22-11-2007 à 19:51:48    

Bonjour à tous,

 

Je cherche à écrire du javascript qui me permet de récupérer de l'XML dynamiquement (de l'Ajax quoi...) et ceux, que ce soit en local ou en ligne (et de préférence compatible IE6, IE7, Mozilla, Safari, etc.).

 

Quand je dis "en local" c'est pour que je puisse tester mon interface avec des données fixe sans passé par un serveur web. Ainsi, j'ouvre ma page html et elle ouvre directement l'XML en local. Et quand je dis "en ligne" c'est que la récupération de l'XML se fait via http.

 

Le truc que je ne comprends pas c'est la différence entre XMLHttpRequest ou document.implementation.
Avec XMLHttpRequest je n'arrive pas à récupérer un fichier en local alors qu'avec document.implementation si. Hors, je pensais que document.implementation ne permétait pas de récupérer en http alors que mon exemple marche aussi en ligne.

 

J'ai écrit un exemple consultable en ligne ici:
http://wanab.free.fr/xmldom/test.html

 

Quelqu'un à une idée ?

 

Voici mon code: (tout commentaire est le bienvenue)

 
Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>test</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6. <script type="text/javascript" language="javascript">
  7. var xmlDoc = false;
  8. function requestXML(url, callback, param){
  9. if (document.implementation && document.implementation.createDocument){ // W3C
  10.  xmlDoc = document.implementation.createDocument("", "", null);
  11.  xmlDoc.onload = function () {
  12.   callback(param)
  13.  }
  14. }
  15. else if (window.ActiveXObject){ // IE
  16.  xmlDoc = new ActiveXObject("Microsoft.XMLDOM" );
  17.  xmlDoc.onreadystatechange = function () {
  18.   if (xmlDoc.readyState == 4) callback(param)
  19.  }
  20. }
  21. else{
  22.  alert('Your browser can\'t handle this script');
  23.  return;
  24. }
  25. xmlDoc.load(url);
  26. }
  27. function displayXML(id){
  28. var element = document.getElementById(id);
  29. element.innerHTML = "XML data:<br>";
  30. element.innerHTML += "xmlDoc.childNodes[0].childNodes[0].nodeValue ====> "
  31.      + xmlDoc.childNodes[0].childNodes[0].nodeValue + "<br>";
  32. element.innerHTML += "xmlDoc.childNodes[0].firstChild.nodeValue ====> "
  33.      + xmlDoc.childNodes[0].firstChild.nodeValue + "<br>";
  34. element.innerHTML += "xmlDoc.getElementsByTagName('root')[0].childNodes[0].nodeValue ====> "
  35.      + xmlDoc.getElementsByTagName('root')[0].childNodes[0].nodeValue + "<br>";
  36. element.innerHTML += "xmlDoc.getElementsByTagName('root')[0].childNodes[0].length ====> "
  37.      + xmlDoc.getElementsByTagName('root')[0].childNodes[0].length + "<br>";
  38. element.innerHTML += "xmlDoc.getElementsByTagName('container')[0].childNodes[0].nodeValue ====> "
  39.      + xmlDoc.getElementsByTagName('container')[0].childNodes[0].nodeValue + "<br>";
  40. element.innerHTML += "xmlDoc.getElementsByTagName('container')[1].childNodes[0].nodeValue ====> "
  41.      + xmlDoc.getElementsByTagName('container')[1].childNodes[0].nodeValue + "<br>";
  42. element.innerHTML += "xmlDoc.getElementsByTagName('container')[2].childNodes[0].nodeValue ====> "
  43.      + xmlDoc.getElementsByTagName('container')[2].childNodes[0].nodeValue + "<br>";
  44. element.innerHTML += "xmlDoc.getElementsByTagName('item')[0].childNodes[0].nodeValue ====> "
  45.      + xmlDoc.getElementsByTagName('item')[0].childNodes[0].nodeValue + "<br>";
  46. element.innerHTML += "xmlDoc.getElementsByTagName('item')[1].childNodes[0].nodeValue ====> "
  47.      + xmlDoc.getElementsByTagName('item')[1].childNodes[0].nodeValue + "<br>";
  48. element.innerHTML += "xmlDoc.getElementsByTagName('item')[2].childNodes[0].nodeValue ====> "
  49.      + xmlDoc.getElementsByTagName('item')[2].childNodes[0].nodeValue + "<br>";
  50. element.innerHTML += "xmlDoc.getElementsByTagName('container')[0].childNodes.length ====> "
  51.      + xmlDoc.getElementsByTagName('container')[0].childNodes.length + "<br>";
  52. element.innerHTML += "xmlDoc.getElementsByTagName('item')[0].childNodes.length ====> "
  53.      + xmlDoc.getElementsByTagName('item')[0].childNodes.length + "<br>";
  54. }
  55. </script>
  56. </head>
  57. <body>
  58. <input type="button" value="GET" onclick="requestXML('data.xml', displayXML, 'myDiv');"/>
  59. <div id="myDiv">...</div>
  60. </body>
  61. </html>
 
Code :
  1. <root>Root0
  2. <container>Container0
  3.  <item>Item0.0</item>
  4.  <item>Item0.1</item>
  5.  <item>Item0.2</item>
  6. </container>
  7. <container>Container1
  8.  <item>Item1.0</item>
  9.  <item>Item1.1</item>
  10.  <item>Item1.2</item>
  11. </container>
  12. <container>Container2
  13.  <item>Item2.0</item>
  14.  <item>Item2.1</item>
  15.  <item>Item2.2</item>
  16. </container>
  17. <container>Container4
  18.  <item>Item3.0</item>
  19.  <item>Item3.1</item>
  20.  <item>Item3.2</item>
  21. </container>
  22. </root>
 

[Edit] J'ai simplifier mon exemple...


Message édité par ZeBorG le 23-11-2007 à 01:26:35
Reply

Marsh Posté le 22-11-2007 à 19:51:48   

Reply

Marsh Posté le 23-11-2007 à 01:26:06    

Vu le manque de réponces à ma question, j'ai simplifé mon exemple ci-dessus.
 
Autre problème, je n'obtiens pas le même résulta avec IE et Firefox.
 
Voici ce que Firefox me donne:

Code :
  1. xmlDoc.childNodes[0].childNodes[0].nodeValue ====> Root0
  2. xmlDoc.childNodes[0].firstChild.nodeValue ====> Root0
  3. xmlDoc.getElementsByTagName('root')[0].childNodes[0].nodeValue ====> Root0
  4. xmlDoc.getElementsByTagName('root')[0].childNodes[0].length ====> 7
  5. xmlDoc.getElementsByTagName('container')[0].childNodes[0].nodeValue ====> Container0
  6. xmlDoc.getElementsByTagName('container')[1].childNodes[0].nodeValue ====> Container1
  7. xmlDoc.getElementsByTagName('container')[2].childNodes[0].nodeValue ====> Container2
  8. xmlDoc.getElementsByTagName('item')[0].childNodes[0].nodeValue ====> Item0.0
  9. xmlDoc.getElementsByTagName('item')[1].childNodes[0].nodeValue ====> Item0.1
  10. xmlDoc.getElementsByTagName('item')[2].childNodes[0].nodeValue ====> Item0.2
  11. xmlDoc.getElementsByTagName('container')[0].childNodes.length ====> 7
  12. xmlDoc.getElementsByTagName('item')[0].childNodes.length ====> 1


Et avec IE:

Code :
  1. idem Firefox + :
  2. xmlDoc.getElementsByTagName('container')[0].childNodes.length ====> 4


 
Comment on fait pour accéder à Item1.2 par exemple?

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed