Foro de Informatica
" Hay la misma diferencia entre un sabio y un ignorante que entre un hombre vivo y un cadáver "

- Aristóteles -



        


Google
 
Web www.ComputerFacil.com
Forista del Mes:

Kobas



  Reply to this topicStart new topicStart Poll

> Programación En Ajax
Suscribirse | Enviar por correo | Imprimir
dejavi
Publicado: Jul 31 2007, 04:50 AM
Quote Post


Tera user
Group Icon

Grupo: Moderadores
Mensajes: 3.871
Miembro nº: 17.695
Registrado: 18-January 07
310707



Microsoft Ajax
Primero que nada quiero remarcar que el objetivo de este tema es el dar a conocer el funcionamiento general de las tecnologías que conforman Ajax y como desarrollar tus primeras aplicaciones con el paquete Ajax 1.0 de Microsoft.
Introducción
He sido un apasionado de las tecnologías Web desde hace 7 años, recuerdo cuando era motivo de asombro ver un script divertido en alguna página y cuando todos desarrollábamos páginas con HTML y puro HTML, era muy divertido pero había una distancia muy grande con las aplicaciones de escritorio ya que estas siempre han llevado la delantera en presentación y desempeño.
Cada día que pasa la brecha se hace más corta entre las aplicaciones de escritorio y las Web, en el 2005 Microsoft presenta Ajax 1.0 (Asynchronous JavaScript And XML), una técnica de desarrollo web para crear aplicaciones interactivas que hacen que la experiencia del usuario cada vez sea mejor. Cabe mencionar que Ajax es una técnica que viene desarrollándose por varias empresas desde el Remote Scripting de Microsoft en 1996. Junto a esta tecnología también anunció Ajax Control ToolKit una suite de variados controles que implementan toda la funcionalidad de Ajax.
Bueno vamos puntualizando Ajax: no es un leguaje de programación, no es un Entorno de Desarrollo, no es una tecnología y no es un script. Ajax es una técnica de programación que implementa un conjunto de tecnologías que hacen que una página funcione de manera interactiva, esto es que no veamos el fastidioso parpadeo a la hora de cargar otra página o podamos ver algunos efectos de desplazamiento que antes sólo lograba flash.
Las tecnologías que conforman Ajax son las siguientes:
•XHTML (o HTML) y hojas de estilos en cascada (CSS). Estas dos tecnologías trabajan en la presentación de la página.
•Document Object Model (DOM). Nos permite interactuar con la información presentada por medio de un Script.
•El objeto XMLHttpRequest para intercambiar datos asincrónicamente con el servidor web. Esto es mandar información por atrás sin que el usuario se percate de esto.
•XML es el formato usado comúnmente para la transferencia de vuelta al servidor, aunque cualquier formato puede funcionar, incluyendo HTML preformateado, texto plano, JSON y hasta EBML.
Bueno ahora que ya sabemos que es Ajax vamos comenzar a utilizarlo.
Instalación
1. Primero que nada tenemos que tener instaldo Visual Studio 2005 puede ser la versión Professional o la versión Express.
2. Entrar al sitio web http://ajax.asp.net/downloads/default.aspx?tabid=47.
3. Descarga el ASP.NET 2.0 AJAX Extensions 1.0.
4. Instala el archivo descargado.
5. Descarga el Control Toolkit.
6. Instala el archivo descargado.
Como ves no es nada del otro mundo ya tienes Ajax 1.0
Primera aplicación
Muy bien es hora de comenzar a programar, primero que nada vamos a abrir nuestro IDE Visual Studio 2005 y vamos a crear un nuevo sitio Web, pero antes de adelantarnos quiero que vean como ahora nos aparecen dos nuevas opciones a escoger en el cuadro de dialogo que son:
•ASP.NET AJAX- Enabled Web Site: Esta opción nos permite crear un sitio web con los controles necesarios para manejar Ajax.
•AJAX CONTROL TOOLKIT Web Site : Nos permite crear un sitio web con todos los controles de Toolkit.
Vamos seleccionar “ASP.NET AJAX- Enabled WebSite”, en este tutorial trabajaremos con C# por lo tanto en lenguaje seleccionan Visual C#.
El código que nos va a generar es el siguiente: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
</div>
</form>
</body>
</html>
Sin entrar en mucho detalle lo único nuevo que nos genera al seleccionar esta opción es el control ScriptManager. Este control es la base de la tecnología Ajax, se debe agregar cada que deseemos usarla y como cualquier otro control de lado del servidor también tiene la propiedad runat y el ID.
Vamos a desarrollar una página con un botón y una etiqueta y que al presionar el botón nos diga “Hola Mundo”.
EL código HTML queda de la siguiente manera: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Button ID="btnSaludar" runat="server" Text="Saludar" OnClick="btnSaludar_Click" />
<asp:Label ID="lblSaludo" runat="server" Text=""></asp:Label>
</div>
</form>
</body>
</html>
Creo que en esto no hay ningún problema ya que estoy seguro que ya son expertos en ASP.Net
Y el código de archivo codebehind es:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSaludar_Click(object sender, EventArgs e)
{
lblSaludo.Text = "Hola Mundo";
}
}
Más fácil todavía y nos da como resultado una página que al darle clic al bóton nos muestra el mensaje de hola mundo.
Y bueno aquí es donde vemos el tradicional problema de las páginas HTML, el clásico parpadeo a la hora dar clic en el botón e ir al servidor. Este problema se soluciona con Ajax. Veamos como.
1. Agregamos el control UpdatePanel a nuestra página y únicamente asignamos la propiedad runat=”server”.
2. Agregamos la sección ContentTemplate dentro del UpdatePanel, y dentro de esta sección copiamos la etiqueta que ya previamente habíamos definido.
3. Ahora agregamos la sección Triggers dentro de UpdatePanel y le decimos a que evento vamos a reaccionar en este caso es al evento click del Botón.
El código queda de la siguiente manera:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Button ID="btnSaludar" runat="server" Text="Saludar" OnClick="btnSaludar_Click" />
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Label ID="lblSaludo" runat="server" Text=""></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSaludar" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
Observa los resultados a la hora de ejecutar la página.
Por último podemos agregar también el control UpsateProgress para mandarle al usuario un mensaje cuando la página este haciendo un proceso.
Ejemplo:
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<p>Cargando...</p>
</ProgressTemplate>
</asp:UpdateProgress>
Conclusiones
Ajax es una técnica que muchas empresas como Google y Microsoft la han adoptado como su forma de trabajo y esta tendencia seguirá varios años hasta que salga una tecnología mejor.
En conclusión cada ves las páginas Web se acercan más en apariencia y funcionalidad a las aplicaciones de escritorio, aquellas que un día fueron únicamente usadas para promocionar alguna cosa, hoy en día son aplicaciones robustas que compiten cara a cara con las de escritorio.


thumbsup.gif






--------------------
user posted image
PMEmail Poster
Top
0 usuario(s) está(n) leyendo esta discusión (0 invitado(s) y 0 usuario(s) anónimo(s))
0 miembro(s):
« Posterior | Programación en AJAX | Anterior »

Topic Options Reply to this topicStart new topicStart Poll

 


ComputerFacil.com © 2006
          Webs Afiliadas - Contacto
Ofertas PCs :: Consultor de Marketing Online :: Foros :: Posicionamiento Web :: Foros de Informatica :: Foros :: eurodipity :: elhacker

eurodipity - eurodipity - eurodipity - eurodipity - eurodipity - eurodipity - eurodipity - eurodipity - eurodipity - eurodipity

Invision Power Board © 2007   Licensed to: ComputerFacil.com - IPS, Inc.