Cómo usar la función “ajax” de jQuery

Habiendo seguido los tres tutoriales anteriores, debería haber adquirido un buen conocimiento de AJAX. En este último tutorial, resumiremos las cosas trabajando con un ejemplo más complejo..

El marcado

Para tener una idea de la estructura de este ejemplo, considere el siguiente marcado:

El marcado para el principal el elemento se muestra a continuación:

 
 
Marcos frontales populares
 
Haga clic en cada uno para cargar los detalles a través de AJAX.
 
 Bootstrap Foundation UIkit Semantic UI Skeleton Material Design Lite 
 
 

Observe los enlaces de texto. Estos corresponden a diferentes marcos frontales. Como veremos en la siguiente sección, cada vez que hacemos clic en los enlaces, se ejecutará una solicitud AJAX. Entonces, el elemento con la clase de modal aparecerá y su contenido se actualizará con los datos obtenidos de la respuesta.

Así es como el principal elemento se ve como

Marcado modal

El siguiente paso es examinar la estructura de nuestro modal. Aquí está el código HTML:

 
 ✕ 
 
 
Marco de referencia
  
Versión actual
  
Número de estrellas Github
  
Página Oficial
  
  
 
 

Como puedes ver, el modal contiene algunos elementos vacíos. Los colocamos en el HTML porque su texto cambiará según el enlace en el que hagamos clic y la respuesta que obtengamos..

La siguiente imagen muestra cómo aparece inicialmente el modal:

Por defecto, el modal está oculto. Además, también ocultaremos el cargador. Esto aparecerá solo cuando se active la solicitud AJAX.

Echa un vistazo a las reglas CSS correspondientes:

 .modal opacidad: 0;  .loader mostrar: ninguno;  

Tenga en cuenta que usamos el opacidad propiedad (y no la monitor propiedad) para ocultar el modal porque esta propiedad pertenece a las propiedades animables de CSS. De esta manera, podremos hacer una transición de los estados del modal (es decir, los estados abierto y cerrado).

Generando la respuesta JSON

Para los propósitos de este ejemplo, elegiremos compilar nosotros mismos la respuesta JSON. Específicamente, la respuesta esperada (es decir, la Demo.json archivo) será una matriz de objetos. Cada objeto contendrá detalles sobre los marcos front-end relacionados.

