EnglishAJAX (Asynchronous JavaScript And XML) es una tecnologÃa muy popular en el desarrollo web. Nos permite hacer nuestras paginas mas interactivas y responsivas.
En términos simples, AJAX hace uso de JavaScript para llamar al servidor web asÃncronamente y actualizar solo una porción de la pagina con la respuesta que obtenemos del servidor.
El navegador utiliza el objeto XMLHttpRequest para la comunicación con el servidor. PodrÃamos utilizar el objeto directamente en nuestro código JavaScript, pero eso no seria muy practico en aplicaciones robustas. La buena noticia es que existen varias librerÃas AJAX que hacen muy fácil el trabajar con AJAX.
ASP.NET AJAX es la implementación de AJAX de Microsoft que se integra con ASP.NET.
Todo lo que tenemos que hacer para habilitar AJAX en una pagina web es agregar un control ScriptManager.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
Solo un ScriptManager puede existir por pagina. Si agregamos un ScriptManager a una pagina maestra (master page) y agregamos otro ScriptManager a una pagina que hace uso de la pagina maestra, recibirÃamos un error:
“Only one instance of a ScriptManager can be added to the page.†(Solo una instancia de ScriptManager puede ser añadida a la pagina.)
Lo mismo ocurrirÃa si agregamos un ScriptManager a una pagina y agregamos otro a un control de usuario (user control).
Para resolver esto, necesitamos utilizar el control ScriptManagerProxy.
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" />
El control ScriptManagerProxy le permite a una pagina o a un control de usuario encontrar el control ScriptManager definido en la pagina contenedora. Es una buena idea agregar un control ScriptManager a nuestra pagina maestra y utilizar el control ScriptManagerProxy en cada pagina y control de usuario de nuestra aplicación web que necesite utilizar AJAX.
Vamos a probar esto. Abre Microsoft Visual Studio o Microsoft Visual Web Developer Express y crea un nueva Aplicación Web ASP.NET en tu lenguaje favorito. Yo utilice C# y nombre al proyecto WebExample.
Abre el archivo Site.Master y agrega un ScriptManager dentro de la etiqueta form.
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div class="page">
<%-- codigo que no cambia --%>
Ahora abre el archivo Default.aspx y agrega un ScriptManagerProxy dentro de la segunda etiqueta Content.
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" />
<h2>
<%-- codigo que no cambia --%>
Y agrega lo siguiente antes de cerrar la etiqueta Content.
<%-- codigo que no cambia --%>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="lblMessage" Text="Please type your name: "></asp:Label>
<asp:TextBox runat="server" ID="txtName"></asp:TextBox>
<asp:Button runat="server" ID="btnSubmit" Text="Submit" onclick="btnSubmit_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Finalmente, abre el código detrás (Default.aspx.cs) y agrega la siguiente función dentro de la clase.
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblMessage.Text = String.Format("Hi {0}, welcome!", txtName.Text);
txtName.Visible = false;
btnSubmit.Visible = false;
}
Estamos utilizando el control UpdatePanel para poder actualizar una área de la pagina utilizando AJAX. Todo lo que esta dentro de <ContentTemplate> puede ser actualizado por nuestro código sin afectar el resto de la pagina.
Cuando el usuario hace clic en el botón, el código detrás será ejecutado, como es normal, pero solo los 3 controles dentro del UpdatePanel se actualizaran.
Ejecuta la aplicación.
Escribe tu nombre y has clic en Submit.
La pagina se actualiza sin “flashear†como normalmente ocurre con un post-back en ASP.NET. Eso es AJAX en acción.
Por favor deja tus comentarios si tienes alguna pregunta.