Acesso Assíncrono a WebServices na plataforma .NET - Parte I

Introdução

O uso do Acesso Assíncrono, também conhecido como AJAX (Asynchronous JavaScript and XML), está se proliferando cada vez mais pela internet, pois traz maior interatividade nas aplicações web.

AJAX nada mais é que uma chamada assíncrona ao servidor sem que a página web seja atualizada por completo, ou seja, apenas parte da mesma é atualizada com os dados de retorno da chamada assíncrona.

Conforme figura abaixo, podemos ver um exemplo de Acesso Assíncrono no site do Google, onde ao digitarmos as primeiras letras da palavra que queremos buscar, o Google abre uma janela com as palavras sugeridas.

Neste artigo utilizaremos C#, JavaScript, XML e DOM na implementação de um exemplo prático.

DOM

DOM ou Document Object Model é uma interface de programação de aplicativos (API) para documentos HTML e XML. O DOM permite que tais documentos sejam manipulados como um conjunto de nós. Isso significa que pela API DOM em um script JavaScript podemos manipular uma página web como se fosse um documento XML.

Métodos de DOM

• getElementById: retorna o elemento de identificação única do documento. Sua sintaxe é: getElementById(id).

  id – nome do elemento de identificação única.

  Exemplo:

  var objBotaoEnviar = document.getElementById("btnEnviar");
• getElementsByTagName: retorna um array com a relação de nós filhos. Sua sintaxe é: getElementsByTagName(nome).

  nome – nome de identificação do(s) elemento(s).

  Exemplo:

  var objArrayDIV = document.getElementsByTagName("div");
