Revisão XMLHttpRequest

Para detalhar o funcionamento da API (objeto) XMLHttpRequest vamos carregar informações de um JSON dentro de uma tabela.

Uma vez que nestes exemplos iremos explorar consultas a bancos de dados, é importante utilizarmos um servidor remoto (XAMPP ou AMPPS)

O arquivo abaixo, index.html, apresenta um código simples importando todas as dependências (via CDN) da biblioteca bootstrap e do plugin DataTables

Para iniciarmos uma tabela com os recursos do DataTables é necessário o código de inicialização, este código será apresentado no arquivo main.js

index.html

		<!doctype html>
		<html>
		 
		<head>
			 <!-- Required meta tags -->
			 <meta charset="utf-8">
			 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		 
			 <!-- Bootstrap CSS -->
			 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
		 
			 <!-- DataTables CSS -->
			 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
			 <title>Teste XMLHttpRequest</title>
		</head>
		<body>
			 <div class="container mt-4">
				  <button id="btnCarregaDados" type="button" class="btn btn-primary mb-4">Carregar arquivo JSON</button>
				  <table id="tbNomes" class="stripe">
						<thead>
							 <tr>
								  <th>ID</th>
								  <th>Nome</th>
							 </tr>
						</thead>
						<tbody>
						</tbody>
				  </table>
			 </div>
		 
			 <!-- JQUERY (necessário para datatables) -->
			 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>    
		 
			 <!-- DataTables JS -->
			 <script type="text/javascript" charset="utf8"
				  src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
		 
			 <!-- SRCIPT PRINCIPAL -->
			 <script src="main.js"></script>
		 
		</body>
		</html>

Abaixo o arquivo em Javascript que irá importar de forma assíncrona as informações de um arquivo json. O resumo linha a linha está apresdentado abaixo
Linha 1 - o botão do arquivo index.html é declarado
Linha 4 - função "escutadora" de eventos, relacionada ao botão da linha 1 .
Linha 2 - a tabela é inicializada - utilizando a chamada padrão do JQUERY.
Linha 5 - Função do Datatables para limpar a tabela, neste caso utilizada para que novas informações não fiquem duplicadas.
Linha 7 - Declaração do objeto XMLHttpRequest propriemante dito
Linha 9 - A requisição do tipo GET é utilizada para carregar as informações do arquivo nomes.json (Apresentado abaixo)
Linha 10 - Sempre que uma requisição assíncrona (i.e. XMLHttpRequest) é utilizada, é necessário implementar um evento para que a informação seja renderizada, após ser carregada e processada.
Linha 12 - O texto sem predefinições é carregado
Linha 13 - Uma vez que o padrão desta informação é do tipo JSON, este comando converte a string em um JSON
Linha 13 - Uma vez que o padrão desta informação é do tipo JSON, este comando converte a string em um JSON
Linha 16 a Linha 22 - As informação são listadas linha por linha e adicionadas a tabela
Linha 25 - Assim que essa instrução é enviada o evento da linha 10 é executado (podemos estabecer um paralelo com o botão. Aqui seria o equivalente a "clicar" o botão)

main.js

		var btnAction = document.querySelector("#btnCarregaDados");
		var tbNomes = $('#tbNomes').DataTable();
		 
		btnAction.addEventListener("click", function(){
			 tbNomes.clear().draw();
		 
			 var xhr = new XMLHttpRequest();
			
			 xhr.open("GET", "nomes.json");
			 xhr.addEventListener("load", function(){
			  
				  var resposta = xhr.responseText;
				  var respostaJSON = JSON.parse(resposta);
					
					
				  for (var i=0 ; i<respostaJSON.length ; i++){
						 
						tbNomes.row.add( [
								  respostaJSON[i]['id'], 
								  respostaJSON[i]['nome'], 
							 ]).draw(false);
				  }
			 })
			  
			 xhr.send();
		})

nomes.json

Essas são as informações que serão carregadas de forma assíncrona. Para verificar o funcionamento, adicione novos nomes e aperte o botão do index.html, você irá notar que os nomes adicionados serão no json irão ser renderizados no html sem a necessidade de atualização do site.

		[
		 {"id":1, "nome": "Henrique"},
		 {"id":2, "nome": "Anna"},
		 {"id":3, "nome": "Pedro"}
		]

Trocar o json pelo PHP

Neste segundo exemplo vamos seguir o mesmo raciocínio, mas ao invés de usar um arquivo json pronto, vamos utilizar um php cuja saída seja um JSON.

A primeira coisa a fazer é criar um novo database, atribuir um usuário e criar uma tabela nomes. Utilizar o phpmyadmin no processo.

Abaixo a tabela que usaremos como exemplo:

script para criar tabelas tbpessoas

	CREATE TABLE `ehealth`.`tbpessoas` ( 
			`pessoa` INT NOT NULL AUTO_INCREMENT , 
			`nome` VARCHAR(50) NOT NULL , 
			`cpf` VARCHAR(50) NOT NULL , 
			PRIMARY KEY (`pessoa`));
	
	INSERT INTO `tbpessoas` (`pessoa`, `nome`, `cpf`) 
	VALUES 
			(NULL, 'Henrique Amorim', '12312313'), 
			(NULL, 'Anna Silva', '654611651'), 
			(NULL, 'Paula dos Santos', '484651132184'), 
			(NULL, 'Gabriela Mattos', '484131841616');

O arquivo php abaixo trará a mesmo formato de informação do json utilizado anteriormente, entretanto, será buscará as informações de um banco de dados

nomes.php (substituir no main.js o nomes.json por nomes.php)
Verificar a semelhança entre os arquivos nomes.json e nomes.php - Utilize os caminhos de cada arquivo para comparar
Linha 2 a linha 13 Conexão com o banco de dados.
Linha 15 - Query de pesquisa SQL.
Linha 17 - Executa query
Linha 18 - Verifica se há retorno de valores (se a tabela possui registros)
Linha 20 - Linha 23 Formata a resposta do banco seguindo a padronização JSON
Linha 24 - Remove a última vírgula
Linha 28 - Imprime a variável

nomes.php


		<?php
			 $servername = "localhost";
			 $username = "root";
			 $password = "mysql";
			 $dbname = "ehealth";

			 // Create connection
			 $conn = new mysqli($servername, $username, $password, $dbname);

			 // Check connection
			 if ($conn->connect_error) {
				  die("Connection failed: " . $conn->connect_error);
			 }

			 $sql = "SELECT `pessoa`, `nome`, `cpf` FROM `tbpessoas`"; 
			 $stringJSON = "";
			 $result = $conn->query($sql);
			 if ($result->num_rows > 0) {
				  
				  while($row = $result->fetch_assoc()) {
						$stringJSON =  $stringJSON.'{ "id": '. $row["pessoa"] .',
						"nome":"'. $row["nome"] .'"},';
				  }
				  $stringJSON = substr($stringJSON, 0, -1);
				  $stringJSON =  "[".$stringJSON."]";
			 }
			 
			 echo $stringJSON;
			 $conn->close();
		?>

Exercício: Implemente o CPF na tabela e no PHP