Acesso Assíncrono a WebServices na plataforma .NET - Parte II
Introdução
No artigo anterior, abordamos o que é o Acesso Assíncrono, a API DOM que é necessária para manipular os XML retornados pelo AJAX e o objeto XMLHttpRequest que é a base do CallBack.
Neste artigo utilizaremos C#, JavaScript, XML e DOM na implementação de um exemplo prático.
Obs: Utilizaremos o Microsoft Visual Studio 2005 para confeccionarmos este exemplo.
Criando WebService
A primeira coisa a se fazer é criar uma WebApplication. Para tal feito, vá em File/New/Web Site e escolha a opção ASP.NET Web Site conforme figura abaixo:
Renomeie a WebApplication para “WebSiteArtigo” e clique em Ok.
Agora, vamos criar um WebService, o qual iremos acessar através do Acesso Assíncrono. Para cria-lo clique com o botão direito do mouse sobre a WebApplication vá em Add New Item conforme figura abaixo:
Uma janela irá aparecer onde devemos ecolher o item Web Service conforme figura abaixo:
Renomeie o WebService para “WebServiceArtigo” e clique em Add.
Criando métodos no WebService
Vamos criar um método chamado Somar que retorna um XmlDocument, afim de exemplificar o Acesso Assíncrono. Segue o código da classe:
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml;
/// <summary>
/// Summary description for WebServiceArtigo
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebServiceArtigo : System.Web.Services.WebService {
public WebServiceArtigo () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public XmlDocument Somar(string[] p_arrParametros)
{
int intResultado = int.Parse(p_arrParametros[0]) +
int.Parse(p_arrParametros[1]);
XmlDocument objXmlDocument = new XmlDocument();
XmlElement objXmlElementLabel =
objXmlDocument.CreateElement("label");
objXmlDocument.AppendChild(objXmlElementLabel);
XmlText objXmlText = objXmlDocument.
CreateTextNode(intResultado.ToString());
XmlElement nodeXmlElementValor =
objXmlDocument.CreateElement("valor");
nodeXmlElementValor.AppendChild(objXmlText);
objXmlElementLabel.AppendChild(nodeXmlElementValor);
return objXmlDocument;
}
}
JavaScript para realizar o Acesso Assíncrono
Agora colocaremos o código JavaScript utilizado para consumir o método Somar do nosso WebService. Segue o código abaixo:
<%@ 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>
<script type="text/javascript">
var NMHOST = "localhost:1689";
var URLWEBSERVICE = "http://" + NMHOST +
"/WebSiteArtigo/WebServiceArtigo.asmx/Somar";
var objXMLHttpRequest;
function Request()
{
if(window.XMLHttpRequest) // Mozilla, Safari...
{
objXMLHttpRequest = new XMLHttpRequest();
}
else if(window.ActiveXObject) // IE
{
try
{
objXMLHttpRequest = new
ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
objXMLHttpRequest = new
ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}
}
function Somar()
{
Request();
objXMLHttpRequest.onreadystatechange = ProcessarResposta;
objXMLHttpRequest.open("POST", URLWEBSERVICE, true);
objXMLHttpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
objXMLHttpRequest.send(ValoresEnvio());
}
function ProcessarResposta()
{
if(objXMLHttpRequest.readyState == 4)
{
if(objXMLHttpRequest.status == 200)
{
var XMLDoc = objXMLHttpRequest.responseXML;
document.getElementById("lblResultado").innerHTML =
XMLDoc.getElementsByTagName("valor")[0].text;
}
}
}
function ValoresEnvio()
{
var arrParametros = new Array();
arrParametros[0] = document.getElementById(
"txtValor1").value;
arrParametros[1] = document.getElementById(
"txtValor2").value;
return "p_arrParametros=" + arrParametros[0] +
"&p_arrParametros=" + arrParametros[1];
}
function RegistrarScript()
{
document.getElementById("btnSomar").onclick = new
Function("Somar();");
}
</script>
</head>
<body onload="RegistrarScript();">
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtValor1" runat="server"></asp:TextBox>
<asp:TextBox ID="txtValor2" runat="server"></asp:TextBox>
<input id="btnSomar" type="button" value="Somar" />
<asp:Label ID="lblResultado" runat="server"></asp:Label></div>
</form>
</body>
</html>
O método JavaScript a ser chamado no nosso Acesso Assincrono é o Somar, que é vinculado ao botão btnSomar através do método RegistrarScript que por sua vez é chamado no evento onload da tag body, conforme mostrado no código acima.
Obs: É importante enfatizar que o os parâmetros passados via POST devem ter o mesmo nome dos parametros que estão na assinatura do método criado no WebService.
Abaixo temos a representação gráfica da interface do nosso exemplo:
Finalizando
Neste artigo abordamos a construção de um exemplo prático passo a passo de Acesso Assíncrono ou popularmente conhecido como AJAX.
Espero ter contribuído!
Até o próximo!
Diego Gazotto Dezembro
