Desenvolvedores.Net - TechBlog

Tag Archives: web service

Ler webservice com javascript

7
1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (2 votos, média: 5,00 de 5)
Loading...
24 de setembro de 2011

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

About Marcelo

Nascido em Juruaia/MG em uma fazenda de criação de búfalos, e residindo na região Sul do Brasil. Trabalha com desenvolvimento de aplicações desde os 17 anos. Atualmente é Arquiteto Organizacional na Unimake Software. Para saber mais ... http://desenvolvedores.net/marcelo []'s