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

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 jQuery Hacer que la web sea interactiva: una introducción a jQuery jQuery es una biblioteca de secuencias de comandos del lado del cliente que casi todos los sitios web modernos usan: 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 ...
• 1: Selectores y conceptos básicos Tutorial de jQuery: Introducción: conceptos básicos y selectores Tutorial de jQuery: Introducción: 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 algo de código y aprendamos cómo ...
• 2: Métodos Introducción a jQuery (Parte 2): Métodos y funciones Introducción a 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 sobre cómo incluirlo en su proyecto y los selectores. En la parte 2, continuaremos con ...
• 3: Esperando la carga de la página y funciones anónimas Introducción a jQuery (Parte 3): Esperando a que la página se cargue y Funciones anónimas Introducción a jQuery (Parte 3): Esperando a la página a cargar y Funciones anónimas jQuery es posiblemente una habilidad esencial para el desarrollador web moderno, y en esta miniserie corta espero brindarle el conocimiento para comenzar a utilizarla en sus propios proyectos web. En…
• 4: Eventos Tutorial de jQuery (Parte 4) - Oyentes de eventos Tutorial de jQuery (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 comprensión bastante buena del código básico ...
• Depurar con las herramientas de desarrollador de Chrome Resolver problemas del sitio web con herramientas de desarrollador de Chrome o Firebug Resolver problemas del sitio web con herramientas de desarrollador de Chrome o Firebug Si hasta ahora has seguido mis tutoriales de jQuery, es posible que ya te hayas encontrado con algunos problemas de código y no sabes cómo para arreglarlos Cuando se enfrenta a un bit de código no funcional, es muy ...

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 hayas 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 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 recuperaremos y cómo manipularla.

Para leer más, escribí otro tutorial hace un tiempo sobre el manejo de AJAX en WordPress para el envío de un formulario de contacto. “haga clic en el enlace, vaya a otra página” estructura de Internet 1.0. Permite que los sitios web busquen y muestren dinámicamente contenido sin el usuario ..., por lo que es posible que también desee comprobarlo; implica escribir su propio controlador PHP e integrarlo en el “oficial” Proceso 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 la información más común: // un conjunto de claves: pares de "valores", éxito: función (datos) // manejar un retorno de datos exitoso, error: función (mensaje) // manejar 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 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 un 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í que 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 finalmente queremos almacenarlos como una variable, mientras que the_tags () los repite directamente formateados previamente. En cambio, usaremos get_the_tags ():

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 (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 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; // se detiene cuando tenemos 3 $ ("# flickr"). append ("
Consideraciones SEO
Este no es un punto importante, pero dado que 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 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 seguro que encontrarás más cosas con las que podrías jugar.
La próxima semana será la última lección de la serie jQuery Tutorial mientras revisamos el complemento jQuery UI. Como siempre, comentarios y sugerencias son bienvenidos; Si tiene una pregunta que otros se beneficiarán, considere publicarla en nuestro sitio de Respuestas.