Vanilla Javascript - #29 Ajax com json

No tutorial de hoje aprenderemos como fazer um requisição ajax em um banco de dados json sem utilização de nenhuma bilbioteca.

Banco de dados json

Vamos criar primeiramente um banco de dados json (db.json):

{
"car":
  [
    {
    "color":"black",
    "year":2018
    },
    {
      "color":"red",
      "year":2007
    }
  ]
}

HTML

No html vamos criar um botão que será responsável por chamar o evento de clique:

<button id="btnDb">Show DB</button>

Ajax no Javascript Puro

No javascript utilizaremos o objeto XMLHttpRequest

let btn=doc.querySelector("#btnDb");
//Show database json
function showDb()
{
    let ajax=new XMLHttpRequest();
    ajax.open('GET','db.json');
    ajax.onreadystatechange=function(){
        if(ajax.status === 200 && ajax.readyState === 4){
            let res=JSON.parse(ajax.responseText);
            let car=res.car;

            for(let i=0; i< car.length; i++){
                console.log(car[i].year);
            }
        }
    };
    ajax.send();
}
btn.addEventListener('click',showDb,false);

Repare no código acima que quando houver o clique no botão, ele fará uma requisição no banco de dados json e quando o status for igual a 200 (ok) e o readyState for igual a 4 (completo) ele receberá a resposta do banco e exibirá no console.

Por hoje é só, sucesso nos códigos e na vida!