Bruno Pereira

Clientes Ajax/JSON

Quando falamos em web services a primeira idéia sobre o formato para troca das informações é o XML. Porém, outros formatos para troca de dados existem e podem atender melhor a alguns casos particulares.

Um destes formatos é o JSON. Ele tem se difundido bastante, especialmente como uma alternativa ao XML em AJAX, pois é um formato nativamente suportado por qualquer interpretador javascript. Outro motivo é que é um formato mais “enxuto”, gerando documentos menores e mais fáceis consumir. Por estas vantagens, tem sido comum o uso de JSON para criar clientes AJAX de serviços REST.

Na listagem abaixo apresentamos um exemplo de função javascript que busca itens de um usuário num serviço REST e apresenta os mesmos em uma tabela. Mostramos apenas os trechos mais relevantes. O leitor pode obter o código completo dos exemplos de clientes ajax no site da revista. A listagem seguinte apresenta a definição de uma função que faz uma requisição HTTP GET assíncrona a um serviço REST.

<script type="text/javascript">
function mostrarItens() {
// Faz a chamada rest
var url = '/usuario/' + document.getElementById("cod_usuario").value + '/itens';
var tabela = document.getElementById("itens");
var response = RESTFul.get(url);
if (response.status != 200) {
tabela.innerHTML = "<b>Usuário não encontrado!</b>";
return;
}
 
var itensUsuario = response.getObject();
var stringitens = "<table border='1'>";
stringitens += "<thead><td>codigo</td><td>descrição</td><td>nome</td><td>novo</td>"
+"<td>valor inicial</td><td>vendido</td></thead>";
for (i in itensUsuario.itensUsuario.item) {
var item = itensUsuario.itensUsuario.item[i];
stringitens += "<tr><td style='text-underline' onclick=\"edita_item('"+
item.codItem + "')\">" +
item.codItem + "</td>" +
"<td>" + item.descricao + "</td>" +
"<td>" + item.nome + "</td>"+
"<td>" + (item.novo ? "Sim" : "Não") + "</td>"+
"<td>" + item.valorInicial + "</td>"+
"<td>" + item.vendido + "</td>"+
"</tr>\n";
}
 
stringitens += "</table>";
tabela.innerHTML = stringitens;
} 
</script>

// requisição Ajax para HTTP GET
get: function (url, request) {
// cria um XmlHttpRequest
xmlhttp = getXTR();
// constrói um request default
if (!request) {request = new RESTFul.Request();}
xmlhttp.open("GET",url,false); // requisição GET assíncrona
xmlhttp.setRequestHeader("Accept",'application/json');
xmlhttp.send(null); // requisição sem corpo
while (xmlhttp.readyState != 4);
var response =
new RESTFul.Response(xmlhttp.status, xmlhttp.statusText, xmlhttp.getAllResponseHeaders(), xmlhttp.responseText);
return response;
}

Anterior — Índice — Próxima

Clientes Ajax/JSON

Leave a Reply