JSON – Conectando seu app ao Web Service

Esta é a aula 04 do curso de JSONVeja o cronograma completo aqui.


Continuando a aula anterior, agora que temos o retorno de todos os dados do banco de dados, vamos criar o código JS dentro da nossa aplicação mobile. Note que agora iremos programar um arquivo HTML que será executado no nosso aplicativo mobile.

Nós já aprendemos a realizar a leitura de dados com JSON, agora vamos aprender apenas a realizar a comunicação, o resto, já sabemos como fazer;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Lista de Ofertas</title> 
  
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  
</head>
<body>

<h1>Ofertas de Atibaia</h1>
<hr>

<!-- div em que será exibida as ofertas -->
<div id="conteudoJSON"></div>

<script>
// conecta ao servidor
var xmlhttp = new XMLHttpRequest();
var url = "http://appcinema.esy.es/mobile/lista_ofertas.php";
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        ConectaServidor(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function ConectaServidor(response) {
    var dados = JSON.parse(response); //faz a conversão do texto da WEB para JSON
    var i;
	var conteudo = "";

    for(i = 0; i < dados.length; i++) //dados.length retorna o tamanho do vetor.
	{ 
		conteudo += dados[i].nome_do_mercado  + 
		"<br>" + dados[i].produto +
		"<br>R$ " + dados[i].valor +
		"<br>" + dados[i].observacao  + 
		"<hr>" ;
    }
    
    document.getElementById("conteudoJSON").innerHTML = conteudo;
}
</script>
</body>
</html>

O resultado do arquivo HTML será este: http://appcinema.esy.es/mobile/app_ler_ofertas.html. embora eu tenha colocado uma cópia neste arquivo na web, é importante entender que este é o HTML do seu aplicativo e que ele não precisa estar publicado na web.