UNIVERSIDAD TECNICA DE AMBATO

FACULTAD DE INGENIERIA EN SISTEMAS

Desarrollo de Software IV

ABRIL 2020 – SEPTIEMBRE 2020

Universidad Técnica de Ambato Ing. C.F.A.F
Facultad de Ingeniería en Sistemas

AJAX

Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y

XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA
(Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el
navegador de los usuarios mientras se mantiene la comunicación asíncrona con el
servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas
sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y
usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se

requieren al servidor y se cargan en segundo plano sin interferir con la visualización
ni el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting
language) en el que normalmente se efectúan las funciones de llamada de Ajax
mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto
disponible en los navegadores actuales. En cualquier caso, no es necesario que el
contenido asíncrono esté formateado en XML.

Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas
operativos y navegadores dados que está basado en estándares abiertos como
JavaScript y Document Object Model (DOM).

Tecnologías incluidas en Ajax

Ajax es una combinación de cuatro tecnologías ya existentes:

 XHTML (o HTML) y hojas de estilos en cascada (CSS) para el diseño que

acompaña a la información.
 Document Object Model (DOM) accedido con un lenguaje de scripting por
parte del usuario, especialmente implementaciones ECMAScript como
JavaScript y JScript, para mostrar e interactuar dinámicamente con la
información presentada.
 El objeto XMLHttpRequest para intercambiar datos de forma asíncrona con
el servidor web. En algunos frameworks y en algunas situaciones concretas, se
usa un objeto iframe en lugar del XMLHttpRequest para realizar dichos
intercambios.

Desarrollo de Software IV Página:

Universidad Técnica de Ambato Ing. C.F.A.F
Facultad de Ingeniería en Sistemas

 XML es el formato usado generalmente para la transferencia de datos

solicitados al servidor, aunque cualquier formato puede funcionar, incluyendo
HTML preformateado, texto plano, JSON y hasta EBML.

Como el DHTML, LAMP o SPA, Ajax no constituye una tecnología en sí, sino que
es un término que engloba a un grupo de éstas que trabajan conjuntamente.

AJAX CON ASP.NET

Cuando usar Ajax: siempre o Ajax a veces

Antes de ver con un ejemplo el uso de Ajax en ASP.NET, vamos hacer una mención a
la prudencia. Ajax no es sinónimo del ideal, y aunque es muy interesante y muy útil, un
mal, indebido o abuso uso de Ajax, puede acarrear problemas serios en los desarrollos
de aplicaciones Web.

Es muy importante tener claro que no siempre debemos usar Ajax, y también tener
claro que a veces, podemos sobrecargar el servidor en exceso y provocar más
perjuicios que beneficios.

Dicho esto, que sirva simplemente de atención, veamos un ejemplo de como usar Ajax
en ASP.NET.

¿Por qué utilizar las características de AJAX en ASP.NET?

Las características de AJAX en ASP.NET permiten generar aplicaciones web

enriquecidas que tienen muchas ventajas frente a las aplicaciones web basadas
completamente en servidor. Las aplicaciones habilitadas para AJAX ofrecen:
 Mayor eficacia, porque las partes importantes del proceso de una página web se
realizan en el explorador.
 Elementos de interfaz de usuario familiares, como indicadores de progreso,
información sobre herramientas y ventanas emergentes.
 Actualizaciones parciales de la página, que actualizan sólo las partes de la
página web que han cambiado.
 Integración de clientes con los servicios de aplicación de ASP.NET para la
autenticación de formularios, funciones y perfiles de usuario.
 Clases de proxy generadas automáticamente que simplifican las llamadas a los
métodos del servicio web desde el script de cliente.

Desarrollo de Software IV Página:

Universidad Técnica de Ambato Ing. C.F.A.F
Facultad de Ingeniería en Sistemas

 Un marco que permite personalizar los controles de servidor para incluir

funciones de cliente.
 Compatibilidad para los exploradores más populares y utilizados
habitualmente, incluidos Microsoft Internet Explorer, Mozilla Firefox y Apple
Safari.

Ajax Extensions
Las Ajax Extensions o las extensiones de Ajax para ASP.NET, son unos controles de
servidor que nos permite añadir funcionalidades Ajax a nuestras aplicaciones
ASP.NET.

El control más importante de todos los controles que podemos encontrar en las
extensiones Ajax es el control ScriptManager del que hablaremos a continuación.

El control ScriptManager
El control Script Manager es el control principal del lado del servidor que tiene
relación directa con Ajax y ASP.NET.

Ajax proporciona una comunicación "por debajo" entre el servidor y el navegador

Web (usuario) gestionada a través de código JavaScript. De ahí, que Ajax signifique
Asynchronous JavaScript And XML.

Este código JavaScript se encarga de hacer llamadas a recursos remotos manejando

hábilmente en la interfaz de usuario las respuestas que le devuelve el servidor sin que
el usuario tenga la impresión de que se está haciendo, algo que ocurre con frecuencia
al refrescar la página Web entera.

Desarrollo de Software IV Página:

Universidad Técnica de Ambato Ing. C.F.A.F
Facultad de Ingeniería en Sistemas

El control ScriptManager tiene la misión de generar el código JavaScript necesario

para gestionar las peticiones Ajax con el navegador Web.

