Aplicações AJAX são aplicações que obtém dados do servidor de forma assíncrona em background sem afetar a aparência e o comportamento da página. O ASP.NET AJAX é uma série de extensões para o ASP.NET desenvolvidas pela Microsoft que permitem implementar funcionalidades AJAX, criando páginas com atualizações parciais, somente nas áreas em que sofrem alterações. Isso dá ao usuário uma melhor experiência que emula as interfaces das aplicações desktop.
AJAX não é uma tecnologia, mas sim um termo que se refere ao uso de um grupo de tecnologias e é a sigla para Asynchronous JavaScript and XML. AJAX usa uma combinação que utiliza:
Objeto XMLHttpRequest, que permite troca de dados entre a página e o servidor web de forma assicrona.
HTML, XHTML e CSS, que provê marcação e estilos para a página Web. XML e outros formatos para transferência de dados como JavaScript Object
Notation (JSON)
Document Object Model (DOM), que permite ao JavaScript interagir com o documento web.
O Framework ASP.NET AJAX incluí:
Server-side ASP.NET AJAX. Incluso no ASP.NET 3.5 para construção de Server controls. Esses componentes também estão disponíveis no ASP.NET 2.0 em um pacote a parte chamado ASP.NET 1.0 extensions.
Client-side ASP.NET AJAX. A Microsoft Ajax Library 3.5 é um biblioteca javascript que fornece funcionalidades client-side para o ASP.NET AJAX Framework. É integrada ao ASP.NET 3.5 e é disponibilizada também em download a parte para uso em outro ambiente como PHP.
AJAX control toolkit, é um projeto open-source, um esforço conjunto entre Microsoft e comunidade que provê infra estrutura para construção de controles ASP.NET AJAX.
jQuery , biblioteca javascript focada na manipulação do DOM.
ASP.NET 2.0 AJAX Templates, um pacote com uma série de templates para construção de aplicações ASP.NET AJAX.
Namespaces
69
Namespace Descrição
System.Web.Configuration Contém classes que permitem você configurar o ASP.NET AJAX Extensions via programação
System.Web.Handlers Contém classes manipuladoras HTTP que processam requisições ao servidor System.Web.Script.Serialization Contem classes que fornecem
serialização e deserialização JSON para tipos gerenciados. Também formas para estender e customizar a serialização. System.Web.Script.Services Provê atributos para customizar o suporte
a web services para o AJAX.
System.Web.UI Classes e interfaces que permite a
comunicação cliente-servidor
System.Web.UI.Design Classes que podem ser utilizadas para estender o suporte ao ASP.NET AJAX durante o desenvolvimento.
Controles ASP.NET AJAX
Script Manager, é utilizado para gerenciar o script cliente em páginas ASP.NET AJAX. Você deve adicionar um ScriptManager à págian antes de utilizar o UpdatePanel, UpdateProgress ou Timer. Se você tiver um ScriptManager em uma master page, você precisará de um ScriptManagerProxy em uma content page se você quiser utilizar AJAX nela.
UpdatePanel, permite você atualizar regiões específicas da página. Uma página que contenha um ScriptManager e um ou mais UpdatePanels pode automaticamente ter atualizações parciais. Para utiliza-lo você deve adicionar uma instancia do controle na página e então adicionar controles dentro dele. UpdateProgress, permite você mostrar o progresso de um update parcial em um UpdatePanel. Pode trabalhar para toda a página ou para um UpdatePanel específico.
Timer, executa postbacks em intervalos definidos. Você pode utilizar em conjunto com um UpdatePanel para executar atualizações parciais na página de tempos em tempos. Ou usar para postar a página inteira.
Utilizando ASP.NET AJAX
Crie um novo projeto em File > New Web Site, utilize o nome “c:\sites\WebSiteAjax”, linguagem Visual C#.
No modo de Design, adicione um label e atualize seu ID para lblNormal.
A partir da aba AJAX Extensions da Toolbox, adicione um controle Script Manager à página Default.aspx e atualize o seu ID para scriptManager.
70
Adicione um Label dentro do UpdatePanel e atualize seu ID para “lblAjax”. Logo abaixo, dentro do UpdatePanel coloque um botão, atualize seu label para “Atualizar Painel” e seu ID para “btnAtualizar”.
No evento Page_Load, utilize o seguinte código:
lblNormal.Text = "Hora Carga da Página: " + DateTime.Now.ToString();
E no evento Click do botão:
lblAjax.Text = "Hora Ajax:" + DateTime.Now.ToString();
Você terá seu código:
using System; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
lblNormal.Text = "Hora Carga da Página: " + DateTime.Now.ToString();
}
protected void btnAtualizar_Click(object sender, EventArgs e) {
lblAjax.Text = "Hora Ajax:" + DateTime.Now.ToString(); }
}
E seu página:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title> </head>
71
<body>
<form id="form1" runat="server"> <div>
<asp:Label ID="lblNormal" runat="server"></asp:Label> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate>
<asp:Label ID="lblAjax" runat="server" Text=""></asp:Label>
<br />
<asp:Button ID="btnAtualizar" runat="server" Text="Atualizar Painel" onclick="btnAtualizar_Click" /> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html>
Salve o projeto e execute.
Ao clicar no botão “Atualizar Painel” somente o UpdatePanel é atualizado. Ou seja, a página não está sendo postada e o evento Page_Load não está sendo acionado ao se clicar no botão, como aconteceria em uma página sem AJAX.
72