Exercício 1

Nessa página HTML simples eu descrevo, de forma sucinta, as principais funcionalidades de cada exemplo.

Ex1-hello-ajax

O primeiro bloco de código é um documento HTML que define a estrutura e o estilo da página. A seção <head> contém informações sobre a codificação de caracteres, o título da página e a folha de estilo usada para formatar o conteúdo. A seção <body> contém o conteúdo principal da página, incluindo um cabeçalho, dois parágrafos e um botão.

O botão é criado dentro de um elemento <div> com o id "divDemo". Quando o botão é clicado, o script loadExtraContent é executado. Esse script cria uma nova instância do objeto XMLHttpRequest e define um evento onload que é acionado quando a resposta é recebida do servidor. Esse evento atualiza o conteúdo do elemento <div> com a resposta recebida.

<div id="divDemo">
  <button type="button">Clique para carregar mais conteúdo com Ajax</button>
</div>

<script>
  function loadExtraContent() {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", "conteudoAdicional.html", true);

    xhr.onload = function () {
      document.getElementById("divDemo").innerHTML = xhr.responseText;
    };

    xhr.onerror = function () {
      console.log("Erro de rede - requisição não finalizada");
    };

    xhr.send();
  }

  const button = document.querySelector("#divDemo > button");
  button.addEventListener("click", loadExtraContent);
</script>

O segundo bloco de código é o conteúdo adicional que é carregado dinamicamente quando o botão é clicado. Este conteúdo inclui informações sobre os cursos de graduação e pós-graduação oferecidos pela Faculdade de Computação da UFU, além de informações de contato. Ele é carregado a partir de um arquivo HTML externo chamado "conteudoAdicional.html".

<hr>
<h2>Hello Ajax!</h2>
<p>Este conteúdo acabou de ser buscado no servidor e inserido dinamicamente na página com Ajax!</p>

<h2>Cursos de Graduação</h2>
<p>A FACOM oferece os cursos de Bacharelado em Ciência da Computação, em Uberlândia, e Bacharelado 
em Sistemas de Informação, em Uberlândia e Monte Carmelo.</p>

<h2>Cursos de Pós-Graduação</h2>
<p>A <abbr title="Faculdade de Computação">FACOM</abbr> oferece também os cursos de 
Mestrado Acadêmico e Doutorado em Ciência da Computação.</p>

<address>
  Campus Santa Mônica, Bloco 1A

  Av. João Naves de Ávila, 2121, Bairro Santa Mônica

  Uberlândia, MG

  CEP 38400-902
</address>

Quando o botão é clicado, o script loadExtraContent é executado e faz uma solicitação GET para o arquivo "conteudoAdicional.html". Se a solicitação for bem-sucedida, a resposta do servidor é inserida no elemento <div> com o id "divDemo". Se ocorrer um erro, uma mensagem de erro é registrada no console do navegador.

Os dois blocos de código trabalham juntos para criar uma experiência de usuário mais dinâmica, permitindo que o conteúdo adicional seja carregado dinamicamente em resposta às ações do usuário. Isso pode melhorar a usabilidade e a acessibilidade da página, reduzindo a quantidade de conteúdo desnecessário que é carregado inicialmente e permitindo que o usuário acesse informações adicionais quando necessário.

Resultados das sugestões de testes

Ao escolher a opção "sem conexão" no ambiente de desenvolvimento do navegador (F12), o carregamento de conteúdo adicional não será bem-sucedido e uma mensagem de erro será registrada no console do navegador.

Se a URL "http://hostinexistente.com/conteudoAdicional.html" for usada em vez de "conteudoAdicional.html" em xhr.open("GET", "conteudoAdicional.html", true);, a solicitação GET falhará porque o servidor não será encontrado. O evento onerror será acionado e a mensagem "Erro de rede - requisição não finalizada" será registrada no console do navegador. O conteúdo adicional não será carregado e o usuário não verá nenhuma mudança na página.

Ex2-busca-cidade

A página HTML contém um formulário para inserir um CEP. Ele também inclui um elemento <span> com o id "cidade" que será usado para exibir o nome da cidade correspondente ao CEP inserido.

Quando o usuário insere um CEP válido (comprimento igual a 9 caracteres), o script buscaCidade é acionado. Esse script cria um objeto XMLHttpRequest e faz uma requisição GET para o arquivo "busca-cidade.php" passando o CEP como parâmetro.

O script possui duas funções de callback: xhr.onload e xhr.onerror. A função xhr.onload é acionada quando a resposta da requisição é recebida. Se o status da resposta for 200, o nome da cidade é atualizado no elemento <span> com o id "cidade". Caso contrário, o nome da cidade é limpo e uma mensagem de erro é registrada no console do navegador.

A função xhr.onerror é acionada quando ocorre um erro de rede durante a requisição. Uma mensagem de erro é registrada no console.

