Tutorial de PHP Ajax con ejemplo

Por: fiona marrón fiona marrón
Hours Actualizado

¿Qué es Ajax?

AJAX La forma completa es asincrónica JavaScript & XML. Es una tecnología que reduce las interacciones entre el servidor y el cliente. Lo hace actualizando solo una parte de una página web en lugar de la página completa. Las interacciones asincrónicas se inician mediante JavaScript.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. Se ejecuta en el lado del cliente mediante los navegadores web que admiten JavaGuión.JavaEl código de script 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 tanto para humanos como para máquinas. Es como HTML, pero te permite crear tus propias etiquetas personalizadas. Para obtener más detalles sobre XML, consulta 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 rellenar un cuadro desplegable en función del valor de otro cuadro desplegable.
  • 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 cuadro de texto en el 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 el JavaFunción de script que muestra el nombre cada vez que se escribe una tecla en el cuadro de texto. 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;

?>

ARTÍCULOS RELACIONADOS

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

Escriba la letra C en el cuadro de texto. Obtendrá los siguientes 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 Asynchronous 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, Operay Safari utilizan XMLHttpRequest.

Resumir este post con: