Tutorial de jQuery (Parte 5) ¡AJAX todos ellos!

A medida que nos acercamos al final de nuestra serie de mini tutoriales de jQuery, es hora de que echemos un vistazo más a fondo a 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 necesidad de volver a cargar la página completa. Desde flujos de estado infinitos al estilo de Facebook hasta el envío de datos de formularios, hay un millón de situaciones reales diferentes 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 a medida que se desarrollan unos sobre otros..

• Introducción: ¿Qué es jQuery y por qué debería importarte? Cómo hacer que la web sea interactiva: una introducción a jQuery Cómo hacer que la web sea interactiva: una introducción a jQuery jQuery es una biblioteca de scripts del lado del cliente que utiliza casi todos los sitios web modernos: hace que los sitios web sean interactivos. No es la única biblioteca de Javascript, pero es la más desarrollada, la más compatible y la más utilizada ... Leer más
• 1: Selectores y conceptos básicos Tutorial de jQuery - Primeros pasos: conceptos básicos y selectores Tutorial de jQuery - Procedimientos iniciales: conceptos básicos y selectores La 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 algún código y aprendamos cómo ... Leer más
• 2: Introducción a los métodos de jQuery (Parte 2): Introducción a los métodos y funciones de jQuery (Parte 2): Métodos y funciones Esto es parte de una introducción para principiantes en curso a la serie de programación web jQuery. La Parte 1 cubrió los conceptos básicos de jQuery de cómo incluirlo en su proyecto y los selectores. En la parte 2, continuaremos con ... Leer más
• 3: esperando la carga de la página y funciones anónimas Introducción a jQuery (Parte 3): esperando la página para cargar y funciones anónimas Introducción a jQuery (Parte 3): esperando la página para cargar y funciones anónimas jQuery es una habilidad esencial para El desarrollador web moderno, y en esta pequeña miniserie, espero poder darle el conocimiento para comenzar a utilizarlo en sus propios proyectos web. En… Leer más
• 4: Tutorial de eventos de jQuery (Parte 4) - Oyentes de eventos Tutorial de jQuery de eventos (Parte 4) - Oyentes de eventos Hoy vamos a mejorarlo y realmente mostraremos dónde brilla jQuery: eventos. Si siguió los tutoriales anteriores, ahora debería tener una buena comprensión del código básico ... Leer más
• Debugging with Chrome Developer Tools Descubra los problemas del sitio web con Chrome Developer Tools o Firebug Descubra los problemas del sitio web con Chrome Developer Tools o Firebug Si ha estado siguiendo mis tutoriales de jQuery hasta ahora, es posible que ya haya encontrado algunos problemas de código y no sepa cómo para arreglarlos. Cuando se enfrenta con un bit de código no funcional, es muy ... Leer más

Un qué?

AJAX es un acrónimo de Javascript asíncrono 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, es muy probable que esté usando AJAX para hacerlo..

Antes de AJAX, cualquier forma de interacción con un servidor, ya sea mediante la obtención de nuevos datos o la publicación de información por parte del usuario, debería haberse realizado utilizando una nueva carga de página y redirecciones..

Hoy vamos a analizar el uso de un servicio de terceros, Flickr, desde el cual podemos usar AJAX para obtener algunas imágenes utilizando un tipo de datos JSON. Realmente no importa cómo Flickr implementa 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 manipularla.

Para leer más, escribí otro tutorial hace un tiempo sobre cómo manejar AJAX en WordPress para enviar un formulario de contacto. Un tutorial sobre cómo usar AJAX en WordPress. Un tutorial sobre cómo usar AJAX en WordPress. “haga clic en el enlace, vaya a otra página” Estructura de internet 1.0. Permite a los sitios web obtener y mostrar contenido de forma dinámica sin el usuario ... Leer más, por lo que es posible que también desees verlo; implica escribir su propio controlador PHP e integrarlo en el “oficial” Proceso 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 dato más común: // un conjunto de claves: "valor" pares, éxito: función (datos) // manejar un retorno exitoso de datos, error: función (mensaje) // manejar el error);

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

API de Flickr AJAX

En este ejemplo, vamos a agarrar las etiquetas asociadas con la publicación actual de WordPress y recuperar algunas imágenes para adjuntarlas al final del artículo. Hay un ejemplo similar en la documentación de jQuery, pero utiliza un método de atajo llamado getJSON () En lugar de explicar un formato completo AJAX. Si bien esta es una forma válida de hacer las cosas si sabes que solo recuperarás los datos de 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 repetir una lista separada por comas simple de las etiquetas de publicación actuales. Típicamente, usarías las_tags () para hacer esto, pero eso no sirve, ya que queremos almacenarlos como una variable, mientras que las_tags () Los repite directamente pre-formateados. En su lugar, usaremos get_the_tags ():

nombre.","; ?>

Esto funciona muy bien, así que lo mostraremos dentro de una solicitud AJAX a la URL de la API de Flickr de la siguiente manera (nota, 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 enviar a la consola del navegador o alertar un mensaje de error si lo hay. Para hacer algo con los datos devueltos, agregue un lugar para colocar las imágenes:

Y editar el éxito parámetro de la llamada AJAX para iterar sobre el artículos que se devuelven.

$ .each (data.items, function (i, item) if (i == 3) return false; // se detiene cuando tenemos 3 $ ("# flickr"). append (""););

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

Aquí están los resultados en mi sitio de prueba y el código completo en este PasteBin. Observe que los resultados devueltos son básicamente basura: mi publicación incluyó la etiqueta Bricolaje para a pie de gallina, y Flickr me ha dado tejer bricolaje. Bonito. Por supuesto, este es uno de los obstáculos que enfrenta cuando trabaja con una API y hace las cosas automáticamente; puede reetiquetar sus publicaciones (una empresa considerable), cambiar la solicitud para solicitar “todos” etiquetas en lugar de “alguna” (es probable que no devuelva nada en este caso), o cree un nuevo campo personalizado en el que especificaría una palabra clave específica para usar con la API (probablemente la más fácil).

Consideraciones SEO

Este no es un punto importante, pero como está en el negocio de desarrollar sitios web, debe mencionarse: los motores de búsqueda no indexarán el contenido que no existe en la carga de la página, como todo lo que se hace a través de AJAX. Lo peor que podrías hacer sería convertir AJAXify completamente en tu blog para que la página de inicio fuera simplemente un contenedor tipo iframe para todo el contenido que se carga dinámicamente. Usa AJAX sabiamente, para mejorar el contenido de la página, no como reemplazo. O afrontar terribles 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 estás seguro de encontrar más cosas con las que podrías jugar.

La próxima semana será la lección final en la serie de tutoriales de jQuery, ya que verificamos el complemento de la interfaz de usuario de jQuery. Como siempre, bienvenidos los comentarios y sugerencias; Si tiene una pregunta de la que otros se beneficiarán, considere publicarla en nuestro sitio de Respuestas.

Explorar más sobre: ​​jQuery, Programación, Desarrollo Web.