¿Alguna vez has oído hablar de las funciones de devolución de llamada AJAX? Si no es así, te pierdes de una poderosa herramienta que puede mejorar significativamente la eficiencia de tus aplicaciones web. En este artículo, exploraremos la Función de devolución de llamada AJAX y cómo puedes utilizarla para optimizar tu desarrollo web. Sigue leyendo para descubrir más sobre este tema vital en el mundo de TI y engranaje.
La función de devolución de llamada de Ajax que normalmente se asigna como onreadystatechange El controlador de eventos es uno de los componentes críticos dentro del bloque de código Ajax. El función de devolución de llamada es responsable de vigilar de cerca el progreso de las solicitudes.
La devolución de llamada debe identificar el resultado de la solicitud y continuar con el manejo de los datos devueltos por el servidor web. Funciones de devolución de llamada generalmente también sirve como delegador, lo que significa que delegará el procesamiento de otro código a otras áreas de su aplicación JavaScript.
Ejemplo
Usaremos el siguiente código HTML para los ejemplos que se enumeran a continuación.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
loadAjax(){
// ... JavaScript code
}
</script>
</head>
<body>
<img id="img1" onclick="loadAjax()" src="https://www.itgeared.com/ajax-callback-function-tutorial/go.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Sin devolución de llamada
<script type="text/javascript">
function loadAjax() {
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new window.XMLHttpRequest;
} else {
try {
xhr = ActiveXObject("Microsoft.XMLHTTP");
} catch (ex) {
window.console.log("Ajax not supported.");
}
}
if (xhr) {
xhr.onreadystatechange = ajax_response;
xhr.open("GET", "demo_ajax_load.txt", true);
xhr.send(null);
}
function ajax_response() {
if(xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.responseText;
}
}
}
</script>En el ejemplo anterior, configuramos un controlador de eventos para el onreadystatechange evento como nuestro ajax_response() función que se ejecutará cada vez que cambie el estado de la solicitud. Al establecer el onreadystatechange propiedad del objeto Ajax a esta función, nuestra función será llamada cada vez que cambie el estado del objeto. Esto no es óptimo.
El readyState La propiedad puede tener varios valores:
- 0 – solicitud no inicializada
- 1 – conexión de servidor establecida
- 2 – solicitud recibida
- 3 – solicitud de procesamiento
- 4 – solicitud completada y respuesta lista
Llamar de vuelta
<script type="text/javascript">
function loadAjax() {
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new window.XMLHttpRequest;
} else {
try {
xhr = ActiveXObject("Microsoft.XMLHTTP");
} catch (ex) {
window.console.log("Ajax not supported.");
}
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "demo_ajax_load.txt", true);
xhr.send(null);
}
}
</script>En el ejemplo con el función de devolución de llamada, simplificamos y mejoramos la legibilidad del código. La mayoría de los marcos de JavaScript lo alentarán a aprovechar la programación funcional de esta manera.
