A medida que nos acercamos al final de nuestra serie de mini-tutoriales de jQuery, ya es hora de que examinemos 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 recargue toda la página. Desde flujos de estado infinitos al estilo de Facebook hasta la presentación de datos de formularios, hay un millón de situaciones de la vida real 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 ya que se complementan entre sí.
- Introducción: ¿Qué es jQuery y por qué debería importarme? 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 scripts del lado del cliente que casi todos los sitios web modernos usan, lo que 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 - Conceptos básicos: Conceptos básicos y selectores Tutorial de jQuery - Conceptos básicos: 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 descubramos cómo ... Leer más
- 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 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 selectores. En la parte 2, continuaremos con ... Leer más
- 3: Esperando carga de 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 sin duda una habilidad esencial para el desarrollador web moderno, y en esta breve mini serie, espero darte el conocimiento para comenzar a utilizarlo en tus propios proyectos web. En ... Leer más
- 4: Tutorial de jQuery de eventos (Parte 4) - Tutorial de jQuery de escuchas de evento (Parte 4) - Escuchadores de eventos Hoy vamos a darle un puntapié y mostrar dónde brilla realmente jQuery: los eventos. Si siguió los tutoriales anteriores, ahora debería tener una comprensión bastante buena del código básico ... Leer más
- Depurando con herramientas de desarrollo de Chrome Calcula problemas de sitio web con herramientas de desarrollo de Chrome o Firebug averigua problemas de sitio web con herramientas de desarrollo de Chrome o Firebug Si has seguido mis tutoriales de jQuery hasta ahora, es posible que ya hayas tenido algunos problemas de código y no sé 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 asincrónico y XML, pero la palabra clave aquí es asincrónica . Asincrónico 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 de manera dinámica, hay muchas posibilidades de que esté usando AJAX para hacerlo.
Antes de AJAX, cualquier forma de interacción con un servidor, ya sea la obtención de datos nuevos o la publicación de información del usuario, debería haberse realizado utilizando una nueva carga de página y redirecciones.
Hoy veremos el uso de un servicio de terceros, Flickr, de quien podemos usar AJAX para buscar algunas imágenes usando un tipo de datos JSON. En realidad, no importa cómo Flickr implementa el lado receptor, porque esa es la belleza de las API : todo lo que necesitamos saber es una URL API, qué tipo de datos vamos a recuperar y cómo manipularlo.
Para leer más, escribí otro tutorial hace un tiempo sobre el manejo de AJAX en WordPress para enviar un formulario de contacto. Un tutorial sobre el uso de AJAX en WordPress. Un tutorial sobre el uso de AJAX en WordPress AJAX es una tecnología web notable que nos llevó más allá del simple "enlace de clic"., vaya a otra página "estructura de Internet 1.0. Permite que los sitios web busquen y muestren dinámicamente el contenido sin que el usuario ... Lea más, por lo que es posible que desee verificarlo también; implica escribir su propio controlador de 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 or your PHP handler URL ", datatype:"JSON", // depending on what kind of data you want back, but JSON is the most common data: { //a set of key:"value" pairs }, success:function(data){ //handle a successful return of data }, error:function(message){ //handle the error } }); Esto parece bastante complejo al principio, no ayudado por la falta de sangrado de este complemento de código, pero verás lo fácil que es llegar 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 agregar 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 sabes que solo vas a recuperar los datos de JSON, creo que aprender el método AJAX real es más importante, así es como lo haremos.
Primero, uno arriba de single.php y trataremos de hacer eco de una simple lista separada por comas de las etiquetas de publicación actuales. Normalmente, usaría the_tags () para hacer esto, pero eso no es bueno ya que queremos almacenarlos como una variable, mientras que the_tags () los repite directamente formateados. En cambio, usaremos get_the_tags ():
name.", "; }?> Esto funciona muy bien, así que enviaremos esto dentro de una solicitud de 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 hace para enviar a la consola del navegador, o alertar a un mensaje de error si hay uno. Para hacer algo con los datos devueltos, agregue un lugar para colocar las imágenes:
Y edite el parámetro de éxito de la llamada AJAX para iterar sobre los elementos que se devuelven.
$.each(data.items, function(i, item){ if(i==3) return false; // stop when we have 3 $("#flickr").append(" 
"); }); Y ahí lo tenemos. Estamos agregando 3 elementos del objeto JSON devuelto (los datos están indexados en cero, de modo que si llegamos al ítem 3, en realidad estamos en el cuarto ítem. Confuso, lo sé. En ese punto, usamos return false para saltar del cada () iterador). Ya examiné el contenido de los objetos que se devuelven, así que sé la estructura de datos y solo estoy extrayendo un enlace y una referencia IMG. Si estás interesado en saber qué más se devuelve, simplemente tira un console.log (artículo) allí.
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 incluyó la etiqueta DIY para una carrera de pollo sin cita previa, y Flickr me ha regalado bricolaje. Bonito. Por supuesto, este es uno de los obstáculos que enfrenta al trabajar con una API y hacer cosas automáticamente; podría volver a etiquetar sus publicaciones (una tarea considerable), cambiar la solicitud para pedir "todas" las etiquetas en lugar de "cualquiera" (que probablemente no devuelva nada en este caso), o crear un nuevo campo personalizado al 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 usted está en el negocio de desarrollar sitios web, debe mencionarse: los motores de búsqueda no indexarán contenido que no existe al cargar la página, como cualquier cosa que se haga a través de AJAX. Lo peor que podría hacer sería crear un AJAXify completo de su blog para que la página de inicio no sea más que un contenedor similar a un iframe para todo el contenido que se carga dinámicamente. Use AJAX sabiamente para mejorar el contenido de la página, no como un reemplazo . O enfrentar graves consecuencias.
Gracias por leer, y espero haberles dado algunas ideas. Por supuesto, Flickr no es la única API disponible, 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 de tutoriales de jQuery mientras revisamos el plugin jQuery UI. Como siempre, los comentarios y sugerencias son bienvenidos; Si tiene una pregunta de la que otros se beneficiarán, considere publicarla en nuestro sitio de Respuestas.