• hasChildNodes: retorna verdadeiro caso o elemento referenciado tenha nós filhos e falso caso contrário. Sua sintaxe é: hasChildNodes().

  Exemplo:

  if(objXMLDoc.hasChildNodes()) { // código }
• createElement: cria um novo elemento no documento. Sua sintaxe é: createElement(nome).

  nome – nome do elemento que se deseja criar.

  Exemplo:

  var objOption = document.createElement("OPTION");
• createTextNode: cria um texto estático no documento, o qual podemos ligá-lo a outro elemento qualquer do documento. Sua sintaxe é: createTextNode(nome).

  nome – nome do texto que se deseja criar.

  Exemplo:

  var objText = document.createTextNode("SP");
• appendChild: adiciona um nó na lista de nós de um elemento. Sua sintaxe é: appendChild(nó).

  nó – nó que se deseja incluir.

  Exemplo:

  var objOption = document.createElement("OPTION"); var objText = document.createTextNode("SP"); objOption.appendChild(objText);
• removeChild: remove um nó da lista de nós de um elemento. Sua sintaxe é: removeChild(nó).

  nó – nó que se deseja remover.

  Exemplo:

  var objChild = objXMLDoc.firstChild; objXMLDoc.removeChild(objChild);
• replaceChild: substitui um nó por outro da lista de nós de um elemento. Sua sintaxe é: replaceChild(nóNovo, nóAntigo).

  nóNovo – nó que se deseja incluir;

  nóAntigo – nó que se deseja excluir.

  Exemplo:

  var objChild = objXMLDoc.lastChild; var objNovoChild = document.createElement("teste"); objXMLDoc.replaceChild(objNovoChild, objChild);
• insertBefore: inclui um nó antes de outro na lista de nós filhos. Sua sintaxe é: insertBefore(nóNovo, nóExistente).

  nóNovo – nó que se deseja incluir;

  nóExistente – nó posterior ao nó que se deseja incluir.

  Exemplo:

  var objChild = objXMLDoc.lastChild; var objNovoChild = document.createElement("teste"); objXMLDoc.removeChild(objNovoChild, objChild);
• getAttribute: retorna o valor do atributo desejado. Sua sintaxe é: getAttribute(nome).

  nome – nome do atributo que se deseja recuperar.

  Exemplo:

  var objBotaoEnviar = document.getElementById("btnEnviar"); var objAtributo = objBotaoEnviar.getAttribute("id");
• setAttribute: ajusta o valor do atributo desejado. Sua sintaxe é: setAttribute(nome, valor).

  nome – nome do atributo que se deseja ajustar;

  valor – valor a ser ajustado no atributo.

  Exemplo:

  var objBotaoEnviar = document.getElementById("btnEnviar"); objBotaoEnviar.setAttribute("onclick", "SetarFoco();");
• removeAttribute: remove o atributo desejado. Sua sintaxe é: removeAttribute(nome).

  nome – nome do atributo que se deseja remover.

  Exemplo:

  var objBotaoEnviar = document.getElementById("btnEnviar"); var objAtributo = objBotaoEnviar.removeAttribute("onclick");

Propriedades de DOM

• childNodes: retorna um array com a relação de nós filhos.

  Exemplo:

  var objNodes = objXMLDoc.childNodes; objNodes[0].className = strClasse;
• firstChild: retorna o primeiro nó filho.

  Exemplo:

  var objChild = objXMLDoc.firstChild;
• lastChild: retorna o último nó filho.

  Exemplo:

  var objChild = objXMLDoc.lastChild;
• nodeValue: define ou recupera o valor de um nó.

  Exemplo:

  var objNodes = objXMLDoc.childNodes; objNodes[0].nodeValue = strValor;
• parentNode: retorna o nó pai do elemento referenciado.

  Exemplo:

  var objNode = objXMLDoc.parentNode;
• nextSibling: retorna o elemento posterior ao elemento referenciado.

  Exemplo:

  var objPosterior = objXMLDoc.nextSibling;
• previousSibling: retorna o elemento anterior ao elemento referenciado.

  Exemplo:

  var objAnterior = objXMLDoc.previousSibling;

XMLHttpRequest

XMLHttpRequest nada mais é que um "objeto" ou "activeX" do navegador. Se for um navegador da família Mozilla podemos considerá-lo como um objeto, caso contrário, se for um da família IE, um activeX. Este objeto ou activeX é responsável pelo Acesso Assíncrono entre a página web e o servidor.

Veja o exemplo abaixo:

O método acima cria uma instância do XMLHttpRequest de acordo com o tipo de navegador (Mozilla, Safari, IE).

Métodos de XMLHttpRequest

• open: relaciona o objeto à página web que desejamos conectar. Sua sintaxe é: open(método, url, assinc, usuário, senha).

  método – método para envio de dados (GET, POST, PUT ou HEAD);

  url – indica o endereço web da página ou script a ser acessado;

  assinc – indica se a conexão é assíncrona (true ou false) (parâmetro opcional);

  usuário – envia um nome de usuário para o servidor (parâmetro opcional);

  senha – envia a senha do usuário (parâmetro opcional).

  Exemplo:

  objXMLHttpRequest.open("GET", "http://localhost/...", true);
• send: envia a solicitação de execução ao servidor web. Sua sintaxe é: send(DOM ou stream ou texto).

  DOM ou stream ou texto – indica o conteúdo que deverá ser enviado para o servidor.

  Exemplo:

  objXMLHttpRequest.send(null);
• setRequestHeader: altera o valor de qualquer cabeçalho http. Sua sintaxe é: setRequestHeader(cabeçalho, valor).

  cabeçalho – string que representa o cabeçalho;

  valor – string que representa o valor do cabeçalho.

  Exemplo:

  objXMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
• getResponseHeader: retorna uma string com o valor do cabeçalho solicitado. Sua sintaxe é: getResponseHeader(cabeçalho).

  cabeçalho – string que representa o cabeçalho.

  Exemplo:

  var strValor = objXMLHttpRequest.getResponseHeader("Content-Type");
• getAllResponseHeaders: retorna uma string com todos os cabeçalhos http. Sua sintaxe é: getAllResponseHeaders().

  Exemplo:

  var strValores = objXMLHttpRequest.getAllResponseHeaders();
• abort: interrompe o processamento atual do XMLHttpRequest. Sua sintaxe é: abort().

  Exemplo:

  objXMLHttpRequest.abort();

Propriedades de XMLHttpRequest

• status: contém o código do status enviado pelo servidor web (qualquer valor diferente de 200 significa erro).

  Exemplo:

  if(objXMLHttpRequest.status == 200) { // código }
• statusText: contém a descrição do status enviado pelo servidor web.

  Exemplo:

  if(objXMLHttpRequest.status != 200) { alert("Erro! Descrição: " + objXMLHttpRequest.statusText); }
• readyState: determina a situação atual do Acesso Assíncrono ao servidor web. Seu valor varia de 0 a 4.
  • 0 – objeto criado mas não aberto;
  • 1 – carregamento;
  • 2 – carga completa;
  • 3 – processamento;
  • 4 – requisição completa.

  Exemplo:

  if(objXMLHttpRequest.readyState == 4) { if(objXMLHttpRequest.status == 200) { // código para tratar o retorno do Acesso Assíncrono } }
• onreadystatechange: indica o nome da função que utilizaremos para tratar o processamento do Acesso Assíncrono ao servidor web.

  Exemplo:

  objXMLHttpRequest.onreadystatechange = new Function() { if(objXMLHttpRequest.readyState == 4) { if(objXMLHttpRequest.status == 200) { // código para tratar o retorno do Acesso Assíncrono } } }

  ou

  objXMLHttpRequest.onreadystatechange = nome_da_funcao;
• responseText: contém a resposta do servidor web no formato texto simples.

  Exemplo:

  if(objXMLHttpRequest.readyState == 4) { if(objXMLHttpRequest.status == 200) { var strRetorno = objXMLHttpRequest.responseText; } }
• responseXML: contém a resposta do servidor web no formato XML podendo ser manipulado pela API DOM.

  Exemplo:

  if(objXMLHttpRequest.readyState == 4) { if(objXMLHttpRequest.status == 200) { var XMLDoc = objXMLHttpRequest.responseXML; var strRetorno = XMLDoc.getElementsByTagName("valor")[0].text; } }

Finalizando

Nesta primeira parte do artigo abordamos o que é o Acesso Assíncrono, a API DOM que é necessária para manipular os XML retornados pelo AJAX e o objeto XMLHttpRequest que é a base do CallBack.

Na próxima parte (Parte II) abordaremos um exemplo prático passo-a-passo do Acesso Assíncrono na plataforma .NET.

Até o próximo!

Diego Gazotto Dezembro