Ola Pessoal.
Conversando com um amigo pelo messenger estávamos discutindo o consumo de um web service usando JavaScript, sem usar frameworks, apenas JavaScript puro.
A solução que encontrei foi esta que descrevo abaixo.
Primeiro iremos criar o nosso web service, este web service irá calcular a idade e retornar
using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; namespace WebService { /// <summary> /// web service de exemplo /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ToolboxItem(false)] public class ws : System.Web.Services.WebService { /// <summary> /// Calcula a idade e retorna /// </summary> /// <param name="dia">dia de nascimento</param> /// <param name="mes">mes de nascimento</param> /// <param name="ano">ano de nascimento</param> /// <returns>idade</returns> [WebMethod] public int CalcularIdade(int dia, int mes, int ano) { if (ano.ToString().Length != 4) throw new Exception("O Ano deve ter 4 dígitos"); DateTime hoje = DateTime.Today; DateTime dtNasc = new DateTime(ano, mes, dia); int anos = hoje.Year - dtNasc.Year; if (hoje.Month > dtNasc.Month) return anos; else if (dtNasc.Month == hoje.Month) { if (hoje.Day >= dtNasc.Day) return anos; else return --anos; } else --anos; return anos; } } }
Criaremos agora a página que irá consumir nosso web service, é uma página simples que pede três dados, Dia, Mês e Ano de nascimento.
Preste atenção na linha marcada. Não esqueça que devemos informar nosso arquivo javascript.
Aqui chamei o meu de acessarWS.js.
<html> <head runat="server"> <title>Teste de Webservice</title> <script language="javascript" type="text/javascript" src="acessarWS.js"></script> </head> <body> <p> Preencha os dados e clique em calcular</p> <div> Dia:<br /> <input type="text" id="txtDia" /> <br /> <br /> Mes:<br /> <input type="text" id="txtMes" /> <br /> <br /> Ano:<br /> <input type="text" id="txtAno" /> <br /> <br /> <button type="submit" onclick="CallWs();"> Calcular</button> </div> <hr /> <p> Resposta do servidor</p> <div id="divResponse"> </div> </body> </html>
Ok! Criamos o nosso web service e agora precisamos criar o nosso JavaScript que irá consumir o web service.
O meu eu dei o nome de acessarWS.js.
var ajax; /** * Criar o objeto ajax que vai fazer a requisição */ function CreateAjaxObject() { if(window.XMLHttpRequest) {// Mozilla, Safari, Novos browsers... ajax = new XMLHttpRequest(); } else if(window.ActiveXObject) {// IE antigo ajax = new ActiveXObject("Msxml2.XMLHTTP"); if(!ajax) { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } } if(!ajax)// iniciou com sucesso alert("Seu navegador não possui suporte para esta aplicação!"); } /* * Envia os dados para a URL informada * * @param url Arquivo que irá receber os dados * @param dados dados a serem enviados no formato querystring nome=valor&nome1=valor2 * @param AjaxResponseFunction variável to tipo function(string) para receber a resposta do ajax */ function SendData(url, dados, AjaxResponseFunction) { CreateAjaxObject(); if(ajax) { ajax.onreadystatechange = function trataResposta() { if(ajax.readyState == 4) { AjaxResponseFunction(ajax.status, ajax.responseText); } }; //definir o tipo de método ajax.open("POST", url, true); //definir o encode do conteúdo ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); //tamanho dos dados enviados ajax.setRequestHeader('Content-length', dados.length); //enviar os dados ajax.send(dados); } } /** * Chama o webservice */ function CallWs() { /* aqui passe os parâmetros do método. no formato 'querystring' ex: nomeParam1=valor1&nomeParam2=valor2&nomeParamN=valorN Muita atenção aqui, pois deve ser informado aqui os nomes dos parâmetros que estão definidos no wsdl. Uma boa olhada, com atenção ao wsdl irá te mostrar os parâmetros,tipos e os nomes dos métodos disponíveis no método ou web service */ var dados = ''; dados += 'ano=' + encodeURIComponent(txtAno.value); dados += '&mes=' + encodeURIComponent(txtMes.value); dados += '&dia=' + encodeURIComponent(txtDia.value); //aqui o caminho completo do webservice seguido do nome do método SendData("http://localhost/ws.asmx/CalcularIdade", dados, AjaxResponseFunction); } /** * tratar a resposta do servidor * @param status status da resposta * @response resposta do servidor */ function AjaxResponseFunction(status, response) { var divR = document.getElementById('divResponse'); if(ajax.status != 200) divR.style.color = '#FF0000'; //vermelho else divR.style.color = '#0000FF';//azul //escrever na div de resposta divResponse.innerHTML = response; }
Vamos dar uma olhada no WSDL que foi criado para o nosso web service.
Preste atenção nas linhas em destaque, elas mostraram o nome do nosso método e os parâmetros e tipos que devemos informar.
<?xml version="1.0" encoding="utf-8"?> <wsdl:definitions xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:tm="http://microsoft.com/wsdl/mime/textMatching/" xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:mime="http://schemas.xmlsoap.org/wsdl/mime/" xmlns:tns="http://tempuri.org/" xmlns:s="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://schemas.xmlsoap.org/wsdl/soap12/" xmlns:http="http://schemas.xmlsoap.org/wsdl/http/" targetNamespace="http://tempuri.org/" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/"> <wsdl:types> <s:schema elementFormDefault="qualified" targetNamespace="http://tempuri.org/"> <s:element name="CalcularIdade"> <s:complexType> <s:sequence> <s:element minOccurs="1" maxOccurs="1" name="dia" type="s:int" /> <s:element minOccurs="1" maxOccurs="1" name="mes" type="s:int" /> <s:element minOccurs="1" maxOccurs="1" name="ano" type="s:int" /> </s:sequence> </s:complexType> </s:element> <s:element name="CalcularIdadeResponse"> <s:complexType> <s:sequence> <s:element minOccurs="1" maxOccurs="1" name="CalcularIdadeResult" type="s:int" /> </s:sequence> </s:complexType> </s:element> </s:schema> </wsdl:types> <wsdl:message name="CalcularIdadeSoapIn"> <wsdl:part name="parameters" element="tns:CalcularIdade" /> </wsdl:message> <wsdl:message name="CalcularIdadeSoapOut"> <wsdl:part name="parameters" element="tns:CalcularIdadeResponse" /> </wsdl:message> <wsdl:portType name="wsSoap"> <wsdl:operation name="CalcularIdade"> <wsdl:input message="tns:CalcularIdadeSoapIn" /> <wsdl:output message="tns:CalcularIdadeSoapOut" /> </wsdl:operation> </wsdl:portType> <wsdl:binding name="wsSoap" type="tns:wsSoap"> <soap:binding transport="http://schemas.xmlsoap.org/soap/http" /> <wsdl:operation name="CalcularIdade"> <soap:operation soapAction="http://tempuri.org/CalcularIdade" style="document" /> <wsdl:input> <soap:body use="literal" /> </wsdl:input> <wsdl:output> <soap:body use="literal" /> </wsdl:output> </wsdl:operation> </wsdl:binding> <wsdl:binding name="wsSoap12" type="tns:wsSoap"> <soap12:binding transport="http://schemas.xmlsoap.org/soap/http" /> <wsdl:operation name="CalcularIdade"> <soap12:operation soapAction="http://tempuri.org/CalcularIdade" style="document" /> <wsdl:input> <soap12:body use="literal" /> </wsdl:input> <wsdl:output> <soap12:body use="literal" /> </wsdl:output> </wsdl:operation> </wsdl:binding> <wsdl:service name="ws"> <wsdl:port name="wsSoap" binding="tns:wsSoap"> <soap:address location="http://localhost:2695/ws.asmx" /> </wsdl:port> <wsdl:port name="wsSoap12" binding="tns:wsSoap12"> <soap12:address location="http://localhost:2695/ws.asmx" /> </wsdl:port> </wsdl:service> </wsdl:definitions>
Um site que possui uma boa coleção de web services gratuitos é http://www.webservicex.net vale a pena uma visita para testar esta dica.
É isso ai pessoal 🙂
Até o próximo
♦ Marcelo