A medida que la web evoluciona, surgen nuevas tecnologías y se unen de manera notable. La combinación de Ajax y jQuery, en particular, es una de las uniones más poderosas hasta la fecha.
El propósito de este artículo es brindar una descripción general breve y generalizada de Ajax y jQuery, y también discutir cómo jQuery ha hecho que el desarrollo de Ajax sea más fácil que nunca.
¿Qué es Ajax?
Desde su concepción en 2005[1], Ajax (JavaScript asincrónico y XML) ha cambiado la web como la conocemos hoy. Ha ayudado a los sitios web a evolucionar hacia aplicaciones de Internet enriquecidas (RIA) al permitir que las páginas web realicen solicitudes directas a los servidores web sin recargar la página. Esta capacidad es vital para replicar las ricas experiencias de usuario logradas en las aplicaciones cliente.
Ajax en la práctica
Digamos que tiene un formulario de inicio de sesión para su aplicación web. Para asegurarse de que el nombre de inicio de sesión y la contraseña ingresados por el usuario coincidan sin usar Ajax, su aplicación web tendría que cargar una página web completamente nueva que muestra una pantalla de cuenta si el inicio de sesión fue exitoso, o mostrar una pantalla de error si el error de inicio de sesion. Esta es la forma antigua de gestionar los inicios de sesión.
A enfoque más inteligente Este problema sería verificar si el nombre de usuario y la contraseña son correctos usando Ajax.
Así es como funcionaría Ajax en esta instancia: una vez que el usuario haya escrito un nombre de inicio de sesión y una contraseña y haya enviado el formulario web de inicio de sesión, podría tener una función de JavaScript que invoca una llamada Ajax que envía dos parámetros: el nombre de inicio de sesión y la contraseña.
El servidor web (generalmente a través de un script / lenguaje del lado del servidor como PHP) toma los dos parámetros y luego consulta su base de datos de usuarios para ver si hay una coincidencia.
Si se encuentra una coincidencia en su base de datos, el servidor web puede devolver un indicador de éxito. De lo contrario, el servidor web podría devolver un mensaje de error.
A continuación, tendría una función de JavaScript que acepta la respuesta Ajax. Si la respuesta es exitosa, podría usar window.location para enviar al usuario a la pantalla de su cuenta.
Si la respuesta contiene un mensaje de error, la aplicación puede mostrar el error en la pantalla sin tener que volver a cargar la página.
Lo principal que se puede sacar de esto es que no tiene que volver a cargar una página completa solo para manejar la verificación del nombre de usuario / contraseña, lo que hace que su aplicación web sea más receptiva y, si la página es pesada, le ahorra un ancho de banda significativo.
¿Qué es jQuery?
Lanzado en enero de 2006[2], jQuery es una biblioteca de JavaScript entre navegadores diseñada para simplificar el script HTML del lado del cliente.
Utilizado por cerca de un millón de sitios web[3], jQuery es la biblioteca de JavaScript más popular en uso hasta la fecha.
jQuery facilita el manejo de objetos DOM, eventos, efectos y Ajax, se encarga automáticamente de las fugas de JavaScript y tiene innumerables complementos de terceros.
El problema con Ajax
A pesar de su impacto revolucionario en la web, Ajax puede ser difícil de usar incluso para desarrolladores veteranos.
Las personas generalmente crearán sus propias funciones personalizadas para manejar las llamadas Ajax de modo que la funcionalidad se pueda reutilizar en una aplicación web. Esto puede volverse muy tedioso cuando una aplicación web hace uso de diferentes tipos de llamadas Ajax, como la capacidad de manejar llamadas síncronas y asincrónicas, o la capacidad de manejar diferentes formatos de respuesta, como mensajes de cadena, HTML, CSV, XML, JSON. etc.
Como desarrollador web profesional, personalmente he pasado incontables horas creando métodos personalizados para manejar llamadas Ajax.
Las llamadas tradicionales de Ajax suelen adoptar la siguiente forma:
function httpRequest(id) {
if (window.XMLHttpRequest) { // code for IE7+, FF, Chrome, Opera, Safari
http=new XMLHttpRequest();
}
else { // code for IE6, IE5
http=new ActiveXObject("Microsoft.XMLHTTP”);
}
http.onreadystatechange=function() {
if (http.readyState==4 && http.status==200) {
response = http.responseText;
// do something with response
}
}
dest=”servlet.php?id=” + id;
http.open("GET”, dest);
http.send();
}
Si su aplicación web solo usa una llamada Ajax, no es un gran problema implementar. Sin embargo, el problema ocurre cuando su aplicación web aprovecha muchas llamadas Ajax e intenta dividir el código para hacerlo reutilizable.
La idea de Ajax es enviar una solicitud a algún servidor web, esperar una respuesta y actualizar su página HTML. Sería conveniente crear una función personalizada como httpRequest() que toma dos parámetros, una URL de solicitud y una función de respuesta, que podrían reutilizarse en todo su sistema.
Sin embargo, una vez que comiences a configurar esto, verás inmediatamente que la simple tarea de hacer una llamada Ajax de repente se convierte en una pesadilla cuando intentas construir evaluaciones de funciones de respuesta usando eval() y averiguar cómo hacer que su nueva función maneje llamadas sincrónicas, llamadas asincrónicas y diferentes formatos de respuesta.
Al final del día, la simple idea de crear un httpRequest() La función se convierte rápidamente en un gran proyecto.
La otra ventaja de jQuery es que tiene funciones y métodos Ajax adicionales que puede usar, lo que puede reducir aún más el tiempo de desarrollo y depuración.
Hola Ajax. Conoce a jQuery.
Entre otras ventajas, una de mis características favoritas de jQuery es su capacidad para aprovechar Ajax con muy poco esfuerzo. Para realizar una llamada Ajax, puede hacer algo como esto:
$.Ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
Si ha desarrollado aplicaciones Ajax antes sin jQuery, verá inmediatamente el valor aquí. jQuery ha puesto todas las propiedades de Ajax en una API simple. Puedes controlar todo, incluido el url, cache, función de éxito, tipo de datos e incluso sincronización, todo desde una declaración ordenada. Es nada menos que hermoso.
Comience con Ajax + jQuery
Si aún no está utilizando un marco de desarrollo web de JavaScript como jQuery o MooTools, y planea crear aplicaciones web receptivas, debe aprovechar estas increíbles bibliotecas.
Para jQuery, la siguiente lista destaca algunos tutoriales que puede consultar.
Referencias
- Ajax: un nuevo enfoque para las aplicaciones web
- jQuery 1.0
- Estadísticas de uso de jQuery