Como fazer requisições assíncronas com AJAx e PHP

Esse tutorial é continuação da Introdução ao AJAX. Agora você vai aprender como realizar requisições assíncronas com Javascript e PHP.

Para usar AJAX em conjunto com PHP, você pode seguir os seguintes passos:

Crie um arquivo PHP que processa a solicitação AJAX

Você precisará criar um arquivo PHP que recebe a solicitação AJAX e processa as informações enviadas pelo cliente. O PHP pode então executar ações no servidor, como acessar um banco de dados ou gerar conteúdo dinamicamente. Aqui está um exemplo simples de um arquivo PHP que recebe um parâmetro "nome" e retorna uma mensagem de saudação:

<?php
if(isset($_GET['nome'])) {
  $nome = $_GET['nome'];
  echo "Olá, " . $nome . "!";
}
?>

Copiar

Criando uma função JavaScript que envia a solicitação AJAX

Em seguida, você precisará criar uma função JavaScript que envia a solicitação AJAX para o arquivo PHP que você criou. A função deve usar o objeto XMLHttpRequest para enviar a solicitação e definir uma função de callback que é executada quando a resposta é recebida. Aqui está um exemplo de uma função JavaScript simples que envia uma solicitação GET para o arquivo PHP acima:

function saudar() {
  var nome = document.getElementById("nome").value;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("resposta").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "saudar.php?nome=" + nome, true);
  xhttp.send();
}

Copiar

Esta função obtém o valor de um campo de entrada HTML com o ID "nome", cria um novo objeto XMLHttpRequest, define uma função de callback que atualiza um elemento HTML com a resposta do servidor e envia a solicitação GET para o arquivo PHP "saudar.php" com o parâmetro "nome".

Adicione um botão HTML que chama a função JavaScript:

Por fim, você precisa adicionar um botão HTML ou outro elemento que chame a função JavaScript quando clicado. Aqui está um exemplo de um botão HTML que chama a função "saudar()" quando clicado:

<input type="text" id="nome">
<button onclick="saudar()">Saudar</button>
<div id="resposta"></div>

Copiar

Este exemplo inclui um campo de entrada HTML para o usuário digitar seu nome, um botão que chama a função "saudar()" e um elemento HTML para exibir a resposta do servidor.

Com esses passos, você pode criar uma solicitação AJAX em JavaScript que envia informações para um arquivo PHP, processa as informações no servidor e retorna uma resposta para a página da web.