O evento window.onload é usado para adicionar um listener ao input de CEP. Sempre que o usuário digita algo no input, a função buscaCidade é chamada, passando o valor do input como argumento.

Além do código HTML e JavaScript, há um trecho de código PHP que é processado no lado do servidor. Ele recebe o valor do parâmetro "cep" através do método GET e faz uma verificação para retornar o nome da cidade correspondente ao CEP informado. Se o CEP não for encontrado, é retornado um código de resposta HTTP 404 e uma mensagem informando que o CEP não está disponível.

Ex3-recebendo-json1

A página HTML utiliza o framework Bootstrap para criar um formulário de preenchimento de endereço. O formulário possui campos para CEP, rua, bairro e cidade.

Para garantir a usabilidade do formulário, foi implementado um script em JavaScript chamado buscaEndereco. Esse script é ativado quando o usuário insere um CEP válido (comprimento igual a 9 caracteres). Ele utiliza o objeto XMLHttpRequest para fazer uma requisição GET ao arquivo "busca-endereco.php", passando o CEP como parâmetro.

Ao receber a resposta da requisição, o script define duas funções de callback: xhr.onload e xhr.onerror. A função xhr.onload é acionada quando a resposta da requisição é recebida. Ela realiza uma série de verificações para garantir que a requisição foi bem-sucedida (status 200) e se a resposta pode ser convertida em um objeto JavaScript válido. Em caso afirmativo, os dados do endereço são extraídos da resposta e utilizados para preencher os campos do formulário correspondentes. Caso contrário, é exibida uma mensagem de erro no console do navegador.

A função xhr.onerror é acionada caso ocorra um erro de rede durante a requisição. Uma mensagem de erro é exibida no console para informar o usuário sobre o problema.

Para garantir que a função buscaEndereco seja executada sempre que o usuário digitar algo no campo de input de CEP, foi utilizado o evento window.onload para adicionar um listener ao campo. Dessa forma, o valor do input é passado como argumento para a função buscaEndereco e a busca de endereço é feita de forma assíncrona, sem a necessidade de recarregar a página.

Além do código HTML e JavaScript, há um trecho de código PHP que é processado no lado do servidor. Ele recebe o valor do parâmetro "cep" via método GET e cria um objeto Endereco com informações fictícias de rua, bairro e cidade, com base no CEP fornecido. Em seguida, o endereço é convertido para o formato JSON e enviado como resposta, junto com o cabeçalho "Content-type: application/json".

Ex4-recebendo-json2

Nesse exercício, apenas houve alterações no script, em relação ao anterior. Sendo que,as duas versões do script buscaEndereco apresentam algumas diferenças em relação ao tratamento da resposta da requisição e manipulação dos dados retornados. A seguir, as principais diferenças:

Manipulação da resposta:
- No exercício anterior, a propriedade responseType é definida como 'json', indicando que se espera uma resposta no formato JSON. Isso permite que o objeto xhr.response seja diretamente convertido em um objeto JavaScript válido.
- Nesse script, não há definição explícita da propriedade responseType. A resposta é obtida como uma string de texto, e em seguida, é feita uma tentativa de converter essa string em um objeto JavaScript usando JSON.parse(xhr.responseText). Caso a conversão falhe, uma mensagem de erro é exibida.

Verificação do status da resposta:
- No exercício anterior, é verificado se o status da resposta é igual a 200 e se o valor de xhr.response não é nulo. Essa verificação é realizada para garantir que a requisição foi bem-sucedida e que a resposta pode ser convertida em um objeto JavaScript válido.
- Nesse script, a verificação do status é feita apenas para verificar se é diferente de 200. Caso o status seja diferente, uma mensagem de erro é exibida.

Em termos de funcionalidade básica, os dois scripts realizam a mesma tarefa de fazer uma requisição assíncrona para buscar dados de endereço com base em um CEP e preencher os campos do formulário correspondentes. No entanto, a abordagem de manipulação e verificação da resposta é ligeiramente diferente entre os dois scripts. Não houve diferenças no script php.

Ex5-recebendo-json2

Já no ex5 no qual se envia o json, a função buscaEndereco do script apresenta diferenças significativas em relação ao anterior, no que diz respeito à forma como a requisição é enviada e os dados são tratados. Vamos analisar as diferenças principais:

Método de requisição:
- No script do ex5, é utilizada uma requisição GET, onde os parâmetros são passados como parte da URL através do método xhr.open("GET", "busca-endereco.php?cep=" + cep, true).
- No atual, é utilizada uma requisição POST, onde os parâmetros são enviados no corpo da requisição através do método xhr.open("POST", "busca-endereco.php"). Os parâmetros são fornecidos como um objeto JavaScript, convertido em uma string JSON usando JSON.stringify(objetoJS), e enviado através do método xhr.send().

