11485 sujets

JavaScript, DOM et API Web HTML5

Lire un fichier xml

Pages :
Bonjour a tous!
Il y a different sujet sur ce théme, j'en est lu quelques uns ainsi que d'autre tutoriels, mais je n'arrive pas a trouver de réponse claire sur le sujet.

Voilà le probléme ou plutot le doute:

L'idée est de récuperer des donnée xml pour les afficher dans mon html, je souhaite donc avoir dans ma variable l'arbre du xml, ensuite je gére ces données celon mes besoins avec une fonction getData(ici les données du xml).

La gestion des données il n'y a pas de souci, par contre pour la requete j'ai des doutes voilà les deux fonctions en compétition:


function loadXML(){
  var xmlhttp = false;

  if (window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();}
   
  else if (window.ActiveXObject) {
    try {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");} 
    catch (e) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
  } 

  if (xmlhttp){
     xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
          getData(xmlhttp.responseXML)
        }
     }
  xmlhttp.open("GET", "url",true); 
  xmlhttp.send(null); 
  }
}


et


function loadXML(){
	if (document.implementation && document.implementation.createDocument){
		xmlDoc = document.implementation.createDocument("", "", null);
		xmlDoc.onload = getData;
	}
	else if (window.ActiveXObject){
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.onreadystatechange = function(){
			if (xmlDoc.readyState == 4) getData()
		};
 	}
	if(xmlDoc){
              xmlDoc.load("url");
	}
}


Je suis conscient qu'elle ne sont pas parfaitement écrite, mais j'aimerais savoir qu'elle est la bonne piste.

1. Le "document.implementation.createDocument" est il plus robuste que le "XMLHttpRequest"?. Est-il supporté par safari?

2. Indépendament des supports par les differents naviguateurs, quel est celui qui est le plus propre par rapport au spécification w3c?

3. Il me semble, mais peut-être que je me trompe, que le "document.implementation.createDocument" est plus rapide. Dans le cas ou son implementation n'est pas suffisante ne pourrait on pas faire un fonction qui testerais celle-ci d'abords puis XMLHttpRequest comme ça:

function loadXML(){

  
if (document.implementation && document.implementation.createDocument){
   xmlDoc = document.implementation.createDocument("", "", null);
   xmlDoc.load("url");
   xmlDoc.onload = function(){
      getData(this)
  }
}else{

  var xmlhttp = false;
	
  if (window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();}
   
  else if (window.ActiveXObject) {
      try {xmlhttp = new ActiveXObject("Msxml3.XMLHTTP");} 
      catch (e) { 
        try{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}
        catch (e) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
     }
  } 

  if (xmlhttp){
     xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
          getData(xmlhttp.responseXML)
        }
     }
  xmlhttp.open("GET", "url",true); 
  xmlhttp.send(null); 
  }
  }
}


3. Est-il réellement necessaire d'écrire toute les variantes du ActiveXObject pour ie, (Msxml2.XMLHTTP, Msxml3.XMLHTTP), j'ai vu par exemple des truc comme ça:

try {xmlhttp = new ActiveXObject("Msxml3.XMLHTTP");} 
catch (e) { 
  try{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}
  catch (e) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
}


Apparament c'est lié au differentes version des parser xml d'Explorer
mais est ce un luxe inutile ou ça a vraiment un avantage?

