Tutorial PHP Ajax com Exemplo

Índice:

Anonim

O que é Ajax?

A forma completa de AJAX é JavaScript e XML assíncrono. É uma tecnologia que reduz as interações entre o servidor e o cliente. Ele faz isso atualizando apenas parte de uma página da web, em vez de toda a página. 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. Ele é executado no lado do cliente pelos navegadores da web que oferecem suporte a JavaScript. O código JavaScript funciona apenas em navegadores com JavaScript habilitado.

XML é a sigla para Extensible Markup Language. É usado para codificar mensagens em formatos legíveis por humanos e por máquina. É como HTML, mas permite que você crie suas tags personalizadas. Para obter mais detalhes sobre XML, consulte o artigo sobre XML

Por que usar AJAX?

  • Ele permite o desenvolvimento de aplicativos da web interativos ricos, assim como aplicativos de desktop.
  • A validação pode ser realizada à medida que o usuário preenche um formulário sem enviá-lo. Isso pode ser feito usando o preenchimento automático. As palavras que o usuário digita são enviadas ao servidor para processamento. O servidor responde com palavras-chave que correspondem ao que o usuário inseriu.
  • 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 atualizada sem carregar a página inteira. Isso é muito útil para partes de páginas da web que carregam coisas como
    • Tweets
    • Commens
    • Usuários que visitam o site etc.

Como criar um aplicativo PHP Ajax

Criaremos um aplicativo simples que permite aos usuários pesquisar estruturas populares de PHP MVC.

Nosso aplicativo terá uma caixa de texto onde os usuários digitarão os nomes do framework.

Em seguida, usaremos mvc AJAX para pesquisar uma correspondência e exibiremos o nome completo da estrutura logo abaixo do formulário de pesquisa.

Etapa 1) Criação da página de índice

Index.php

PHP MVC Frameworks - Search Engine

PHP MVC Frameworks - Search Engine


Type the first letter of the PHP MVC Framework








Matches:

AQUI,

  • “Onkeyup =" showName (this.value) "” executa a função JavaScript showName toda vez que uma chave é digitada na caixa de texto.

    Este recurso é chamado de autocompletar

Etapa 2) Criação da página de frameworks

frameworks.php

 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) Criação do script JS

auto_complete.js

function showName(str){if (str.length == 0){ //exit function if nothing has been typed in the textboxdocument.getElementById("txtName").innerHTML; //clear previous resultsreturn;}if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp=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,

  • “If (str.length == 0)” verifique o comprimento da string. Se for 0, o resto do script não será executado.
  • “If (window.XMLHttpRequest)…” As versões 5 e 6 do Internet Explorer usam ActiveXObject para implementação de AJAX. Outras versões e navegadores como Chrome, FireFox usam XMLHttpRequest. Este código irá garantir que nosso aplicativo funcione no IE 5 e 6 e em outras versões altas do IE e navegadores.
  • “Xmlhttp.onreadystatechange = function…” verifica se a interação AJAX está completa e o status é 200 e então atualiza o intervalo txtName com os resultados retornados.

Etapa 4) Testar nosso aplicativo PHP Ajax

Assumindo que você salvou o arquivo index.php Em phututs / ajax, navegue até a 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 de interação ricos.

Resumo

  • AJAX é a sigla para Asynchronous JavaScript and XML
  • AJAX é uma tecnologia usada para criar aplicativos de interação ricos que reduzem as interações entre o cliente e o servidor, atualizando apenas partes da página da web.
  • O Internet Explorer versão 5 e 6 usa ActiveXObject para implementar operações AJAX.
  • O Internet explorer versão 7 e superior e os navegadores Chrome, Firefox, Opera e Safari usam XMLHttpRequest.