Ajax

Essa matéria pressupõe que você tenha noção sobre a comunicação com o servidor.

O Ajax é uma técnica usada para se comunicar assincronamente com o servidor, ou seja, o Ajax permite o envio e a recepção de dados do servidor sem que a página recarregue!

Para isso no Inter nós devemos usar o constructor Backend, nome muito descriptivo né? Quando criarmos uma instância para o referido constructor, ela(a instância) terá o método request, que nós usamos para as configurações da requisição, e o referido método aceita apenas um objecto como o seu argumento, e o objecto aceita as seguintes propriedades:

type(obrigatório) - Deve ser uma string que vai indicar o tipo de requisição.
path(obrigatório) - Deve ser uma string que vai indicar o endereço onde será feito a requisição.
headers - Deve ser um objecto em que as suas propriedades vão indicar os nomes dos cabeçalhos da requisição e os seus valores vão indicar os valores dos respectivos cabeçalhos.
events - Deve ser um objecto em que as suas propriedades vão indicar os nomes dos eventos e os seus valores devem ser as funções que serão invocadas quando os eventos ocorrerem.
security - Deve ser um objecto, será útil quando for requisitado o nome do usuário e a palavra-passe para estabelecer a comunicação com o servidor. Ele aceita duas propriedades, o username e o valor dessa propriedade deve indicar o nome do usuário e a password e o valor dessa propriedade deve indicar a palavra-passe.
timeout - Essa propriedade apenas aceita número como o seu valor e esse número vai indicar o tempo em mil segundos, se o tempo da requisição ultrapassar o estabelecido com essa propriedade, a requesição será cancelada e o evento ontimeout será acionado.
body - O valor dessa propriedade indica o corpo da requisição, ou seja, os dados que serão enviados para o servidor.

O método request retorna um objecto com alguns métodos que têm dois objectivos, o primeiro é que quando eles forem invocados vão dar início à requisição, o segundo é que eles vão nos ajudar a reagir ao resultado da requisição. E os métodos são:

okay - Esse método apenas aceita uma função como o seu argumento, e a função será invocada caso a requisição for um sucesso.
error - Esse método apenas aceita uma função como o seu argumento, e a função será invocada caso a requisição não for um sucesso.
response - Esse método é usado quando quisermos reagir ao sucesso e ao erro em uma requisição, ele aceita dois argumentos, o primeiro será o okay(a função que será invocada se a requisição for um sucesso) e o segundo será o error(a função que será invocada caso a requisição não for um sucesso).

As funções passadas como argumento dos referidos métodos, serão invocadas com um objecto como o seu argumento, e as propriedades desse objecto vão indicar o resultado da requisição. As propriedades são:

data - É uma propriedade só de leitura que retorna a informação enviada pelo servidor.
status - É uma propriedade só de leitura que retorna o statusCode enviado pelo servidor.
statusText - É uma propriedade só de leitura que retorna o significado do statusCode enviado pelo servidor.
headers - Antes da versão 2.1.0, essa era uma propriedade só de leitura que retornava os cabeçalhos enviados pelo servidor em uma string. Agora, o valor dessa propriedade é um objecto, em que as suas propriedades representam os nomes dos cabeçalhos enviados pelo servidor, e os valores das propriedades representam os valores dos cabeçalhos.
isObj - É um método que serve para verificar se a resposta enviada pelo servidor foi um objecto JSON, se for, vai retornar true, caso o contrário, retorna false.

Agora que sabes o essencial do Ajax, vamos pôr a mão no código!

<div id="ajax1">
    <h3>Identidade</h3>
    <ul>
        <li>Nome: { nome }</li>
        <li>Idade: { idade }</li>
        <li>País: { pais }</li>
        <li>Estado cívil: { ec }</li>
        <li>Número de filhos: { nf }</li>
    </ul>
    <div>
        <img src={imagem} alt="Foto de { nome }">
    </div>
   <ul id="lista-de-usuarios"></ul>
</div>

const usuarios = ["./user1.json", "./user2.json", "./user3.json"];

const ref = Ref({
    in: "ajax1",
    data: {
        nome: "...",
        idade: "...",
        pais: "...",
        ec: "...",
        nf: "...",
        imagem: "/images/Inter.png"
    }
})

renderList({
    in: "lista-de-usuarios",
    each: usuarios,
    do(usuario, i){

return template({
            tag: "li", children: [{
                tag: "span", text: `Usuário ${i+1}`
            },{
                tag: "button", text: "Carregar info", events: {
                    onclick: () => carregarInfo(usuario)
                }
            }]
        })

}
})

function carregarInfo(caminho){

const ajax1 = new Backend();

ajax1.request({ 
        type: "get",
        path: caminho
    }).okay(({ data }) => {

ref.setRefs = data;

})

}

</script>

Identidade

Nome: { nome }
Idade: { idade }
País: { pais }
Estado cívil: { ec }
Número de filhos: { nf }

Os eventos no Ajax

Nós podemos definir os escutadores de eventos em uma requisição feita com o Ajax, e esses escutadores devem ser declarados como propriedades do objecto events, os eventos são:

onprogress - Como o nome o descreve, esse evento será acionado enquanto a requisição estiver a ser feita, e a função que deve ser invocada quando o evento ocorrer será invocada com um argumento, que será um objecto com duas propriedades. A propriedade progress vai indicar o progresso(de 0 à 100) da requisição, principalmente quando os dados que estiverem a ser enviados ou recebidos forem muito pesados e o método abort quando for invocado vai abortar/cancelar a requisição e o evento onabort será acionado.
ontimeout - Esse evento vai ser acionado quando o tempo de requisição ultrapassar o estabelecido(pelo programador, com a propriedade timeout).
onabort - Esse evento será acionado quando a requisição for cancelada com o método abort.

E é tudo! Essa matéria te explicou tudo sobre Ajax no Inter. Se você leu o tutorial do princípio até aqui e entendeste tudo, então parabéns, você agora pode programar com o Inter numa boa! Passa lá no repositório do Inter no Github e deixe uma estrela, dessa forma estarás ajudando na repercussão do Inter.

E para terminar o tutorial, dê uma olhada no exemplo abaixo.

<div id="app">
<h4> Descubra os repositórios de um usuário do Github</h4>
    <div>
        <input {...searchinput}>
        <button {...searchbutton}> { buttonStatus  } </button>
    </div>
    <p>
        Usuário : { userName  },
        Número de repositórios : { repoLength  }.
        
    </p>
	<p style="color: red;"> { errorMessage }  </p> 
    <div id="repoList"></div>
</div>

const { searchinput, searchbutton  } = toAttrs({
    in: "app",
    data: {
        searchinput: { type: "text", value: "", placeholder: "Digite o usuário" },
        searchbutton: { disabled: null, onclick: search }
    }
 })

const refs = Ref({
    in: "app",
    data: {
        userName: "sem usuário",
        repoLength: 0,
        buttonStatus: "Buscar",
        errorMessage: ""
    }
 })

const listReactor = renderList({
    in: "repoList",
    each: [],
    do({ name, description, full_name, forks }){

const aAttrs = {
            target: "_blank",
            href: `https://github.com/${full_name}`
        }

return template({
            tag: "div", children: [{
                tag: "h2", text: `Nome do repo: ${ name }`
            },{
                tag: "p", text: description, renderIf: description
            },{
                tag: "p", text: forks > 0 ? `Forks: ${ forks }` : "Sem forks"
            },{
                tag: "a", attrs: aAttrs, children: [{
                    tag: "button", text: "Visitar"
                }]
            }]
        })

}
  })

function search(){

refs.buttonStatus = "Buscando";
    searchbutton.disabled = true;
    
    const ajax2 = new Backend();

const requestOptions = {
        type: "get",
        path: `https://api.github.com/users/${searchinput.value}/repos`
    }

ajax2.request(requestOptions).response(okay, error);

}

function okay({ data  }){

listReactor.setEach = data;
    refs.setRefs = {
        buttonStatus: "Buscar",
        userName: searchinput.value,
        repoLength: data.length,
        errorMessage: ""
    };

clearInputAndEnableTheButton();

}

function error({ status, data  }){

listReactor.setEach = [];
    refs.setRefs = {
        buttonStatus: "Buscar",
        userName: "sem usuário",
        repoLength: 0,
        errorMessage() {

return (
            status == 404 ? `Usuário não encontrado` : data
          )

}
    };

clearInputAndEnableTheButton();

}

function clearInputAndEnableTheButton(){

searchinput.value = "";
     searchbutton.disabled = null;

}

</script>

Descubra os repositórios de um usuário do Github

Usuário : { userName }, Número de repositórios : { repoLength }.

{ errorMessage }