El control UpdatePanel
El control UpdatePanel habilita a la aplicación Web para actualizar una porción de la
página Web ASP.NET sin tener que recargar toda la página Web entera.

Todos los controles de las Ajax Extensions están instalados en ASP.NET 3.5 ó
superior. En el caso de disponer de ASP.NET 2.0, tendremos que descargarnos las
Ajax Extensions de Internet.

Agregando los controles de Ajax Control Toolkit en Visual Studio

La primera tarea a llevar a cabo es la de descargar el ensamblado de Ajax Control
Toolkit en nuestro disco duro.

Una vez hecho esto, iniciaremos Visual Studio con el fin de crear un nuevo proyecto de
aplicación Web.

Cuando hayamos creado nuestra aplicación inicial, añadiremos una nueva página Web a
nuestro proyecto y acudiremos a la ventana de herramientas y pulsaremos el botón
derecho del ratón con el fin de buscar el ensamblado AjaxControlToolkit.dll que
contendrá un numeroso número de controles de usuario de funcionalidad Ajax.

Al seleccionar el ensamblado, Visual Studio nos mostrará una gran cantidad de

controles listos para ser usados en nuestras aplicaciones Web.

Desarrollo de Software IV Página:

Universidad Técnica de Ambato Ing. C.F.A.F
Facultad de Ingeniería en Sistemas

Una vez que tenemos los controles de Ajax Control Toolkit listos para ser utilizados y
que hemos creado una nueva página Web, vamos a insertar dentro de la página Web un
control ScriptManager y un control TextBox estándar.

En este punto, aún no habremos indicado ninguna funcionalidad Ajax a nuestros

controles.

La siguiente acción será seleccionar la opción Agregar extensor del control TextBox.

Desarrollo de Software IV Página:

Universidad Técnica de Ambato Ing. C.F.A.F
Facultad de Ingeniería en Sistemas

Aparecerá una ventana como la que se muestra a continuación, dentro de la cual

seleccionaremos el extensor CalendarExtender.

Al ejecutar nuestra aplicación Web, veremos que ésta nos permite seleccionar una
fecha al hacer clic con el ratón sobre la caja de texto sin que tengamos que recargar el
formulario.

Desarrollo de Software IV Página:

Universidad Técnica de Ambato Ing. C.F.A.F
Facultad de Ingeniería en Sistemas

La parte de código que contiene nuestra página Web es en este caso la siguiente:

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<cc1:CalendarExtender ID="TextBox1_CalendarExtender"
runat="server"

Enabled="True" TargetControlID="TextBox1">

</cc1:CalendarExtender>

En el siguiente ejemplo, vamos a ver como utilizar uno de los controles de Ajax Control
Toolkit, y como mostrar el contenido de ese control en un control TextBox a través del
postback estándar de ASP.NET

Vamos a iniciar un nuevo proyecto e insertar dentro del formulario Web un control
ScriptManager, un control Editor de Ajax Control Toolkit, y un control TextBox y
Button estándar.

Desarrollo de Software IV Página:

Universidad Técnica de Ambato Ing. C.F.A.F
Facultad de Ingeniería en Sistemas

Haremos doble clic sobre el control Button y escribiremos el siguiente código:

protected void Button1_Click(object sender, EventArgs e)

this.TextBox1.Text = this.Editor1.Content.ToString();

Ejecutaremos nuestra aplicación, escribiremos algo en el editor, y pulsaremos el control

Button.

Observaremos que se produce un postback y que dentro del control TextBox, aparece
el texto que escribimos en el control Editor.

Ahora bien, ¿cómo evitar de forma rápida y sencilla ese postback para que no se
refresque la página Web entera?

El control UpdatePanel de las extensiones Ajax tiene la culpa.

Vamos a insertar un control UpdatePanel en el formulario Web y vamos a arrastrar y

soltar el control TextBox y Button dentro de este control y vamos a ejecutar
nuevamente nuestra aplicación.

Observaremos en este caso, que no se produce postback, y que los datos, se siguen
pasando del control Editor al control TextBox de la misma manera a como lo hacía
antes.

Desarrollo de Software IV Página:

Universidad Técnica de Ambato Ing. C.F.A.F
Facultad de Ingeniería en Sistemas

Como podemos apreciar, en un par de acciones de ratón, hemos preparado una página
ASP.NET con Ajax.

Escenarios
Puede extender las aplicaciones ASP.NET existentes y desarrollar otras nuevas que
incorporen la funcionalidad AJAX (Asynchronous JavaScript and XML). Utilice las
características AJAX cuando desee conseguir lo siguiente:
 Mejorar la experiencia del usuario con páginas web más enriquecidas, que son
más receptivas a las acciones del usuario y presentan un comportamiento similar a
las aplicaciones cliente tradicionales.
 Reducir las actualizaciones de página completa y evitar el parpadeo de la página.
 Habilitar la compatibilidad entre exploradores sin escribir script de cliente.
 Llevar a cabo comunicaciones cliente-servidor de tipo AJAX sin escribir script de
cliente.
 Utilizar controles y componentes de ASP.NET AJAX Control Toolkit.
 Desarrollar controles personalizados ASP.NET AJAX.

FUENTE: Microsoft Corporation – www.microsoft.com

Desarrollo de Software IV Página: