«¿Quieres aumentar la eficiencia de tus aplicaciones web utilizando tecnología AJAX y jQuery? ¡No te pierdas este artículo donde te mostraremos los mejores controladores de eventos para optimizar tus proyectos online! Descubre cómo utilizarlos y mejorar la experiencia de tus usuarios gracias a TIEngranaje.»
JQueryAjax proporciona una variedad de métodos que se pueden ejecutar cuando ocurren ciertos eventos. Estos métodos registran controladores que se llaman cuando ciertos eventos, como inicialización o finalización, tienen lugar para cualquier solicitud AJAX en la página web. En este artículo, cubriremos los métodos más comunes con más detalle.
Métodos Ajax
Los métodos enumerados en la siguiente tabla son métodos jQuery Ajax comunes que requieren mucho menos código que el Ajax estándar.
| Método | Descripción |
|---|---|
ajaxComplete() |
Especifica una función para ejecutar cuando se completa la solicitud de Ajax |
ajaxError() |
Especifica una función para ejecutar cuando la solicitud de Ajax se completa con un error |
ajaxSend() |
Especifica una función para ejecutar antes de que se envíe la solicitud Ajax |
ajaxStart() |
Especifica una función para ejecutar cuando comienza la primera solicitud de Ajax |
ajaxStop() |
Especifica una función para ejecutar cuando se hayan completado todas las solicitudes de Ajax |
ajaxSuccess() |
Especifica una función para ejecutar una solicitud Ajax completa con éxito |
Ejemplo HTML
Usaremos el siguiente código HTML para los ejemplos que se enumeran a continuación.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.itgeared.com/jquery-ajax-event-handlers/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ... jQuery Code ...
});
</script>
</head>
<body>
<img id="img1" src="go.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Método ajaxStart()
El ajaxStart() El método especifica una función que se ejecutará cuando se inicie una solicitud de Ajax. Una función especificada con el ajaxStart() El método se ejecutará cuando se inicie la solicitud.
Sintaxis
$(selector).ajaxStart(function())| Parámetro | Descripción |
|---|---|
function |
Especifica la función que se ejecutará cuando se inicie la solicitud de Ajax. |
Método ajaxComplete()
El ajaxComplete() El método especifica una función que se ejecutará cuando se complete una solicitud de Ajax. Una función especificada con el ajaxComplete() el método se ejecutará cuando se complete la solicitud, incluso si la función no tuvo éxito.
Sintaxis
$(selector).ajaxComplete(function(event, XMLHttpRequest, ajaxOptions))| Parámetro | Descripción |
|---|---|
event |
Objeto de evento |
XMLHttpRequest |
Objeto XMLHttpRequest |
ajaxOptions |
Opciones utilizadas en la solicitud de Ajax |
Método ajaxStop()
El ajaxStop() El método especifica una función para ejecutar cuando todas las solicitudes de Ajax hayan completado su ejecución. Cuando se completa una solicitud de Ajax, jQuery comprobará para ver si hay otras solicitudes de Ajax para ejecutar. La función definida con el ajaxStop() El método se ejecutará si no hay otras solicitudes pendientes.
Sintaxis
$(selector).ajaxStop(function())| Parámetro | Descripción |
|---|---|
function |
Especifica la función que se ejecutará cuando se completen todas las solicitudes de Ajax. |
Método ajaxSucess()
El ajaxSuccess() El método especifica una función que se ejecutará cuando una solicitud de Ajax se complete con éxito.
Sintaxis
$(selector).ajaxSuccess(function(event, XMLHttpRequest, ajaxOptions))| Parámetro | Descripción |
|---|---|
event |
Objeto de evento |
XMLHttpRequest |
Objeto XMLHttpRequest |
ajaxOptions |
Opciones utilizadas en la solicitud de Ajax |
Método ajaxSend()
El ajaxSend() El método especifica una función para ejecutar antes de que se envíen solicitudes Ajax al servidor.
Sintaxis
$(selector).ajaxSend(function(event, XMLHttpRequest, ajaxOptions))| Parámetro | Descripción |
|---|---|
event |
Objeto de evento |
XMLHttpRequest |
Objeto XMLHttpRequest |
ajaxOptions |
Opciones utilizadas en la solicitud de Ajax |
Método ajaxError()
El ajaxError() El método especifica una función que se ejecutará cuando una solicitud de Ajax falla. En el siguiente ejemplo, puede cambiar la ubicación de origen del archivo definido en el load() para activar este método.
Sintaxis
$(selector).ajaxError(function(event, XMLHttpRequest, ajaxOptions, thrownError))| Parámetro | Descripción |
|---|---|
event |
Objeto de evento |
XMLHttpRequest |
Objeto XMLHttpRequest |
ajaxOptions |
Opciones utilizadas en la solicitud de Ajax |
thrownError |
Contiene la excepción de JavaScript, si ocurrió |
$("#div1").ajaxStart(function () {
$("#progress").css("display", "block");
});
$("#div1").ajaxComplete(function () {
$("#progress").css("display", "none");
});
$("#div1").ajaxStop(function () {
alert("All Ajax processes have completed.");
});
$("#div1").ajaxSuccess(function () {
alert("The load method completed successfully.");
});
$("#div1").ajaxSend(function () {
$(this).html("Loading " + opt.url + ". Please wait...");
});
$("#div1").ajaxError(function () {
alert("An error occured!");
});
$("#img1").click(function () {
$("#div1").load("jquery_ajax_load.aspx");
});