Tutorial PHP Ajax com exemplo

O que é Ajax?

AJAX forma completa é Asynchonroso JavaScript eXML. É uma tecnologia que reduz as interações entre o servidor e o cliente. Isso é feito atualizando apenas parte de uma página da Web, e não a página inteira.syncinterações crônicas são iniciadas por JavaScript. O objetivo do AJAX é trocar pequenas quantidades de dados com o servidor sem atualização da página.

JavaScript é uma linguagem de script do lado do cliente. Ele é executado no lado do cliente pelos navegadores da Web que suportam JavaScript. O código JavaScript funciona apenas em navegadores com 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 mais details em XML, veja 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.
  • Ele pode ser usado para preencher um menu suspenso box dependendo do valor de outro menu suspenso box
  • 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á um texto box que os usuários digitarão os nomes da estrutura.

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 a função JavaScript showName toda vez que uma chave é digitada no textobox.Este 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,

  • “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 no texto box Você receberá o seguintewing 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 Asynchonroso 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, Opera e Safari usam XMLHttpRequest.