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:
1 |
$(selector).load(url[, data][, complete]) |
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. | Sí |
| 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:
1 |
- success |
2 |
- notmodified |
3 |
- nocontent |
4 |
- error |
5 |
- timeout |
6 |
- abort |
7 |
- parsererror |
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:
1 |
<div>
|
2 |
<img src="Einstein.jpg" alt="Einstein"> |
3 |
<button id="request">Learn more about Einstein</button> |
4 |
<div id="bio"></div> |
5 |
</div>
|
Así es como se ve:
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:
1 |
var $btn = $('#request'); |
2 |
var $bio = $('#bio'); |
3 |
|
4 |
$btn.on('click', function() { |
5 |
$(this).hide(); |
6 |
$bio.load('Bio.txt', completeFunction); |
7 |
});
|
8 |
|
9 |
function completeFunction(responseText, textStatus, request) { |
10 |
$bio.css('border', '1px solid #e8e8e8'); |
11 |
if(textStatus == 'error') { |
12 |
$bio.text('An error occurred during your request: ' + request.status + ' ' + request.statusText); |
13 |
}
|
14 |
}
|
Suponiendo que la solicitud es exitosa (por ejemplo cuando textStatus es success o notmodified), el resultado final tendría este aspecto:
También, considere la siguiente visualización que describe una solicitud exitosa:
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:
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:
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:
1 |
$btn.on('click', function() { |
2 |
// this line only changes
|
3 |
$bio.load('Bio.html p:first-child', completeFunction); |
4 |
});
|
Asi es como se ve:
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.
By
