Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
atividade 8
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Atividade da Aula 08
Crie um arquivo JSON que contenha os dados de 3 cantores, inclusive os estilos musicais. Depois, usando as técnicas de AJAX contidas no guia de estudos, mostre o conteúdo desse arquivo em uma página HTML.
Arquivo: dados.json
{
"cantores":[
{
"nome":"John Mayer",
"estilo":"Pop/Rock"
},
{
"Nome":"Lenine",
"estilo":"MPB"
},
{
"Nome":"Ana Carolina",
"estilo":"MPB"
}
]
}
Arquivo: indexajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>Exibir cantores</title>
<script src="script2.js"></script>
</head>
<body>
<h1 id="Cantores">Cantores</h1>
<div id="texto"></div>
</body>
<html>
Arquivo: script2.js
function pegarValores(url, callback) {
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
}
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status
== 200) { console.log('responseText:' +
xmlhttp.responseText); try {
var data = JSON.parse(xmlhttp.responseText);
} catch(err) {console.log(err.message + "in" +xmlhttp.responseText);
return;
}
callback(data);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
pegarValores('dados.json', function(dados) {
var html = "<h3>Cantores</h3>";
for (var i=0; i < dados["cantores"].length; i++) {
html += "<h4>Nome:" + dados["cantores"][i]["nome"] + ""+
dados["cantores"][i]["estilo"] + "</h4>";
}
document.getElementById("texto").innerHTML = html;
});
Continue navegando
Materiais relacionados
75 pág.
2 pág.
Perguntas relacionadas
Compartilhar