Tutorial de jQuery (Parte 5): ¡AJAX a todos!

Anuncio

A medida que nos acercamos al final de nuestra serie de mini-tutoriales jQuery, es hora de que analicemos en profundidad una de las características más utilizadas de jQuery. AJAX permite que un sitio web se comunique con un servidor en segundo plano sin requerir que se vuelva a cargar toda la página. Desde transmisiones de estado infinitas al estilo de Facebook hasta el envío de datos de formularios, hay un millón de situaciones diferentes de la vida real en las que esta técnica puede ser útil.

Si no ha leído los tutoriales anteriores, le sugiero que lo haga antes de abordar esto, ya que se basan uno en el otro.

• Introducción: ¿Qué es jQuery y por qué debería importarle? Hacer que la web sea interactiva: una introducción a jQueryjQuery es una biblioteca de secuencias de comandos del lado del cliente que casi todos los sitios web modernos utilizan: hace que los sitios web sean interactivos. No es la única biblioteca de Javascript, pero es la más desarrollada, más compatible y más utilizada ... Lee mas
instagram viewer
• 1: Selectores y conceptos básicos Tutorial de jQuery - Introducción: conceptos básicos y selectoresLa semana pasada, hablé sobre la importancia de jQuery para cualquier desarrollador web moderno y por qué es increíble. Esta semana, creo que es hora de que nos ensuciemos las manos con algo de código y aprendamos cómo ... Lee mas
• 2: métodos Introducción a jQuery (Parte 2): Métodos y funcionesEsto es parte de una introducción continua para principiantes a la serie de programación web jQuery. La Parte 1 cubrió los conceptos básicos de jQuery sobre cómo incluirlo en su proyecto y los selectores. En la parte 2, continuaremos con ... Lee mas
• 3: Esperando carga de página y funciones anónimas Introducción a jQuery (Parte 3): Esperando a que la página se cargue y funciones anónimasSe puede decir que jQuery es una habilidad esencial para el desarrollador web moderno, y en esta miniserie breve espero brindarle el conocimiento para comenzar a utilizarla en sus propios proyectos web. En... Lee mas
• 4: eventos Tutorial de jQuery (Parte 4): oyentes de eventosHoy vamos a mejorarlo y realmente mostraremos dónde brilla jQuery: eventos. Si siguió los tutoriales anteriores, ahora debería tener una comprensión bastante buena del código básico ... Lee mas
• Depuración con las herramientas de desarrollador de Chrome Resuelva los problemas del sitio web con las herramientas de desarrollador de Chrome o FirebugSi ha estado siguiendo mis tutoriales de jQuery hasta ahora, es posible que ya se haya encontrado con algunos problemas de código y no sepa cómo solucionarlos. Cuando se enfrenta a un bit de código no funcional, es muy ... Lee mas

¿Un qué?

AJAX es un acrónimo de Javascript asincrónico y XML, pero la palabra clave aquí es asincrónico. Asíncrono se refiere al hecho de que estas solicitudes se producen en segundo plano, sin interrumpir la experiencia de navegación del usuario. Probablemente nunca lo haya notado antes, pero si un sitio web se está actualizando dinámicamente, hay una buena posibilidad de que esté usando AJAX para hacerlo.

Antes de AJAX, cualquier forma de interacción con un servidor, ya sea para obtener nuevos datos o publicar información del usuario, debería haberse realizado utilizando una nueva carga de página y redirecciones.

Hoy vamos a ver el uso de un servicio de terceros, Flickr, de quien podemos usar AJAX para obtener algunas imágenes usando un tipo de datos JSON. En realidad, no importa cómo Flickr implemente el lado receptor de las cosas, porque esa es la belleza de APIs - todo lo que necesitamos saber es una URL de API, qué tipo de datos vamos a recuperar y cómo manipularlos.

Para leer más, escribí otro tutorial hace un tiempo sobre manejo de AJAX en WordPress para el envío de un formulario de contacto Un tutorial sobre el uso de AJAX en WordPressAJAX es una tecnología web notable que nos trasladó más allá del simple "haga clic en el enlace, vaya a otra página" estructura de Internet 1.0. Permite a los sitios web buscar y mostrar dinámicamente contenido sin el usuario... Lee mas , por lo que es posible que desee comprobar eso también; implica escribir su propio controlador PHP e integrarlo en el proceso "oficial" de WordPress AJAX.

El método AJAX

Aquí está el formato básico de una solicitud AJAX:

