✅ Código assíncrono Jquery Ajax com php

Índice

Jquery AJAX é o Suporte à estrutura Javascript para processamento assíncrono de solicitações ao servidor web.
É utilizado para a criação de páginas web dinâmicas, Estas aplicações ou páginas web rodam no cliente, no navegador dos utilizadores, mantendo a comunicação assíncrona com o servidor em segundo plano, desta forma pode ser feito um pedido ao servidor para o processar e receber as informações processadas sem que o usuário altere a página ou tenha que atualizar, também é transparente para o usuário, pois ele não vê em qual página foi feita a solicitação.
Vamos criar uma função para consultar um banco de dados a partir de um formulário da web
Criamos uma web com um formulário que chamaremos de index.html

 
 
 Nome:   

 
 Cidade:

O resultado será um formulário html com os campos detalhados, depois a função infoclientes () será criada.

Agora criamos o banco de dados de clientes que usaremos como exemplo para consultar:

 CREATE TABLE `customers`` customers` (` id` INT (10) NOT NULL AUTO_INCREMENT, `name` VARCHAR (255) NOT NULL,` city` VARCHAR (255) NOT NULL, PRIMARY KEY (`id`)) ENGINE = INNODB;

Inserimos alguns dados no banco de dados:

Criamos agora um arquivo customers.php para consultar por nome e nos devolver a cidade, podendo ser consultado por qualquer outro campo ou vários que estejam cadastrados no formulário.

A função Ajax agora que precisamos para que a partir do formulário possamos invocar o arquivo php e fazer a solicitação ao servidor. Nele criamos a função infoclientes () que deixamos pendente.

Quando executamos o web index.html podemos escrever o campo do nome e clicar em consultar nos traz o resultado que está armazenado na div info e na caixa de texto; sem ter atualizado a página.

Se tivermos Firebug podemos ver as requisições, quanto tempo demoram, quais parâmetros foram usados e qual foi a resposta do servidor, neste caso esta consulta demorou 30 milésimos de segundo para rodar no servidor e voltar a ser exibida no navegador.

O uso de jquery e ajax permite melhorar a usabilidade da aplicação, obtendo-se maior velocidade, isso porque não é necessário retornar a página inteira novamente e fazer o usuário esperar.
As informações podem ser consultadas e exibidas de diferentes maneiras, conforme necessário.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo