11540 sujets

JavaScript, DOM et API Web HTML5

[résolu] Remplir un élément HTML

Bonjour,
je suis nouveau sur ce forum, et je débute en javacript/ajax.

j'ai bien entendu commencé à lire différentes documentations et tuto, mais j'ai une question peut être simple, mais je n'arrive pas à comprendre le fonctionnement, j'essaye de remplir une div a l'aide d'ajax, voici mon code :

<html>
<head>
		<script type='text/JavaScript'>
	 
function maFonctionAjax()
{
   var MonAjax;
   if (window.XMLHttpRequest)
   {
      // Mozilla, Safari, ...
      MonAjax = new XMLHttpRequest();
   }
   else if (window.ActiveXObject)
   {  
      // IE
      MonAjax = new ActiveXObject('Microsoft.XMLHTTP');
   }
   else 
   {
      alert("Votre navigateur n'est pas adapté pour faire des requêtes AJAX..."); 
      MonAjax = false;
   }
   
   MonAjax.open('GET',"txt.txt",true); 
   
   MonAjax.onreadystatechange = function()
   {
      if (MonAjax.readyState == 4 && MonAjax.status == 200)
      {
     document.getElementById('ma_div').innerHTML = MonAjax.responseText;
		
	}
         
    }
	MonAjax.send(null);  
   }

		</script>

</head>

<body>
		<div id="ma_div"></div>

	</body>

</html>


Je n'ai aucune erreur dans la console de chrome mais la page reste blanche. Je ne suis pas vraiment sur d'avoir compris le fonctionnement de document.getElementById.

par exemple ici j'ai réussi a faire ça :

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
  <div id="affichage">test</div>
  <script type="text/javascript"> 
var prenom = "toto";
document.getElementById("affichage").innerHTML = prenom;
 
</script>
 
</body>
</html>


Mais je n'ai pas compris pourquoi il fallait impérativement que le script soit positionné après mon div sinon rien ne s'affichait.

Merci pour votre aide.
Modifié par lechatz (08 Feb 2013 - 15:05)
Bonjour,

si tu exécutes un code javascript qui modifie un élément html placé après, tu risques que l’exécution se lance avant que toute ta page html soit chargée en particulier l’élément que tu souhaites modifier. Javascript aura alors du mal à le modifier s’il n’est pas encore arrivé. La solution tu lances ta fonction maFonctionAjax() une fois que la page est chargée en utilisant l’événement onload. Au passage tu en profites pour définir ta fonction ajax non pas dans le head (ça ne sert à rien et cela ralentit l’affichage de la page) mais juste avant la balise </body>. Tu peux ainsi mettre juste avant ta balise </body> entouré par <script type="text/javascript"> et </script> :
function maFonctionAjax() {
    // Code de la fonction
}
window.onload = function () {
    "use strict";
    maFonctionAjax();
};
Sujet clos
Aller à