Tutorial PHP Ajax com exemplo
Fiona Brown
⚡ Resumo Inteligente
Em PHP, o Ajax permite que uma página web troque pequenas quantidades de dados com o servidor e atualize parte da página sem recarregar completamente. Este tutorial cria uma busca interativa no framework, explicando a abordagem clássica do XMLHttpRequest e a alternativa moderna da API Fetch.
O que é Ajax?
AJAX significa Assíncrono JavaScript XML é uma tecnologia que reduz as interações entre o servidor e o cliente. Ela faz isso atualizando apenas parte de uma página da web, em vez da página inteira. As interações assíncronas são iniciadas por JavaScript. O objetivo do AJAX é trocar pequenas quantidades de dados com o servidor sem atualizar a página.
JavaScript é uma linguagem de script do lado do cliente. Ela é executada no lado do cliente por navegadores web que a suportam. JavaRoteiro. JavaO código do script só funciona em navegadores que possuem JavaScript habilitado.
XML XML é a sigla para Extensible Markup Language (Linguagem de Marcação Extensível). É usada para codificar mensagens em formatos legíveis tanto por humanos quanto por máquinas. É semelhante ao HTML, mas permite criar tags personalizadas. Para mais detalhes sobre XML, consulte o artigo sobre XML.
Por que usar AJAX?
- Permite o desenvolvimentoping Aplicativos web ricos e interativos, assim como os aplicativos para desktop.
- A validação pode ser realizada enquanto o usuário preenche um formulário, sem que ele precise enviá-lo. Isso pode ser feito usando o recurso de autocompletar. As palavras digitadas pelo usuário são enviadas ao servidor para processamento, e o servidor responde com palavras-chave que correspondem ao que o usuário digitou.
- Pode ser usado para preencher uma caixa suspensa dependendo do valor de outra caixa suspensa.
- Os dados podem ser recuperados do servidor e apenas uma determinada parte de uma página pode ser atualizada sem carregar a página inteira. Isso é muito útil para partes de páginas da web que carregam elementos como:
- Tweets
- Comentários
- Usuários que visitam o site e dados semelhantes em tempo real.
Como criar uma aplicação PHP Ajax
Criaremos um aplicativo simples que permitirá aos usuários pesquisar estruturas PHP MVC populares.
Nosso aplicativo terá uma caixa de texto onde os usuários digitarão os nomes dos frameworks.
Em seguida, usaremos AJAX para buscar uma correspondência e exibir o nome completo da estrutura logo abaixo do formulário de pesquisa.
Etapa 1) Criando a página de índice
index.php
<html> <head> <title>PHP MVC Frameworks - Search Engine</title> <script type="text/javascript" src="auto_complete.js"></script> </head> <body> <h2>PHP MVC Frameworks - Search Engine</h2> <p><b>Type the first letter of the PHP MVC Framework</b></p> <form method="POST" action="index.php"> <p><input type="text" size="40" id="txtHint" onkeyup="showName(this.value)"></p> </form> <p>Matches: <span id="txtName"></span></p> </body> </html>
AQUI,
- “onkeyup=”showName(this.value)”” executa o JavaA função de script exibe o nome sempre que uma tecla é digitada na caixa de texto. Esse recurso é chamado de preenchimento automático.
Etapa 2) Criando a página de frameworks
frameworks.php
<?php $frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ; $name = $_GET["name"]; if (strlen($name) > 0) { $match = ""; for ($i = 0; $i < count($frameworks); $i++) { if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) { if ($match == "") { $match = $frameworks[$i]; } else { $match = $match . " , " . $frameworks[$i]; } } } } echo ($match == "") ? 'no match found' : $match; ?>
Etapa 3) Criando o script JS
auto_complete.js
function showName(str){ if (str.length == 0){ // exit function if nothing has been typed in the textbox document.getElementById("txtName").innerHTML=""; // clear previous results return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById("txtName").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","frameworks.php?name="+str,true); xmlhttp.send(); }
AQUI,
- A condição “if (str.length == 0)” verifica o comprimento da string. Se for 0, o restante do script não é executado.
- “if (window.XMLHttpRequest)…” As versões 5 e 6 do Internet Explorer usam ActiveXObject para a implementação AJAX. Outras versões e navegadores, como o Chrome e Firefox Use XMLHttpRequest. Este código garante que nossa aplicação funcione tanto no IE 5 e 6 quanto em navegadores modernos.
- A função “xmlhttp.onreadystatechange=function…” verifica se a interação AJAX foi concluída e se o status é 200, atualizando então o elemento span txtName com os resultados retornados.
Etapa 4) Testando nosso aplicativo PHP Ajax
Supondo que você tenha salvo o arquivo index.php em phptuts/ajax, navegue até o URL http://localhost/phptuts/ajax/index.php
Digite a letra C na caixa de texto. Você obterá os seguintes resultados.
O exemplo acima demonstra o conceito de AJAX e como ele pode nos ajudar a criar aplicativos ricos e interativos.
AJAX moderno com a API Fetch
O objeto XMLHttpRequest acima ainda funciona, mas sua ramificação ActiveXObject para o antigo Internet Explorer não é mais necessária. Os navegadores modernos fornecem a API Fetch baseada em promessas, que faz a mesma requisição com muito menos código.
function showName(str) { if (str.length === 0) { document.getElementById("txtName").innerHTML = ""; return; } fetch("frameworks.php?name=" + encodeURIComponent(str)) .then(response => response.text()) .then(text => { document.getElementById("txtName").innerHTML = text; }); }
Esta versão faz o mesmo trabalho: envia o texto digitado para frameworks.php e coloca a resposta no span txtName. Ela também usa encodeURIComponent para escapar a entrada com segurança, e sua cadeia de promessas é fácil de estender com tratamento de erros usando um bloco catch.
