Tutorial PHP Ajax com exemplo

Por: Fiona Brown Fiona Brown
Hours Atualização do

O que é Ajax?

AJAX o formulário completo é 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 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. É executado no lado do cliente pelos navegadores que suportam JavaRoteiro.JavaO código do script só funciona em navegadores que possuem JavaScript habilitado.

XML é a sigla para Extensible Markup Language. Ele é usado para codificar mensagens em formatos legíveis por humanos e por máquinas. É 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 e ricos, assim como os aplicativos de desktop.
  • A validação pode ser realizada conforme o usuário preenche um formulário sem enviá-lo. Isso pode ser conseguido 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 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 atualizada sem carregar a página inteira. Isso é muito útil para partes de páginas da web que carregam coisas como
  • Tweets
  • Comentários
  • Usuários que visitam o site etc.

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 do framework.

Em seguida, usaremos mvc AJAX para procurar uma correspondência e exibiremos 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 JavaFunção de script showName 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;

?>

ARTIGOS RELACIONADOS

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,

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

Etapa 4) Testando nosso aplicativo PHP Ajax

Supondo que você salvou o arquivo index.php em phututs/ajax, navegue até a URL http://localhost/phptuts/ajax/index.php

Testando nosso aplicativo PHP Ajax

Digite a letra C na caixa de texto. Você obterá os seguintes resultados.

Testando nosso aplicativo PHP Ajax

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 Assíncrono JavaScript e 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 web.
  • O Internet Explorer versões 5 e 6 usam ActiveXObject para implementar operações AJAX.
  • Internet Explorer versão 7 e superior e navegadores Chrome, Firefox, Operae o Safari usam XMLHttpRequest.