Cómo usar ajax para crear una función de inicialización para la programación html5 y css3

Video: Como Crear un Chat con HTML5, CSS3, PHP, MYSQL y AJAX

Muchas páginas HTML5 y CSS3 requieren una función de inicialización. los body onload mecanismo se utiliza con frecuencia en DOM / javascript para hacer que las páginas se cargan tan pronto como el documento ha empezado a cargar. Esta es una función que se ejecuta temprano para preparar el resto de la página. Mientras body onload hace este trabajo bien, un par de problemas existen con la técnica tradicional:

  • Se requiere hacer un cambio en el código HTML. El código javascript debe estar completamente separada de HTML. Usted no debería tener que cambiar el código HTML para hacer que funcione con javascript.

  • El momento todavía no está del todo bien. El código especificado en body onload no se ejecuta hasta que se visualice la página entera. Sería mejor si se registró el código después el DOM está cargado pero antes de Se muestra la página.

Cómo utilizar $ (document) ready ()

jQuery tiene una gran alternativa a body onload que supera estas deficiencias. Echar un vistazo al código para ver cómo funciona:

ready.html

Utilizando el mecanismo de document.ready

Hizo este cambio?

Este código se utiliza la técnica de jQuery para ejecutar el código de inicialización:

Video: 02.- Curso de javascript para principiantes. El DOM. El mapa de un documento web

  • El cuerpo de la etiqueta ya no tiene unaonload atributo. Esta es una característica común de la programación jQuery. El HTML ya no tiene conexión directa con el javascript jQuery porque permite que el código javascript unirse a la página web.

    Video: Aprende a validar formularios HTML con jQuery y CSS

  • La función de inicialización se crea con el $ (Document) ready () función. Esta técnica le dice al navegador para ejecutar una función cuando el DOM ha terminado de cargar (para que tenga acceso a todos los elementos de la forma), pero antes de que la página se muestra (de manera que cualquier efecto de forma instantánea aparecen para el usuario).

  • $ documento hace que un objeto jQuery de todo el documento. El documento completo se puede convertir en un objeto jQuery especificando documento dentro de ps función. Tenga en cuenta que usted no utiliza comillas en este caso.

  • La función especificada es ejecutar de forma automática. En este caso particular, se desea ejecutar el Cambiame() función, por lo que lo coloca en el parámetro de la Listo() método. Tenga en cuenta que esto se refiere a Cambiame como una variable, por lo que no tiene comillas o paréntesis.

Ves varios otros lugares (sobre todo en el manejo de eventos), donde jQuery espera una función como un parámetro. Tal función se refiere con frecuencia como una llamar de vuelta porque la función se llama después de haberse producido algún tipo de evento. También se puede ver funciones de devolución de llamada que responden a eventos de teclado, ratón de movimiento, y la realización de una petición AJAX.

Alternativas a document.ready

A veces se ve un par de atajos porque es muy común para ejecutar el código de inicialización. Se puede acortar

 $ (Document) ready (changeMe) -

al siguiente código:

 $ (ChangeMe) -

Si el código no está definida dentro de una función y Cambiame es una función definida en la página, jQuery se ejecuta automáticamente la función directamente al igual que el document.ready enfoque.

También puede crear una función anónima directamente:

 $ (Document) ready (function () {$ ("#salida") .html ("Cambié") -}) -

Este método (anónimo función) es engorroso, pero con frecuencia ver el código jQuery utilizando esta técnica. Se puede crear una función llamada en eso() y llamarlo con una línea como la siguiente:

$ (Init) -

Esta técnica es simple y fácil de entender pero puede encontrarse con las otras variaciones al examinar el código en la web.

Artículos Relacionados