Si estas empezando en el mundo de desarrollo web habrás escuchado, en más de una ocasión, la palabra AJAX y cómo la misma puede resolver muchos de tus problemas al desarrollar una aplicación web. Pero ¿qué es AJAX realmente? AJAX es la abreviación para Asynchronous JavaScript and XML y no es otra cosa que un grupo de técnicas web utilizadas desde el cliente (el navegador) para crear aplicaciones web asíncronas. Ok, ahora explícamelo de manera que lo pueda entender. Es la manera de hacer peticiones al servidor, desde el navegador, sin tener que hacer un postback ni volver a cargar la página. Se usa para actualizar el áreas de la página web que deseamos, dejando todo lo demás intacto. Por ejemplo, si tenemos una página web donde configuramos el perfil de un usuario, podemos guardar sus datos o buscar más información sin hacer un postback.

Para este artículo vamos a utilizar la librería de JavaScript JQuery ya que permite hacer uso de AJAX sumamente fácil. También vamos a estar utilizando ASP.Net con C# para el código de servidor. Debes estar pensando, ¿cómo hago un request para actualizar solo un área de mi página web? A continuación les muestro un ejemplo.

Imaginen que tenemos una aplicación que necesita la funcionalidad de buscar en el servidor un número aleatorio para mostrárselo al usuario cada vez que usuario presione un botón. Las posibilidades son infinitas. Esto es un simple ejemplo de lo que podemos hacer con AJAX. Asi que, ¡comencemos!

En Visual Studio, en este ejemplo estoy usando Visual Studio 2012, vamos a crear un nuevo proyecto de tipo ASP.Net Web Forms Application y vamos a nombrarle TutorialAjax. Cabe mencionar que AJAX se puede usar tanto en proyectos Web Forms como en MVC.

TutorialAjax1

Ya que tenemos nuestro proyecto creado, continuamos añadiendo a nuestro proyecto un nuevo “web form” al que nombraremos Default.aspx. En este documento debemos hacer 4 cosas:

  1. Añadir la referencia a JQuery: podemos añadir la referencia utilizando las librerías que Google mantiene en línea. Una de ellas es la de JQuery. Asi que añadimos la siguiente línea en la sección head del documento: 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  2. Añadir un botón que será el encargado de hacer el pedido del número aleatorio al servidor.
  3. Añadir un label que será el encargado de mostrar el número aleatorio devuelto por el servidor.
  4. Y, finalmente, añadir el código JavaScript que hará el pedido

Este es el resultado final de nuestro archivo Default.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TutorialAjax.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Buscar número aleatorio en el servidor utilizando AJAX</title>
    <style>
        .label{
            font-size:30px;
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="btnNumeroAleatorio" runat="server" AutoPostBack="false">Buscar número aleatorio</asp:TextBox>
        <br />
        <asp:Label ID="lblResultado" runat="server" CssClass="label" />
    </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnNumeroAleatorio').click(function (e) {
                e.preventDefault();

                $.ajax({
                    type: "POST",                                              // tipo de request que estamos generando
                    url: 'default.aspx/BuscarNumAleatorio',                    // URL al que vamos a hacer el pedido
                    data: null,                                                // data es un arreglo JSON que contiene los parámetros que 
                                                                               // van a ser recibidos por la función del servidor
                    contentType: "application/json; charset=utf-8",            // tipo de contenido
                    dataType: "json",                                          // formato de transmición de datos
                    async: true,                                               // si es asincrónico o no
                    success: function (resultado) {                            // función que va a ejecutar si el pedido fue exitoso
                        var num = resultado.d;
                        $('#lblResultado').text('Número aleatorio es ' + num);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) { // función que va a ejecutar si hubo algún tipo de error en el pedido
                        var error = eval("(" + XMLHttpRequest.responseText + ")");
                        aler(error.Message);
                    }
                });
            });
        });
    </script>
</body>
</html>

Ok, ya tenemos el código html y JavaScript listo. Nos falta el código del servidor que va a generar el número aleatorio y lo va a enviar nuevamente al navegador. Para esto vamos a el código del archivo Default.aspx y creamos el siguiente método:

[System.Web.Services.WebMethod]              // Marcamos el método como uno web
public static string BuscarNumAleatorio()    // el método debe ser de static
{
     Random aleatorio = new Random();
     return aleatorio.Next(0, 1000).ToString();
}

Ya que tenemos todo listo, solo nos falta probar que todo esté funcionando como debe. Compilamos y ejecutamos la aplicación.

tutorialajax2

Cuando presionamos el botón:

tutorialajax3

¡Perfecto! Todo funcionó a la perfección.

Esta tecnología llego para quedarse y ya vieron lo fácil y útil que puede ser al momento de desarrollar aplicaciones web robustas.

Aquí más información sobre: