Requisições síncronas e assíncronas

Primeiramente vamos entender o fluxo cliente-servidor. As aplicações solicitam através das requisições e aguarda uma resposta, por exemplo: O navegador (cliente) faz uma requisição e o servidor retorna uma resposta.

Tipos de requisição

AJAX? O que é isso??

AJAX = Asynchronous JavaScript And XML.

Ajax é uma técnica para carregar dados em uma parte da página sem ter que atualizar a página inteira.

Por que devo utilizar AJAX?

O Ajax utiliza um modelo de processamento assíncrono.

Os navegadores utilizam:

XMLHttpRequest API

Uma requisição feita via XMLHttpRequest torna o envio de requisições muito fácil.

Vejamos:

let xhrObject = new XMLHttpRequest();
console.log(xhrObject);
// OUTPUT: XMLHttpRequest {onreadystatechange: null, readyState: 0, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}

Digite o código no codepen para visualizar o resultado https://codepen.io/

/*
   API POKEMON
      https://pokeapi.co/api/v2/pokemon/
     https://pokeres.bastionbot.org/images/pokemon/1.png
*/ 

window.onload = function() {

    let xhrObject = new XMLHttpRequest();

    xhrObject.onload = function() {

                if(this.status === 200) {
                //console.log('status OK');
                //console.log(this);
                //console.log(this.response);
                let data = JSON.parse(this.response); // DESSERIALIZA - STRING PARA OBJETO JS
                console.log(data);

                let newContent = '';
                for(let i = 1; i < data.results.length; i++) {
                    newContent += `<li class="pokemon__card">`;
                    newContent += `<a data-name="${data.results[i].name}">`;
                    newContent += `<img class="pokemon__thumb" src="https://pokeres.bastionbot.org/images/pokemon/${[i]}.png"/>`;
                    newContent += `<h2 class="pokemon__title">${data.results[i].name}</h2>`;
                    newContent += `</a>`;
                    newContent += `</li>`;
                }

                document.getElementById('pokemon').innerHTML = newContent;
                }
        }


    xhrObject.open("get", "https://pokeapi.co/api/v2/pokemon/", true);
    xhrObject.send();
}

Digite o código no codepen para visualizar o resultado https://codepen.io/

<ul id="pokemon" class="pokemon"></ul>

Digite o código no codepen para visualizar o resultado https://codepen.io/

* {margin:0;padding:0;}
body{background:#00964a;}
.pokemon{display:flex;flex-wrap:wrap;list-style:none;}
.pokemon__card{background:white;box-shadow:5px 5px 5px 1px rgba(64, 64, 64, 0.66);width:10%;margin:15px;height:auto;min-height:200px;display:flex;align-items:center;flex-direction:column;justify-content:space-evenly;text-align:center;border-radius:5px;position:relative;transition:all .2s ease-in-out;top:0;}
.pokemon__card:hover{top: -5px;}
.pokemon__thumb{width:100px;}
.pokemon__title{font-size:16px;font-family:'arial';text-transform:capitalize;}

Digite o código no codepen para visualizar o resultado https://codepen.io/

Resultado

Developer Tools

Fetch API

Uma requisição feita com Fecth é semelhante ao XMLHttpRequest porém ela oferece um conjunto de recursos mais poderosos e flexível.

/*
   API POKEMON
      https://pokeapi.co/api/v2/pokemon/
     https://pokeres.bastionbot.org/images/pokemon/1.png
*/ 
window.onload = function() {

    const _url = 'https://pokeapi.co/api/v2/pokemon/';
    const _options = {
        method:      'GET',
        mode:       'cors',
        redirect: 'follow',
        cache:    'default'
    }

    fetch(_url,_options)
        .then(function(response) {

            // tratamento de erro
            if(!response.ok) throw new Error('Erro ao executar requisição'); 

            // retorna um objeto no formato json
        return response.json(); 
        })
        // recebe os dados
        .then(function(data) {
                console.log(data); 
            // OUTPUT: {count: 1118, next: "https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20", previous: null, results: Array(20)}

                let newContent = '';
            for(let i = 1; i < data.results.length; i++) {
            newContent += `<li class="pokemon__card">`;
            newContent += `<a data-name="${data.results[i].name}">`;
            newContent += `<img class="pokemon__thumb" src="https://pokeres.bastionbot.org/images/pokemon/${[i]}.png"/>`;
            newContent += `<h2 class="pokemon__title">${data.results[i].name}</h2>`;
            newContent += `</a>`;
            newContent += `</li>`;
            }

            document.getElementById('pokemon').innerHTML = newContent;
    }); 
}

Digite o código no codepen para visualizar o resultado https://codepen.io/

<ul id="pokemon" class="pokemon"></ul>

Digite o código no codepen para visualizar o resultado https://codepen.io/

* {margin:0;padding:0;}
body{background:#00964a;}
.pokemon{display:flex;flex-wrap:wrap;list-style:none;}
.pokemon__card{background:white;box-shadow:5px 5px 5px 1px rgba(64, 64, 64, 0.66);width:10%;margin:15px;height:auto;min-height:200px;display:flex;align-items:center;flex-direction:column;justify-content:space-evenly;text-align:center;border-radius:5px;position:relative;transition:all .2s ease-in-out;top:0;}
.pokemon__card:hover{top: -5px;}
.pokemon__thumb{width:100px;}
.pokemon__title{font-size:16px;font-family:'arial';text-transform:capitalize;}

Digite o código no codepen para visualizar o resultado https://codepen.io/

Resultado

JSON

JavaScript Object Notation

Ajax é uma técnica utilizada para carregar os dados de um serviço em uma parte da aplicação sem ter que atualizar completamente a página inteira. Esses dados costumam ser enviados em um formato chamado JSON.

Os serviços hospedados em servidores geralmente reenviam HTML, XML ou JSON.

https://www.json.org/json-en.html

https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=pt-BR

Formato de dados

1. HTML
   Vantagens
   - É facil de escrever, solicitar e exibir.
   - Os dados enviados do servidor vão diretamente para a página.
   - Não há necessidade de o navegador processá-los.

   Desvantagens
   - Não é adequado para utilizar em outras aplicações apenas em navegadores.
   - Não possui boa portabilidade de dados.
   - A solicitação deve vir do mesmo domínio.

2. XML
   Vantagens
   - É um formato flexível e pode representar estruturas complexas.
   - Funciona bem em outras plataformas e aplicativos.
   - É processado utilizando os mesmos métodos DOM que os da HTML.

   Desvantagens
   - Considerado uma linguagem prolixa pois as tags adicionam uma grande quantidade de caracteres extras aos dados que são enviados.
   - A solicitação tem que ser do mesmo domínio.
   - Pode exigir muito código para processar o resultado.

3. JSON
   Vantagens
   - Pode ser requisitado de qualquer domínio.
   - Mais conciso e menos prolixo que HTML e XML.
   - O uso é mais amplo em aplicações web.

   Desvantagens
   - Sintaxe não tolerante, uma aspa, vírgula ou dois pontos ausentes pode quebrar o código.
   - Pode conter conteúdo malicioso.
   - Sempre utilizar JSON de fontes confiáveis.

JSON - Notação de objeto

Semelhante com a sintaxe de objeto literal.

{
  // chave           // valor
  "name":            "AreaDev",
  "subscribers":     5000,
  "available":       true
}

Sempre utilizar aspas duplas nas chaves e não colocar vírgula no último par de chave e valor.

Trabalhando com dados JSON

Troca de dados

Ao trocar dados entre o navegador e o servidor, os dados podem ser apenas texto.

JSON é texto e podemos converter qualquer objeto JavaScript em JSON e enviar JSON ao servidor.

Além disso, é possível converter qualquer JSON retornado do servidor em objetos JavaScript.

Recebendo dados

Se você receber dados no formato JSON, poderá convertê-los em um objeto JavaScript.

let data = '{"name":"Bruno", "age":25, "city":"São Paulo"}';
let object = JSON.parse(data);
document.write(object.name);
// OUTPUT: Bruno

Enviando dados

Se você estiver com dados armazenados em um objeto JavaScript, poderá converter o objeto em JSON e enviá-lo a um servidor.

let object = {"name":"Bruno", "age":25, "city":"São Paulo"};
let data   = JSON.stringify(object);
document.write(data);
// OUTPUT: {"name":"Bruno","age":25,"city":"São Paulo"}

Armazenando Dados no Local Storage

Os dados devem estar em um determinado formato, o formato de texto é sempre um dos principais. O JSON torna possível armazenar Objetos JavaScript como texto.

let object = {"name":"Bruno", "age":25, "city":"São Paulo"};
let data   = JSON.stringify(object);
localStorage.setItem("user", data);

Recuperando os dados

let item = localStorage.getItem("user");
let obj  = JSON.parse(item);
console.log(obj.name);
// OUTPUT: Bruno

Assista a Parte II

Links importantes

Conclusão

Entender o fluxo cliente-servidor é crucial para o desenvolvimento web, pois ele define como as aplicações solicitam e recebem dados. Requisições síncronas bloqueiam o processo até a resposta, enquanto as assíncronas permitem múltiplas requisições em paralelo, aumentando a eficiência.

AJAX, usando a XMLHttpRequest API ou a mais moderna Fetch API, permite a atualização parcial das páginas sem recarregá-las completamente, melhorando a experiência do usuário. A Fetch API é preferida por ser mais simples e poderosa.

JSON é o formato de dados preferido para a troca entre cliente e servidor por sua simplicidade e compatibilidade com várias plataformas. A conversão entre objetos JavaScript e JSON, usando JSON.parse() e JSON.stringify(), é fundamental para manipulação de dados.

Escolher o formato de dados adequado (HTML, XML, JSON) depende das necessidades da aplicação. JSON, apesar de suas vulnerabilidades, é amplamente usado por sua concisão e flexibilidade. Sempre valide e use dados de fontes confiáveis para garantir a segurança da aplicação.