4. Toujours pour ie, j'ai vu sur OpenWeb, qu'ils utilisent des /*@cc_on comme comentaires conditionnels ie, j'aime pas voir c'est signes, alors je préfére tester les methodes, mais bon comme c'est OpenWeb, je me demande si c'est pas mieux...

Merci a vous si arrivez a dissiper ces doutes pour que je puisse charger mes xml dans en toute sérénité. [code]
Modifié par matmat (25 May 2007 - 16:30)
Modérateur
Salut,

matmat a écrit :
L'idée est de récuperer des donnée xml pour les afficher dans mon html

Pourquoi passer par Javascript ? Afin d'être sûr que ça ne passera pas sur certaines config' ? Smiley sweatdrop
a écrit :

Pourquoi passer par Javascript ? Afin d'être sûr que ça ne passera pas sur certaines config' ?


En fait l'idée c'est plutot que ça soit mieux sur certaine config, mais toujours accessible...

@hakkou, un truc interresant dans le post que tu cites c'est que tu enléve carrément la verification du chargement (onreadystatechange), pour un simple rep.async="false"; est ce que c'est fiable comme méthode? aurais tu un peu plus d'explications?
Modérateur
oui mais j'entendais par là que si tu passais par php (option: et xslt), ça marcherait partout. Pour ce genre de chose, c'est quand même plus intéressant et plus robuste. Smiley cligne Là, tu pourrais te servir d'une fonction DOMDocument::loadXML() de qualité. Smiley ravi
Modifié par koala64 (17 Apr 2007 - 06:37)
matmat a écrit :

Pourquoi passer par Javascript ? Afin d'être sûr que ça ne passera pas sur certaines config' ?


En fait l'idée c'est plutot que ça soit mieux sur certaine config, mais toujours accessible...

@hakkou, un truc interresant dans le post que tu cites c'est que tu enléve carrément la verification du chargement (onreadystatechange), pour un simple rep.async="false"; est ce que c'est fiable comme méthode? aurais tu un peu plus d'explications?
en fait si tu regarde bien mon truc c'est que j'utilise Ajax.request ! et c'est prototype qui se charge de la verification ^^ normalement je ne met pas MICROSOFTXMLDOM car c'est a prototype de le faire mais comme xlmdom est un nouveau truc ba il n'est pas encore integrer dans la methode de verification de prototype ^^
et mon script est compatible sous IE et FF ^^
Modérateur
... et c'est aussi Smiley flamethrower Proutotype Smiley enforcer qui rend le site inaccessible à ceux qui ne bénéficient que de petits débits ainsi qu'à tous les supports qui ne comprennent pas Ajax. On peut faire sans ; c'est même recommandé pour la portabilité et l'accessibilité de votre application. Ajax n'est ici qu'une option qui ne sert qu'à soulager le serveur, rien de plus... sans compter qu'il n'y a rien de tel (Les Prout request) pour vous faire croire que vous savez coder. Peut-être faudrait-il commencer par savoir faire sans et à quoi sert Ajax non ? C'est la base. Smiley angry
koala64 a écrit :
... et c'est aussi Smiley flamethrower Proutotype Smiley enforcer qui rend le site inaccessible à ceux qui ne bénéficient que de petits débits ainsi qu'à tous les supports qui ne comprennent pas Ajax. On peut faire sans ; c'est même recommandé pour la portabilité et l'accessibilité de votre application. Ajax n'est ici qu'une option qui ne sert qu'à soulager le serveur, rien de plus... sans compter qu'il n'y a rien de tel (Les Prout request) pour vous faire croire que vous savez coder. Peut-être faudrait-il commencer par savoir faire sans et à quoi sert Ajax non ? C'est la base. Smiley angry

euh .... la base apprise en cours ^^
aprés je sais pas si le bas debit existe encore on m'a dit de le faire avec prout je le fait avec ^^'
Modérateur
Je devrais me faire prof alors. Smiley murf ( ou suivre un stage pour apprendre à coder histoire de leur mettre la misère. Smiley biggol )

Le bas débit est omniprésent ; le web n'est pas accessible qu'aux ordinateurs de bureau (équipés de l'adsl qui plus est ).
C'est encore pire que de considérer Javascript comme obligatoire. Smiley cligne
koala64 a écrit :
Je devrais me faire prof alors. Smiley murf ( ou suivre un stage pour apprendre à coder histoire de leur mettre la misère. Smiley biggol )

je te le conseil ^^ ta juste a donner a tes eleves un poly pour comment faire une requete ajax et leur demander de faire un tout petit script en utilisant le inner html (calcul de somme par exemple) ensuite si on te pose des question tu dis "je ne sais pas " et voila tu sera un bon prof ^^'
Smiley lol
Modifié par hakkou (17 Apr 2007 - 16:26)
Je n'ai jamais eu besoin d'utiliser prototype, ni aucune autre librairie, et la totalité du poids de mes scripts ne dépasse jamais 15k... Et depuis toutes les discutions qu'on a eu sur ce forum j'utilise javascript uniquement en surcouche, et mes pages sont accessibles sans même ici par exemple ou c'est le délire du js la page reste visible et agréable sans.

Ma fonction loadXml, n'a pas besoin d'aucune autre librairie elle est autonome, j'aimerais juste l'améliorer une peu. Aprés l'utilisation d'Ajax, ça peu être super, je ne sais pas si tu connais l'interface privée de Spip par exemple, il y a une surcouche d'Ajax dans la gestion des documents et des mots-clés c'est vraiment pratique. Il y a plein d'autre exemple, et de plus c'est facile de faire en sorte que ça marche trés bien sans js.

Le débat n'est donc plus Ajax ou pas Ajax, mais effectivement pourquoi et comment. Ceci dit je suis tout a fait d'accord que dans 80% des cas ça sert à rien. Le plus drole que j'ai vu ce sont des sites avec 100k de js pour des pages html de 5K, du coup le site mouline à mort pour charger le js a chaque requete alors que ce serait casiment immediat avec une nouvelle pas et une bonne feuille de style.

Enfin bon un fichier xml peut se charger en dix lignes et j'aimerais bien savoir la meilleur methode...
Modifié par matmat (17 Apr 2007 - 18:10)
Modérateur
a écrit :
Je n'ai jamais eu besoin d'utiliser prototype, ni aucune autre librairie, et la totalité du poids de mes scripts ne dépasse jamais 15k...
Oui je sais Smiley cligne Je ne remettais pas cela en cause. c'est plus que je te voyais partir dans une mauvaise direction.

a écrit :
Et depuis toutes les discutions qu'on a eu sur ce forum j'utilise javascript uniquement en surcouche, et mes pages sont accessibles sans même ici par exemple ou c'est le délire du js la page reste visible et agréable sans.
Ben... là par exemple, j'aurais à redire. Smiley smile Non pas que le script soit mal codé mais ta page met trois plombes à charger et pèse 386ko (tout ça à cause du chargement des images). Ce que te permet Ajax, c'est justement de temporiser le chargement. Tu peux par exemple mettre une animation d'attente le temps que chaque image se charge (une par une et pas tout d'un coup) ce qui fait passer l'attente de manière plus agréable. En revanche, tout charger au démarrage rend la page inaccessible au petit débit. Bien employé, Ajax permet justement l'inverse.

En fait, je n'ai rien contre Ajax, je suis tout à fait d'accord que ça peut être un plus mais malheureusement l'utilisation qu'en font la plupart est vraiment nulle. On s'en sert à tort et à travers, là où ça ne sert à rien la plupart du temps, quitte à rendre l'application inaccessible.

a écrit :
Enfin bon un fichier xml peut se charger en dix lignes et j'aimerais bien savoir la meilleur methode...
Attention quand même à ne pas faire d'amalgame... La meilleure méthode n'est pas forcémment celle qui fait 10 lignes. Un code de 20 lignes peut être plus performant. Bien souvent, ce qui ralentit le plus l'application est la manière dont on fait les boucles... (plus que le nombre d'octets pris par le script)

Bref, pour ton fil RSS, je te conseillerais plutôt de regarder de ce côté :

http://ghostdogpr.developpez.com/articles/rss/

En optimisant tout ça, tu peux par la suite et si tu le souhaites, ajouter une surcouche Ajax qui se contenterait de lancer une requête vers la fonction php et d'en récupérer la réponse.
Modifié par koala64 (17 Apr 2007 - 18:51)
Merci pour le lien,

Pour le poid de la page, c'est surtout du à l'effet, noir&blanc/couleur au survol (mal géré) qui double le poid des vignettes.
Sinon je ne peux pas vraiment reduire plus, 20 vignettes X 8k = 160 (la comme c'est doublé ça fait + de 300). Et comme c'est publié a partir d'une base de donnée ce n'est pas moi qui décide du nombres.

C'est vrai qu'une petite anim d'attente serait sympa Smiley smile .

Dans tout les cas les sites de photos, ou de video c'est difficile de les faire rentré dans les standards de poids sans baissé trop la qualité. Je te donne un exemple sur ce même site il y a des Quicktime de 2M, je les avait recodé en flash de moins de 200k avec une bonne qualité, le photographe n'a rien voulu savoir il a préféré la qualité Quicktime (c'est vrai c'est le top), même si personne ne les vois.

Charger du xml en php je le fait déjà un peu, pas forcément trés proprement et beaucoup aidé par Spip qui gére trés bien les flux provenant d'autre site par exemple là les évenement vienne d'autre sites, ils sont classés par dates et ça marche trés bien. Là je voudrait pour un autre portail faire venir des infos d'autres sites sur demande d'ou l'utilisation d'Ajax.

De tout façon pour travailler tranquillement, il vaut mieux que le site fonctionne trés bien sans js, sinon au moindre disfonctionnement du js le client et les visiteurs deviennent fou Smiley lol (surtout si ils ont un ie6 buggé)! Au moins tu peux développer tranquille et t'es sur que ça marche toujours.

Donc maintenant ce que je fais c'est d'abord un html/css propre et ensuite les scripts.

Sinon sans vouloir insister lourdement, que penses tu des différentes fonctions (du début du post), qu'elle est celle que tu penses la plus robuste?.
Modérateur
Salut,

Je pense que tu fais une petite confusion. Smiley smile

Si le but n'est que de charger un document xml, tu peux passer par ceci, ç'est à dire ta seconde fonction.

Si en revanche tu dois faire une requête en passant des paramètres (qui permettent de faire varier la réponse), alors XHR est nécessaire.
Modifié par koala64 (18 Apr 2007 - 06:08)
Hello, Smiley smile
koala64 a écrit :
Si en revanche tu dois faire une requête en passant des paramètres (qui permettent de faire varier la réponse), alors XHR est nécessaire.
Pourquoi ? Ne peut-on pas passer des paramètres en GET ? J'avoue en tout cas que je ne connaissais pas cette solution.
Modérateur
Salut,

Julien Royer a écrit :
Pourquoi ? Ne peut-on pas passer des paramètres en GET ? J'avoue en tout cas que je ne connaissais pas cette solution.
Ben si, c'est ce que je voulais dire. Smiley smile Tu peux en faire passer aussi bien en GET qu'en POST mais si on a qu'un fichier XML à charger, ce n'est à priori pas la peine de passer par XHR.

matmat a écrit :
Apparament c'est lié au differentes version des parser xml d'Explorer
mais est ce un luxe inutile ou ça a vraiment un avantage?
C'est différentes versions de la librairie et ce n'est pas un luxe ; ça te permet de prendre en charge ceux qui ne sont pas à jour.

Perso, j'utilise quelquechose comme ça :
var oO =
{
	XHRSupport: (typeof XMLHttpRequest != "undefined"),

	ActiveXSupport: (window.ActiveXObject),

	MSXML: ["Microsoft.XMLHTTP",
		"MSXML2.XMLHTTP", "MSXML2.XMLHTTP.3.0",
		"MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.5.0",
		"MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.7.0"],

	_createXHR: function()
	{
		if(oO.XHRSupport)
			return new XMLHttpRequest;
		else if(oO.ActiveXSupport)
		{
			var iI = oO.MSXML.length - 1;

			for(; iI >= 0; iI--)
			{
				try
				{
					return new ActiveXObject(oO.MSXML[iI]);
				}
				catch(oError) { }
			}
			throw new Error("L'objet XHR n'a pas été créé.");
		}
	},

	_getXHR: function(sUrl)
	{
		var oXHR = oO._createXHR();

		oXHR.open('get', sUrl, false);

		oXHR.onreadystatechange = function()
		{
			if(oXHR.readyState == 1)
				oO._tempXHR();
			if(oXHR.readyState == 4)
				if(oXHR.status && /200|304/.test(oXHR.status))
					oO._setData(oXHR.responseXML);
		}
		oXHR.send(null);
	},

	_tempXHR: function()
	{
		// ...
	},

	_setData: function(sData)
	{
		// ...
	},

	// ...
};


avec dans le PHP :
<?php
header('Pragma: no-cache');
header('Expires: 0');
header('Last-Modified: ' . gmdate("D, d M Y H:i:s") . ' GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Content-type: text/plain');

//...

?>
Merci beaucoup Smiley biggrin ,

juste une petit précision, j'ai vu que Safari, n'est pas super fiable(sans plus de precision), sur document.implementation.createDocument, quand est-il réellement et de maniére plus génerale, faut-il mieux mettre quand même XHR comme deuxiéme solution (comme la troisiéme fonction) si document.implementation.createDocument, n'a pas fonctionné ou ça sert à rien.
Modérateur
C'est un peu au choix de chacun. Je trouve que ce qui compte surtout, c'est que tu puisses, si quelquechose ne fonctionne pas, te rencarder sans problème sur la fonction php qui est derrière. C'est surtout comme ça que je conçois l'Ajax. J'en fais un max en php et je viens compléter par quelques petites touches de js pour améliorer le comportement. J'y gagne en sûreté, en accessibilité mais aussi en mise en oeuvre (il y a beaucoup moins d'exceptions en php qu'en js, c'est plus simple à coder et je n'ai pas besoin de sortir un code monstrueux en js).

Ca veut dire, dans ton cas, que pour faire la lecture d'un fichier xml, je fais une fonction en php et lorsque je clique sur un lien pour accéder à la page contenant le code résultant, je peux, si je le souhaite, passer un argument à cette fonction php via XHR, ce qui me permet de rester sur la page précédente en la mettant à jour. XHR ne se limite qu'à l'appel et la réception des données... Je ne m'amuse pas à tout reconstruire derrière ; j'emploie l'existant. Si on ajoute document.implementation.createDocument, il faut alors, en plus et dans ce cas bien précis, traiter les données pour les afficher puisque je change de logique : je ne fais plus une requête mais je dois reproduire toute la mise en forme via js. (je ne prend pas la peine de le faire)
Modifié par koala64 (18 Apr 2007 - 15:42)
Pages :
Sujet clos
Aller à