Formato dos dados enviados:
- No script do ex5, apenas o CEP é enviado como parâmetro na URL da requisição.
- No atual, além do CEP, são enviados outros dados como parte do corpo da requisição. Esses dados são fornecidos em um objeto JavaScript chamado objetoJS, que contém propriedades como cep, email e apikey.

Manipulação da resposta:
- No script do ex5, a resposta é tratada diretamente como um objeto JavaScript usando JSON.parse(xhr.responseText).
- No atual também é utilizada a função JSON.parse(xhr.responseText) para converter a resposta em um objeto JavaScript. No entanto, não há verificação do código de status da resposta.

No script PHP do ex5:

$cep = $_GET['cep'] ?? '';

Nesse trecho, o valor do parâmetro cep é obtido a partir dos parâmetros da URL, usando a variável global $_GET. Essa abordagem pressupõe que o parâmetro cep seja passado na URL, por exemplo, através de uma requisição GET com a seguinte estrutura: busca-endereco.php?cep=38400-100. O script verifica o valor do $cep e cria um objeto Endereco com valores predefinidos para rua, bairro e cidade, dependendo do valor do CEP. Em seguida, ele retorna os dados do endereço em formato JSON como resposta

No script PHP atual:

$stringJSON = file_get_contents('php://input');
$dados = json_decode($stringJSON);
$cep = $dados->cep;

Nesse caso, o script espera receber os dados no corpo da requisição, em formato JSON. A função file_get_contents('php://input') é utilizada para obter a string JSON que contém os dados enviados. A partir dessa string JSON, a função json_decode($stringJSON) é usada para converter a string JSON em um objeto PHP chamado $dados. O valor do CEP é acessado usando $cep = $dados->cep. Em seguida, o script verifica o valor do $cep e cria um objeto Endereco com valores predefinidos para rua, bairro e cidade, dependendo do valor do CEP. Por fim, ele retorna os dados do endereço em formato JSON como resposta.

Resumo:
- As principais diferenças na parte dos scripts JavaScript estão no método de requisição (GET vs. POST), nos dados enviados (apenas CEP vs. CEP, email e apikey), e na manipulação da resposta (verificação do código de status ausente no segundo script). Cada abordagem é adequada para diferentes situações, dependendo dos requisitos específicos da aplicação e da API que está sendo consumida.
- Por outro lado, a principal diferença entre os scripts PHP é a forma como os dados são recebidos. No primeiro script, o valor do CEP é passado como parâmetro na URL da requisição GET. No segundo script, o valor do CEP é enviado no corpo da requisição em formato JSON.

Ex6-login

A página de login HTML é uma interface simples de login com campos de e-mail, senha e um botão de entrada. Aqui estão os principais pontos do código HTML e do script JavaScript embutido:

O código HTML define a estrutura básica da página, incluindo os elementos de formulário para e-mail, senha e botão de entrada.

O script JavaScript é responsável por lidar com o envio do formulário e o processamento da resposta. Ele faz o seguinte:
- Define uma função chamada sendForm(form) para enviar o formulário de login para o servidor usando AJAX.
- Cria um objeto XMLHttpRequest para fazer a requisição assíncrona ao servidor.
- Configura o método HTTP para POST e define a URL de destino usando o atributo action do formulário.
- Define o tipo de resposta esperada como JSON usando xhr.responseType.
- Manipula o evento onload para processar a resposta do servidor. Se a resposta for bem-sucedida (status 200) e puder ser convertida em objeto JSON, os dados de resposta são utilizados.
- Se a resposta indicar sucesso (loginResponse.success), o usuário é redirecionado para uma página de boas-vindas.
- Caso contrário, uma mensagem de erro é exibida e o campo de senha é limpo.
- Trata o evento onerror para lidar com erros de rede.

Script PHP (checkLogin.php): Este script PHP é responsável por verificar as credenciais de login enviadas pelo formulário e retornar uma resposta JSON indicando o resultado da verificação. Aqui estão os principais pontos do script PHP:

O script começa criando uma classe chamada RequestResponse, que possui propriedades success e detail. Essa classe será usada para estruturar a resposta JSON.

Obtém os valores do e-mail e senha enviados através do método POST usando as variáveis $_POST['email'] e $_POST['senha'].

Realiza uma validação simplificada para fins didáticos, comparando o e-mail e a senha com valores fixos. Se as credenciais forem válidas, cria uma instância de RequestResponse com sucesso (true) e um detalhe indicando a página de boas-vindas.

Caso contrário, cria uma instância de RequestResponse com sucesso (false) e um detalhe vazio.

Configura o cabeçalho da resposta para indicar que o conteúdo é JSON e retorna a resposta JSON usando json_encode.

Esses códigos em conjunto criam uma página de login interativa em que o usuário pode inserir suas credenciais, enviá-las para o servidor usando AJAX e receber uma resposta JSON que indica se o login foi bem-sucedido ou não. Dependendo da resposta, o usuário é redirecionado para a página de boas-vindas ou uma mensagem de erro é exibida.

Igor Augusto