Loading ...
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
'
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&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!
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.