2010-11-10 5 views
13

Je souhaite qu'une page soit entièrement chargée avant d'émettre un appel ajax pour mettre à jour la base de données. Je peux appeler une fonction javascript dans l'événement body onload afin que la page soit entièrement chargée, mais je ne suis pas sûr de savoir comment déclencher l'appel Ajax à partir de là. Y a-t-il un meilleur moyen d'y parvenir?Appel ajax javascript à la page onload

+0

La mise à jour de la base de données est strictement liée à l'événement de page onload? ou il pourrait être effectué lorsque votre serveur commence à envoyer la page? –

Répondre

36

Ceci est vraiment facile en utilisant une bibliothèque JavaScript, par ex. en utilisant jQuery vous pouvez écrire:

$(document).ready(function(){ 
$.ajax({ url: "database/update.html", 
     context: document.body, 
     success: function(){ 
      alert("done"); 
     }}); 
}); 

Sans jQuery, la version la plus simple pourrait être la suivante, mais il ne tient pas compte pour le traitement des différences de navigateur ou erreur:

<html> 
    <body onload="updateDB();"> 
    </body> 
    <script language="javascript"> 
    function updateDB() { 
     var xhr = new XMLHttpRequest(); 
     xhr.open("POST", "database/update.html", true); 
     xhr.send(null); 
     /* ignore result */ 
    } 
    </script> 
</html> 

Voir aussi:

+0

ya thats bien mais ca je le fais sans utiliser jQuery? –

+0

'$ .ready' est l'équivalent de' DOMContentLoaded' pas 'load'. Votre comparaison jquery/vanilla peut être trompeuse sur ce point. Votre version à la vanille devrait écouter l'événement en utilisant 'document.addEventListener' et non l'attribut' onload' qui est considéré comme une très mauvaise pratique. – ngryman

+0

FYI: Avis de dépréciation: Les rappels jqXHR.success(), jqXHR.error() et jqXHR.complete() sont supprimés à partir de jQuery 3.0. Vous pouvez utiliser jqXHR.done(), jqXHR.fail() et jqXHR.always() à la place. – mmv1219

4

Ou avec Prototype:

Event.observe(this, 'load', function() { new Ajax.Request(...)); 

Ou mieux, définir la fonction ailleurs plutôt que de ligne, puis:

Event.observe(this, 'load', functionName); 

Vous n'avez pas besoin d'utiliser spécifiquement jQuery ou Prototype, mais j'espère que vous utilisez une sorte de bibliothèque. L'une ou l'autre bibliothèque va gérer la gestion des événements d'une manière plus cohérente que l'onload, et bien sûr va faciliter le traitement de l'appel Ajax. Si vous devez utiliser l'attribut body onload, vous devriez simplement pouvoir appeler la même fonction que celle référencée dans ces exemples (onload="javascript:functionName();").

Cependant, si la mise à jour de votre base de données ne dépend pas du rendu sur la page, pourquoi attendre jusqu'à ce qu'elle soit complètement chargée? Vous pourriez simplement inclure un appel à la fonction d'appel Ajax à la fin du JavaScript sur la page, ce qui devrait donner presque le même effet.

Questions connexes