Acesso Assíncrono a WebServices na plataforma .NET

1. 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.

2. 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.

2.1. 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;

}

3. JavaScript para realizar o Acesso Assincrono

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">

<title>Untitled Page</title>

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].

childNodes[0].nodeValue;

}

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>

<div>

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

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

<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:

4. 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

Desenvolvimento - Web Services

1. Introdução

Leia também