Tutorial de PHP Ajax con ejemplo

¿Qué es Ajax?

AJAX la forma completa es Asynchonrado JavaScript y XML. Es una tecnología que reduce las interacciones entre el servidor y el cliente. Para ello, actualiza sólo una parte de una página web en lugar de toda la página.syncJavaScript inicia interacciones ronosas. El propósito de AJAX es intercambiar pequeñas cantidades de datos con el servidor sin actualizar la página.

JavaScript es un lenguaje de programación del lado del cliente. Los navegadores web que admiten JavaScript lo ejecutan en el lado del cliente. El código JavaScript solo funciona en navegadores que tienen JavaScript habilitado.

XML es el acrónimo de lenguaje de marcado extensible. Se utiliza para codificar mensajes en formatos legibles por humanos y máquinas. Es como HTML pero te permite crear etiquetas personalizadas. Para más details sobre XML, consulte el artículo sobre XML

¿Por qué utilizar AJAX?

  • Permite desarrollar aplicaciones web interactivas enriquecidas al igual que las aplicaciones de escritorio.
  • La validación se puede realizar cuando el usuario completa un formulario sin enviarlo. Esto se puede lograr mediante la finalización automática. Las palabras que el usuario escribe se envían al servidor para su procesamiento. El servidor responde con palabras clave que coinciden con lo que ingresó el usuario.
  • Se puede utilizar para completar un menú desplegable. box dependiendo del valor de otro menú desplegable box
  • Los datos se pueden recuperar del servidor y solo se actualiza una determinada parte de una página sin cargar toda la página. Esto es muy útil para partes de páginas web que cargan cosas como
  • Tweets
  • Comentarios
  • Usuarios que visitan el sitio, etc.

Cómo crear una aplicación PHP Ajax

Crearemos una aplicación sencilla que permita a los usuarios buscar marcos PHP MVC populares.

Nuestra aplicación tendrá un texto. box que los usuarios escribirán los nombres del marco.

Luego usaremos mvc AJAX para buscar una coincidencia y luego mostraremos el nombre completo del marco justo debajo del formulario de búsqueda.

Paso 1) Crear la 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>

AQUÍ,

  • “onkeyup=”showName(this.value)”” ejecuta la función JavaScript showName cada vez que se escribe una clave en el textobox.Esta función se llama autocompletar.

Paso 2) Crear la página de marcos

marcos.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;

?>

Paso 3) Crear el script JS

auto_completar.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();

}

AQUÍ,

  • “if (str.length == 0)” comprueba la longitud de la cadena. Si es 0, entonces el resto del script no se ejecuta.
  • “if (window.XMLHttpRequest)…” Las versiones 5 y 6 de Internet Explorer utilizan ActiveXObject para la implementación de AJAX. Otras versiones y navegadores como Chrome, FireFox Utilice XMLHttpRequest. Este código garantizará que nuestra aplicación funcione tanto en IE 5 y 6 como en otras versiones superiores de IE y navegadores.
  • “xmlhttp.onreadystatechange=function…” comprueba si la interacción AJAX está completa y el estado es 200 y luego actualiza el intervalo txtName con los resultados devueltos.

Paso 4) Probar nuestra aplicación PHP Ajax

Suponiendo que haya guardado el archivo index.php en phuuts/ajax, busque la URL http://localhost/phptuts/ajax/index.php

Probando nuestra aplicación PHP Ajax

Escribe la letra C en el texto. box Obtendrás el siguientewing resultados.

Probando nuestra aplicación PHP Ajax

El ejemplo anterior demuestra el concepto de AJAX y cómo puede ayudarnos a crear aplicaciones de interacción enriquecidas.

Resumen

  • AJAX es el acrónimo de A.synchonrado JavaScript y XML
  • AJAX es una tecnología utilizada para crear aplicaciones de interacción enriquecidas que reducen las interacciones entre el cliente y el servidor actualizando solo partes de la página web.
  • Las versiones 5 y 6 de Internet Explorer utilizan ActiveXObject para implementar operaciones AJAX.
  • Internet Explorer versión 7 y superior y navegadores Chrome, Firefox, Opera y Safari utilizan XMLHttpRequest.