Artigos Mobile Como Realizar Transferência Assíncrona de dados para um Web Services

Como Realizar Transferência Assíncrona de dados para um Web Services


por João Kimmel 

 

Introdução

Nesse artigo, veremos como passar informações de um formulário HTML para um Web Services, através de chamadas assíncronas realizadas pelo objeto XMLHttpRequest.

 

Para isso, vamos utilizar o tipo de requisição POST do protocolo HTTP, porque sempre teremos que usar o POST, quando desejamos enviar uma quantidade de dados maior que 512KB ao servidor. E o POST é geralmente usado quando se utiliza um formulário HTML. E também, porque é um Web Service que recebe a requisição, permitindo apenas, que as informações seja passada via POST.

 

Nossa aplicação exemplo, terá um formulário com dois campos de entrada de dados, e dois botões, um para somar, e outro para multiplicar os dados. Ou seja, uma calculadora que soma e multiplica apenas.

 

Lado Servidor – Web Services

Primeiramente vamos criar as funcionalidades (somar e multiplicar) da nossa aplicação. Para isso então, crie um Web Services com o nome “Calcular”, então agora codifique a Listagem 01.


13-12-2007pic01.JPG 

Listagem 01. Métodos Web Services para nossa aplicação.

 

Olhando o código acima, percebe que através do atributo [WebMethod] são criados os métodos necessários para nossa aplicação exemplo. Após isso, está pronto para ser usado.

 

Lado Cliente – Página HTML

Seguindo, desde que esteja funcionando corretamente o Web Services, criado anteriormente. Crie então agora a página HTML que contém o formulário, como mostra a Listagem 02, para podermos realizar as chamadas assíncronas ao Web Services.

 

13-12-2007pic02.JPG 

Listagem 02. Formulário HTML.

 

Em nossa página HTML, existem dois pontos importantes a serem percebido.

 

Primeiro perceba que no evento onclick dos botões, é chamada a função ExecutarWS, passando por parâmetro qual será o método executado no Web Service.

 

Em seguida, perceba no cabeçalho que foi feita uma referência com um arquivo JavaScript, chamado “calcular.js”. Arquivo que contém nossa função ExecutarWS com mostra a Listagem 03.


13-12-2007pic03.JPG

13-12-2007pic04.JPG

13-12-2007pic05.JPG
Listagem 03. JavaScript calcular.js

 

Na função ExecutarWS percebe no método open do objeto XMLHttpRequest, a definição do tipo POST, em seguida, é definida a url do Web Service requisitado.

 

Observe que ao fim da url do Web Service, é realizada uma concatenação do método a ser executado, que foi passado da página HTML. Essa chamada do método através da url, só é possível com Web Services, caso fosse um Handler ou uma página ASP.NET, teríamos que fazer de outra forma.

 

Outro ponto importante, é que temos que passar os parâmetros pelo método send do objeto XMLHttpRequest. Para que funcione corretamente temos que definir o Content-Type com o valor application/x-www-form-urlencoded, através do método setRequestHeader. Através dessas configurações será possível realizar as chamadas ao Web Services. As funcões resultado e CriarObjXMLHttpRequest não estarei entrando em detalhes.

 

Conclusão

 

Nesse artigo, vimos o que é necessário para realizar chamadas assíncronas ao Web Service. E passando informação ao mesmo. Um abraço e até a próxima.