Por otra parte, el valor de la nombre propiedad coincidirá con los enlaces de texto de la principal Elemento (ver apartado anterior). Con eso en mente, la estructura de la respuesta se ve algo como esto:

 ["url": "http://getbootstrap.com/", "numberOfStars": "88.260+", "currentVersion": "3.3.5", "name": "Bootstrap", "url": "http://foundation.zurb.com/", "numberOfStars": "21.180+", "currentVersion": "5.5.3", "name": "Foundation", // 4 objetos más aquí] 

Nota: Los valores que hemos usado para el numberOfStars y versión actual Las propiedades son falsas y puramente con fines de demostración..

Al igual que en los ejemplos anteriores de esta serie, usaremos AJAX para solicitar un archivo estático. Sin embargo, si queremos insertar contenido proveniente de otros sitios (por ejemplo, Google Maps, Flickr), deberíamos leer su documentación de API y, si es necesario, solicitar una clave de API.

Además, nuestros datos de destino se encuentran en el mismo servidor que la página de demostración. Por lo tanto, evitaremos las limitaciones que pueden surgir al interactuar con servicios de terceros (consulte la sección "Limitaciones de las solicitudes de AJAX" del primer tutorial).

Implementando la Solicitud AJAX

En esta sección, usaremos jQuery. ajax Función para inicializar una solicitud AJAX. Antes de hacerlo, primero definamos nuestras variables almacenando en la memoria caché los selectores jQuery más utilizados:

 var $ list = $ ('. m-info'), var $ message = $ ('. m-message'); var $ modal = $ ('. modal'); var $ loader = $ ('. loader'); var $ framework; 

Ahora es el momento de examinar el código responsable de la ejecución de la solicitud:

 $ ('. boxes a'). on ('click', function (e) e.preventDefault (); $ framework = $ (this) .text (); $ .ajax (url: 'Demo.json' , dataType: 'json', beforeSend: function () $ loader.show ();). done (successFunction) .fail (errorFunction) .always (alwaysFunction);); 

Notarás la sintaxis de la ajax La función se ve de la siguiente manera:

 $ .ajax ([configuración]) 

los ajustes parámetro es un objeto de configuración que contiene información sobre nuestra solicitud. El número de propiedades que puede tener este objeto es muy largo (alrededor de 34 propiedades). En aras de la simplicidad, solo discutiremos aquellos que se utilizan en esta demostración. Más específicamente:

Propiedad	Descripción
url	Una cadena que contiene la URL a la que se envía la solicitud.
tipo de datos	El formato de los datos de respuesta (por ejemplo,. json, xml, html).
antesEnviar	Una función de devolución de llamada que se ejecuta antes de que enviemos la solicitud. Aquí, esta función activa el código que muestra el cargador..

Antes de continuar, vale la pena mencionar tres cosas:

• También hay otra sintaxis para el ajax función: $ .ajax (url [, configuración])
• Todas las propiedades de configuración del ajustes los parámetros son opcionales.
• El método HTTP predeterminado es OBTENER.

Metodos de promesa

los ajax La función devuelve el objeto jQuery XMLHttpRequest o jqXHR. Este objeto implementa la interfaz de Promesa y, por lo tanto, contiene todas las propiedades, métodos y comportamiento de una Promesa..

En este ejemplo, usamos los siguientes métodos de promesa:

• hecho
• fallar
• siempre

los hecho método se dispara si la solicitud tiene éxito. Recibe uno o más argumentos, todos los cuales pueden ser una sola función o una serie de funciones. Por ejemplo, en nuestra demo, la successFunction () se pasa como un argumento.

La función de devolución de llamada (por ejemplo,. successFunction ()) acepta tres argumentos. Primero, los datos devueltos. En segundo lugar, una cadena que categoriza el estado de la solicitud (consulte el artículo anterior para conocer sus posibles valores). Por último, el objeto jqXHR..

los fallar Se llama al método si la solicitud falla. Recibe uno o más argumentos, todos los cuales pueden ser una sola función o una serie de funciones. Por ejemplo, en nuestra demo, la errorFunction () se pasa como un argumento.

La función de devolución de llamada (por ejemplo,. errorFunction ()) acepta tres argumentos: el objeto jqXHR, una cadena que categoriza el estado de la solicitud y otra cadena que especifica el error resultante. Este error recibe la parte textual del estado HTTP, como Extraviado o Prohibido.

los siempre El método se ejecuta cuando finaliza la solicitud, independientemente del éxito (es decir, el hecho método se ejecuta) o falla (es decir, el fallar método se ejecuta) de ello. Nuevamente, recibe como argumento una función única o una matriz de funciones. Por ejemplo, en nuestra demo, la alwaysFunction () se pasa como un argumento.

El estado de la solicitud especifica los argumentos de la función. En caso de una solicitud exitosa, la devolución de llamada (por ejemplo,. alwaysFunction ()) recibe los mismos argumentos que la devolución de llamada de la hecho método. Por el contrario, si la solicitud falla, acepta los mismos argumentos que la devolución de llamada del fallar método.

Nota: En vez de hecho, fallar, y siempre Los métodos de promesa que se utilizan en este ejemplo, también podríamos haber utilizado el éxito, error, y completar Funciones de devolución de llamada. Estas funciones se definen en el ajustes parámetro.

Mostrando los datos

Si la solicitud es exitosa, podemos recuperar los datos de respuesta. Luego, lo manipulamos para rellenar los elementos vacíos del modal..

Considere el código para el éxitoFunción llamar de vuelta:

 function successFunction (data) if (data.length> 0) for (var i = 0; i < data.length; i++)  if ($framework === data[i].name)  $list.show(); $message.hide(); $list.find('li:nth-of-type(2)').text($framework); $list.find('li:nth-of-type(4)').text(data[i].currentVersion); $list.find('li:nth-of-type(6)').text(data[i].numberOfStars); $list.find('li:nth-of-type(8)').html('' + data[i].url + ''); break;  else  $list.hide(); $message.show().text('No data received for this framework!');    else  $list.hide(); $message.text('No data received from your respose!');   

Aunque hemos actualizado el contenido de nuestro modal, esto todavía está oculto. Se vuelve visible y el cargador desaparece cuando finaliza la solicitud. Sólo entonces, el siemprefunción La devolución de llamada se ejecuta:

 function alwaysFunction () $ loader.hide (); $ modal.addClass ('activo');  

los activo clase se ve así:

 .activa opacidad: 1; índice z: 10; transformar: escala (1);  

A continuación puede ver la apariencia esperada del modal si hacemos clic en el botón Oreja enlace de texto:

Un par de escenarios

Es importante entender el código que se ejecuta en ciertas circunstancias. Vamos a cubrir dos escenarios comunes:

• El valor de la nombre propiedad no coincide con los enlaces de texto de la principal elemento. Por ejemplo, supongamos que definimos una URL donde el valor de la nombre propiedad del objeto que está relacionado con el marco de la Fundación es Fundación2 en lugar de Fundación. En tal caso, si pulsamos sobre el Fundación enlace de texto, aparecerá el siguiente modal:

• Los datos de respuesta están vacíos. Digamos, por ejemplo, que definimos una URL que apunta a una matriz vacía. En este caso, el modal se vería así:

Errores de manejo

Por lo tanto, hemos cubierto el código que se activa cuando la solicitud se realiza correctamente. ¿Pero qué pasa si la solicitud falla? En el caso de una solicitud fallida, ocultamos la lista y mostramos un mensaje personalizado.

Aquí está el código de la FailFunction () lo que demuestra ese comportamiento:

 function failFunction (request, textStatus, errorThrown) $ list.hide (); $ message.text ('Ocurrió un error durante su solicitud:' + request.status + "+ textStatus +" + errorThrown);  

Para familiarizarnos con este código, especificamos una URL que no existe. Por lo tanto, la fallar El método se activará y se mostrará el siguiente modo:

Nota: De nuevo, el mensaje de error puede ser diferente si ejecuta este ejemplo localmente.

Aquí está la demostración incrustada de Codepen:

Conclusión

En este tutorial, concluimos nuestro examen de AJAX desde la perspectiva de un diseñador web: ¡bien hecho para seguirlo! Espero que hayas encontrado útil esta serie y hayas aprendido nuevas habilidades..

Como siguiente paso, te animo a examinar las siguientes cosas:

• Familiarícese con los métodos abreviados AJAX de jQuery que no cubrimos (por ejemplo,. $ .getJSON método).
• Implemente sus propias solicitudes AJAX accediendo a archivos estáticos o incluso a datos dinámicos provenientes de servicios de terceros (por ejemplo, Flickr).