Jquery tutorial (parte 5): ajax a todos!

A medida que nos acercamos al final de nuestra serie de mini-tutorial de jQuery, que es hora de que tomamos una mirada más profunda a una de las características más usadas de jQuery. AJAX permite a un sitio web para comunicarse con el servidor en segundo plano sin requerir la página entera para recargar. De las corrientes de estado infinito de estilo Facebook para enviar los datos del formulario, hay un millón de situaciones de la vida real diferentes en las que esta técnica puede ser útil.

Si usted no ha leído los tutoriales anteriores, le sugiero que lo haga antes de hacer frente a este, ya que construir una sobre la otra.

• Introducción: ¿Qué es jQuery y por qué te importa?
• 1: selectores y Fundamentos
• 2: Métodos
• 3: A la espera de carga de la página y funciones anónimas
• 4: Eventos
• Depurar con herramientas de desarrollo de Chrome

Vídeo: jQuery Crash Course [5] - Ajax

¿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 estas solicitudes se presentan en el fondo, no interrumpir la experiencia de navegación del usuario. Probablemente nunca has dado cuenta antes, pero si un sitio web se actualiza dinámicamente, hay una buena probabilidad de que está usando AJAX para hacerlo.

Antes de AJAX, cualquier forma de interacción con un servidor, ya sea ir a buscar nuevos datos o publicar información de vuelta desde el usuario, tendría que haber hecho uso de una nueva carga de la página y redirecciones.

Hoy vamos a buscar en el uso de un servicio de terceros, Flickr - de los que podemos utilizar AJAX para traer algunas imágenes utilizando un tipo de datos JSON. En realidad, no importa cómo Flickr implementa el lado receptor de las cosas, porque esa es la belleza de API - todo lo que necesitamos saber es una URL de la API, qué tipo de datos que vamos a volver, y cómo manipularlo.

Vídeo: jQuery Ajax Tutorial #1 - Using AJAX & API's (jQuery Tutorial #7)

Para leer más, escribí otro tutorial hace un tiempo acerca manejo de AJAX en WordPress para el envío de un formulario de contacto, por lo que es posible que desee comprobar que fuera también- se trata de escribir su propio controlador de PHP, y la integración que en el proceso de WordPress AJAX “oficial”.Un tutorial sobre el uso de AJAX en WordPressUn tutorial sobre el uso de AJAX en WordPressAJAX es una notable tecnología web que nos mueve más allá de la simple “enlace de clic, ir a otra página” estructura de Internet 1.0. Permite a los sitios web para acarrear dinámicamente y contenido de la pantalla sin que el usuario ...Lee mas

El método AJAX

Aquí está el formato básico de una petición AJAX:

ps.ajax({tipo: "GET o POST",url: "API o la URL de su manejador de PHP ",tipo de datos:"JSON",// dependiendo de qué tipo de datos que desea volver, pero JSON es el más común datos: { // un conjunto de llaves:"valor" pares}, éxito:función(datos){ // manejar un retorno exitoso de los datos}, error:función(mensaje){ // manejar el error}}) -

Esto parece bastante complejo al principio - no ayudado por la falta de sangría desde el código del plugin - pero se podrán ver lo fácil que es cuando se llega a un ejemplo del mundo real.

Flickr API AJAX

En este ejemplo, vamos a agarrar las etiquetas asociadas con el puesto de WordPress actual, a buscar algunas imágenes para añadir al final del artículo. Hay un ejemplo similar en la documentación de jQuery, pero utiliza un método de atajo llamada getJSON () en lugar de explicar un formato completo de AJAX. Si bien esta es una forma válida de hacer las cosas si se sabe que sólo va a obtener datos JSON atrás, me siento que el aprendizaje del método actual AJAX es más importante, por lo que es como lo haremos.

Vídeo: Tutorial codeigniter 6 - AJAX JQuery combos y tablas

En primer lugar, uno para arriba single.php y vamos a tratar de hacer eco a cabo un simple coma lista separada de las etiquetas de correos actuales. Normalmente, se usaría the_tags () para hacer esto, pero eso no es bueno, ya que queremos almacenar finalmente estos como una variable, mientras the_tags () se hace eco de ellas directamente pre-formateados. En su lugar, vamos a utilizar get_the_tags ():

lt;? php$ tagslist = get_the_tags()-para cada($ tagslist como $ etiqueta){eco $ etiqueta-gt;nombre.","-}?gt;

Esto funciona muy bien, así que vamos a la producción de este interior de una petición AJAX a la URL de la API de Flickr de la siguiente manera (nota, esto es una captura de pantalla - con el fin de preservar la sangría, el código está disponible en este PasteBin).

En este punto, todo lo que hace a la salida de la consola del navegador, o avisar a un mensaje de error si es que existe. Para realmente hacer algo con los datos devueltos, añadir algún lugar para que las imágenes se coloca:

Vídeo: jQuery Tutorial - 101 - AJAX Load

lt;div carné de identidad="flickr"gt;divgt;

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

ps.cada(datos.artículos, función(yo,ít){Si(yo==3) regreso falso- // parada cuando tenemos 3ps("#flickr").adjuntar("+ít.enlazar+"">