2010-11-10 41 views
13

Deseo que una página se cargue por completo antes de emitir una llamada ajax para actualizar la base de datos. Puedo invocar una función de JavaScript en el evento de carga del cuerpo para que la página esté completamente cargada, pero no estoy seguro de cómo activar la llamada Ajax desde allí. ¿Hay alguna forma mejor de lograr esto (la base de datos de actualización después de la carga de la página)?Javascript ajax call on page onload

+0

La actualización de la base de datos está estrictamente relacionada con el evento de la página de carga? o podría realizarse cuando su servidor comience a enviar la página? –

Respuesta

36

Esto es realmente fácil usando una biblioteca de JavaScript, p. usando jQuery podría escribir:

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

Sin jQuery, la versión más simple podría ser la siguiente, pero no tiene en cuenta las diferencias de su navegador o la gestión de errores:

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

Ver también:

+0

ya está bien, pero ¿puedo hacer esto sin usar jQuery? –

+0

'$ .ready' es el equivalente de' DOMContentLoaded' no 'load'. Su comparación jquery/vainilla puede ser engañosa en ese punto. Su versión estándar debe escuchar el evento utilizando el atributo 'document.addEventListener' y no' onload', que se considera una práctica realmente mala. – ngryman

+0

FYI: Aviso de desaprobación: Las devoluciones de llamada jqXHR.success(), jqXHR.error() y jqXHR.complete() se eliminan a partir de jQuery 3.0. Puede usar jqXHR.done(), jqXHR.fail() y jqXHR.always() en su lugar. – mmv1219

4

O con el prototipo

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

O mejor, definir la función en otro lugar en vez de en línea, entonces:

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

No tiene que usar jQuery o Prototype específicamente, pero espero que esté utilizando algún tipo de biblioteca. Cualquiera de las bibliotecas manejará el manejo de eventos de una manera más consistente que onload y, por supuesto, hará que sea mucho más fácil procesar la llamada Ajax. Si debe usar el atributo de carga del cuerpo, entonces debería poder llamar a la misma función que se hace referencia en estos ejemplos (onload="javascript:functionName();").

Sin embargo, si la actualización de su base de datos no depende del renderizado en la página, ¿por qué esperar hasta que esté completamente cargada? Simplemente podría incluir una llamada a la función de llamadas Ajax al final del JavaScript en la página, que debería dar casi el mismo efecto.