$ .ajax ({type: "GET or POST", url: "API o la URL de su controlador PHP", tipo de datos: "JSON", // dependiendo de qué tipo de datos desea recuperar, pero JSON es el más datos comunes: {// un conjunto de claves: pares de "valores"}, éxito: función (datos) {// maneja una devolución exitosa de datos}, error: función (mensaje) {// maneja el error } });

Esto parece bastante complejo al principio, no ayudado por la falta de sangría de este complemento de código, pero verá lo fácil que es cuando se llega a un ejemplo del mundo real.

Flickr API AJAX

En este ejemplo, vamos a tomar las etiquetas asociadas con la publicación actual de WordPress y buscar algunas imágenes para agregarlas al final del artículo. Hay una ejemplo similar en la documentación de jQuery, pero utiliza un método abreviado llamado getJSON () en lugar de explicar un formato AJAX completo. Si bien esta es una forma válida de hacer las cosas si sabe que solo va a recuperar los datos JSON, creo que aprender el método AJAX real es más importante, así es como lo haremos.

Primero uno arriba single.php e intentaremos hacer eco de una simple lista separada por comas de las etiquetas de publicación actuales. Por lo general, usarías the_tags () para hacer esto, pero eso no es bueno ya que eventualmente queremos almacenarlos como una variable, mientras the_tags () los repite directamente formateados previamente. En cambio, usaremos get_the_tags ():

php. $ tagslist = get_the_tags (); foreach ($ tagslist como $ tag) { echo $ etiqueta-> nombre. ","; }

Esto funciona bien, por lo que enviaremos esto dentro de una solicitud AJAX a la URL de la API de Flickr de la siguiente manera (tenga en cuenta que esta es una captura de pantalla; para preservar la sangría, el código está disponible en este PasteBin).

En este punto, todo lo que hace es enviarlo a la consola del navegador, o alertar un mensaje de error si hay uno. Para hacer realmente algo con los datos devueltos, agregue en algún lugar para colocar las imágenes:

Y edite el éxito parámetro de la llamada AJAX para iterar sobre el artículos que son devueltos

$ .each (data.items, function (i, item) {if (i == 3) return false; // para cuando tengamos 3 $ ("# flickr"). append (""); });

Y ahí lo tenemos. Fueron anexando 3 elementos del objeto JSON devuelto (los datos están indexados a cero, así que si llegamos al elemento 3, en realidad estamos en el cuarto elemento. Confuso, lo sé. En ese punto, usamos falso retorno saltar de la cada() iterador). Ya examiné el contenido de los objetos que se devuelven, así que conozco la estructura de datos y solo extraigo un enlace y una referencia IMG. Si está interesado en saber qué más se devuelve, simplemente arroje un console.log (elemento) ahí.

Aquí están los resultados en mi sitio de prueba, y el código completo en este PasteBin. Tenga en cuenta que los resultados devueltos son básicamente basura: mi publicación incluía la etiqueta Bricolaje para gallinero sin citay Flickr me ha dado tejer bricolaje. Agradable. Por supuesto, este es uno de los obstáculos que enfrenta cuando trabaja con una API y hace las cosas automáticamente; puede volver a etiquetar sus publicaciones (una tarea considerable), cambiar la solicitud para solicitar "todas" las etiquetas en lugar de "cualquiera" (es probable que regrese nada en este caso), o proponga un nuevo campo personalizado al que especifique una palabra clave específica para usar con la API (probablemente más fácil)

Consideraciones SEO

Este no es un punto importante, pero dado que usted está en el negocio de desarrollar sitios web, debería ser mencionado: los motores de búsqueda no indexarán contenido que no existe en la carga de la página, como cualquier cosa que se haga a través de AJAX. Lo peor que podría hacer sería AJAXificar completamente su blog para que la página de inicio fuera simplemente un contenedor de tipo iframe para todo el contenido que se carga dinámicamente. Use AJAX sabiamente, para mejorar el contenido de la página, no como reemplazo. O enfrentar graves consecuencias.

Gracias por leer, y espero haberte dado algunas ideas. Por supuesto, Flickr no es la única API que existe, solo Google "API pública"Y seguramente encontrará más cosas con las que podría jugar.

La próxima semana será la última lección de la serie de Tutoriales de jQuery mientras revisamos el complemento de la interfaz de usuario de jQuery. Como siempre, comentarios y sugerencias son bienvenidos; Si tiene una pregunta que otros se beneficiarán, considere publicarla en nuestro sitio de Respuestas.