En esta sugerencia rápida, le mostraré cómo cargar datos de un archivo XML en una página en blanco. Trabajaremos con la función $ .get y también implementaremos un gif de carga mientras se recupera la información. Mostraremos una lista simple de libros de desarrollo web recomendados. Sigamos adelante y comencemos.

Paso uno: revisa el guión

Primero, echemos un vistazo a nuestro simple archivo XML. Simplemente contiene algunos libros junto con su título, imagen y descripción..

    la información va aquí.     la información va aquí.     la información va aquí.    

A continuación, echemos un vistazo a la jQuery real.

 $ (document) .ready (function () $ .get ('myData.xml', function (d) $ ('body'). append ('
 Libros de desarrollo web recomendados 
'); $ ('cuerpo'). añadir ('
'); $ (d) .find ('libro'). each (function () var $ book = $ (este); var title = $ book.attr ("title"); var description = $ book.find ('description ') .text (); var imageurl = $ book.attr (' imageurl '); var html ='
  
'; html + = '
 '; html + = '
'+ título +'
'; html + = '
 '+ descripción +'
'; html + = '
'; $ ('dl'). append ($ (html)); $ ('. loadingPic'). fadeOut (1400); ); ); );

Paso Dos: Descifra el Tiempo

Debido a que este es un consejo rápido, repasaré el script un poco más rápido de lo que normalmente lo haría. Cuando el documento esté listo para ser manipulado, vamos a buscar nuestro archivo XML usando la función "$ .get". Entre paréntesis, pasaremos la ubicación del archivo y luego ejecutaremos una función de devolución de llamada. Usaré la variable "d" para representar la información que se extrajo del archivo XML. A continuación, vamos a crear una etiqueta de encabezado y una lista de definiciones.

Continuando, vamos a buscar a través del archivo XML (d) y encontrar la etiqueta titulada "libro". Volviendo a mi documento, hay tres libros. Por consiguiente, tendremos que ejecutar el método "cada" para realizar una operación para cada libro.. Recuerde, "cada" es como las declaraciones "for". Es una forma de ejecutar cada elemento del conjunto envuelto..

En el siguiente bloque de código, estoy definiendo algunas variables. Para obtener el "título" y la "descripción" de nuestro archivo XML, usamos ".attr (valor)" - donde "valor" es igual al atributo dentro de la etiqueta.

Por último, estamos creando una variable llamada "html" que contendrá el html que mostrará la información de nuestro archivo XML. Sin embargo, la simple asignación de esa información a la variable no la mostrará en la página. Para agregarlo a la página, tomamos la lista de definiciones y agregamos la variable. - $ ('dl'). append ($ (html));

Una cosa más que vale la pena mencionar es que, mientras se recupera la información del archivo XML, mostraremos un gif de carga estándar (a través de una imagen de fondo). Cuando los datos se hayan cargado, tomaremos la imagen y la borraremos..

Estas hecho

Sé que pasé por eso un poco rápido; Así que siéntase libre de dejar un comentario y hacer cualquier pregunta que pueda tener. Se debe tener en cuenta que este script requerirá un poco más de trabajo antes de que esté listo para un sitio web del mundo real. Tienes que compensar a las personas que tienen Javascript desactivado. En este caso, si lo tuvieran apagado, estarían mirando una página en blanco. Usted debe compensar tales cosas. Pero yo divago.