Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. Ajax
Webdesign

Guía para principiante, AJAX con jQuery

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called AJAX for Front-End Designers.
An Example of AJAX With Vanilla JavaScript
How to Use jQuery’s “ajax” Function

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

En el primer artículo de esta serie, cubrimos los fundamentos de AJAX. En el segundo, analizamos un ejemplo de trabajo usando vanilla JavaScript.

En este tutorial, andaremos a través de algunos de los métodos y funciones relacionadas con el AJAX de jQuery. Más específicamente, echaremos un vistazo más de cerca al método de carga load y la función genérica de ajax.

Utilizando el método load

El método load de jQuery es un método simple, pero potente para recuperar datos remotos. A continuación puede ver su sintaxis:

La siguiente tabla muestra los posibles parámetros:

Parámetro Descripción Obligatorio
url Un string que contiene el URL al que se envía la solicitud.
data Los datos (como una cadena o un objeto llano) que se envían al servidor con la petición. No
complete Una función de callback que se ejecuta cuando finaliza la solicitud, ya sea con éxito o sin éxito. No

Aquí están los parámetros de la función de callback:

Parámetro Descripción
responseText Los datos de la solicitud.
textStatus Un string de categoriza el estado de la solicitud.
jqXHR El objeto XMLHttpRequest (jqXHR) de jQuery, que es un superconjunto del objeto XMLHttpRequest (XHR) nativo del navegador.

La siguiente lista resume los posibles valores del parámetro textStatus:

Para entender mejor cómo funciona el método load, vamos a revisar el ejemplo explicado en el tutorial anterior.

Una vez más, un vistazo a esta sencilla estructura HTML:

Así es como se ve:

Example

Recuerde que queremos actualizar el contenido del elemento #bio con los datos de respuesta, tan pronto como se haga clic en el botón.

Aquí está el código de jQuery requerido:

Suponiendo que la solicitud es exitosa (por ejemplo cuando textStatus es success o notmodified), el resultado final tendría este aspecto:

success_jQuery

También, considere la siguiente visualización que describe una solicitud exitosa:

Javascript_jQuery_Objects

La parte izquierda de esta visualización muestra el objeto XHR como se imprime en la consola del explorador si usamos JavaScript puro (ver tutorial anterior) para hacer la solicitud. Por otro lado, la parte derecha muestra el respectivo objeto jqXHR como se imprime si se utiliza el método load. 

Sin embargo, en caso de una petición sin éxito, debería aparecer el mensaje correspondiente. Para ello, tenemos que monitorear el valor del parámetro textStatus y mostrar un mensaje de error:

error_jQuery

Nota: Si usted ejecuta el ejemplo en su entorno local (y guarda el archivo de Bio.txt), el mensaje de error probablemente será diferente. Por ejemplo, se puede ver el resultado siguiente:

error_locale_jQuery

Por último, cabe mencionar que, de forma predeterminada, el método load utiliza el método HTTP GET, a menos que nos envíe datos como un objeto al servidor. Sólo entonces, se invoca el método POST.

Ver la demo de Codepen a continuación:

Ahora, vamos a modificar el formato del archivo que solicitamos desde el servidor. En concreto, para este ejemplo, los datos deseados se incluyen en el archivo Bio.html en lugar del archivo Bio.txt. También cabe destacar: que el archivo de destino contiene dos párrafos.

Suponiendo que sólo queremos cargar el primer párrafo, vamos a tener que actualizar el código inicial como sigue:

Asi es como se ve:

success_jQuery_trim

Y aquí está la demo en Codepen:

Conclusión

En este tutorial, queda demostrado cómo se puede utilizar AJAX con jQuery. Para hacer las cosas más interesantes, también trabajamos con un par de ejemplos prácticos. En el último y restante tutorial de esta serie, vamos a rodear algunas cosas importantes y trabajaremos con un ejemplo más.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.