Usando Prototype para consulta AJAX com JSON
Ajax, Javascript, JQuery, Prototype View Comments Marcelo KorjenioskiHoje irei dar um exemplo de como usar JSON com Prototype em uma chamada via Ajax. Não estou muito acostumado com o Prototype mas comecei a usar por ser um especificação de um projeto que estou trabalhando atualmente.
O JSON é um acrônimo para “JavaScript Object Notation” e é um padrão para a troca de mensagens. JSON é muito usado em chamadas Ajax por ser mais simples e mais leve que SOAP que usa XML.
Abaixo segue um exemplo de um objeto JSON que irei usar neste tutorial.
Crie um arquivo chamado conteudo.htm e insira o código abaixo.
{ "jogos" : [
{ "nome": "World of Warcraft", "preco": "49,90" },
{ "nome": "Diablo 3", "preco": "89,90" },
{ "nome": "StarCraft 2", "preco": "49,90" }
]
}
Agora basta criar um arquivo com o nome index.htm e inserir o conteúdo abaixo.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
</head>
<body>
<input type="button" name="pesquisar" onclick="pesquisar();" value="pesquisar"/>
<script>
function pesquisar () {
var request = new Ajax.Request('conteudo.htm', {
'method' : 'post',
'parameters' : {
'codigo' : '1'
},
'onComplete' : function(response) {
var text = response.responseText.stripTags();
// Transformo o texto em objeto
var objeto = text.evalJSON();
var jogos = objeto.jogos;
var str = "";
jogos.each(function(jogo) {
str += jogo.nome + ' ';
str += jogo.preco + '\n';
});
alert(str);
}
});
}
</script>
</body>
</html>
Agora é necessário que os dois arquivos estejam no mesmo diretório para que o exemplo funcione.
Clicando no botão pesquisar será feita uma consulta via Ajax para conteudo.htm retornando os valores do arquivo.
Caso tenha alguma duvida uma outro opinião sobre o Post deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais e Posts aqui apresentados.
Comentários Recentes