Ler webservice com javascript

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

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

Você vai gostar de...

Postagens populares.

7 Comments

  1. Olá! Eu tentei usar esta opção, porém o ajax está me retornando 0 no status, e o responseText está vazio. Você sabe porque isso está ocorrendo?

    1. Pode ser sua definição do ws. Já verificou se a chamada realmente acontece?

      Já testou seu ws pelo Postman ou outro aplicativo?

  2. Cara, bacana seu exemplo mas, este conceito não é bem consumir um web-Service com Javascript, pelo que vi voce dispara uma URL por AJAX e peag o retorno.
    Acredito que o conceito de consumir um WS seria instanciar uma variável com o WS e depois consumir os método contido nele, tipo:

    var ws = new webService(‘URLWS’);
    var ret = ws.calculaIdade(params);

    Muito bacana seu exemplo acima, e fica o desafio.

    Abraços

  3. Nem tanto, o jquery é realmente muito limpo, mas vá fazer uma consulta cross domain desta forma. Ele não retorna nada e nem manda nada. Ou seja, não há requisição. O que precisa ser feito é usar o jsonp,assync = false e crossdomain = true.
    E ai começa a encher o código. Além do mais, se eu quero fazer uma requisição e tornar o uso obrigatório para guardar o XML, não posso fazer com jquery cross domain por que ele não permite isto, mas se o meu aplicativo que vai consumir o meu serviço estiver no mesmo server ai sim, funciona de boa.

    Nem tudo são flores. O XMLHTTPRequest é realmente muito bom e funciona crossdomain.

    Prefiro digitar mais, me cansar mais e fornecer um cliente mais sólido para meu cliente ao ficar respondendo chamado informando o que aconteceu!

  4. Cara, ficou legal seu código, mas eu usaria o Jquery, na minha opinião, muito mais limpo e ágil !

    Veja só:
    //Aqui ele usa PHP, mas pode ser feito com asmx tb !

    $.ajax({
       type: "POST",
       url: "some.php",
       data: "name=John&amp;location=Boston",
       success: function(msg){
         alert( "Data Saved: " + msg );
       }
     });

    ou….

    $.getJSON('ajax/test.json', function(data) {
      var items = [];
    
      $.each(data, function(key, val) {
        items.push('' + val + '');
      });
    
      $('', {
        'class': 'my-new-list',
        html: items.join('')
      }).appendTo('body');
    });

    Exemplos com asp.net
    – Usando o $.Ajax
    http://vincenthomedev.wordpress.com/2009/02/10/consuming-an-aspnet-web-service-or-page-method-using-jquery/

    -Usando o $.getJson

    http://stackoverflow.com/questions/1176603/using-jquerys-getjson-method-with-an-asp-net-web-form

    E pra trabalhar com os dados vindos em JSON, vc pode usar o JLinq, que faz filtragens dinâmicas usando um ‘Linq’ em Javascript

    Espero ter ajudado!

    1. Eu não conheço JQuery, trabalho com ExtJs/PHP ou Ext.Net/ASP.
      Eu até tinha comentado com este meu amigo sobre o uso do JQuery, mas eu não conheço o suficiente para, e além do mais, o cliente; desconheço as razões; não queria que fosse usado nenhum script externo ou framework.
      Mas realmente, ficou mais limpo o código.

Deixe um comentário

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.