Tutorial PHP Ajax con ejemplo

¿Qué es Ajax?

La forma completa de AJAX es JavaScript y XML asíncronos. 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 toda la página. Las interacciones asincrónicas son iniciadas por 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 por los navegadores web que admiten JavaScript. El código JavaScript solo funciona en navegadores que tienen JavaScript habilitado.

XML es el acrónimo de Extensible Markup Language. Se utiliza para codificar mensajes en formatos legibles tanto por humanos como por máquinas. Es como HTML pero le permite crear sus etiquetas personalizadas. Para obtener más detalles sobre XML, consulte el artículo sobre XML

¿Por qué utilizar AJAX?

  • Permite desarrollar ricas aplicaciones web interactivas como 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 escribe el usuario 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 cuadro desplegable según el valor de otro cuadro desplegable
  • Los datos se pueden recuperar del servidor y solo una cierta parte de una página se puede actualizar sin cargar la página completa. Esto es muy útil para elementos de páginas web que cargan cosas como
    • Tweets
    • Commens
    • Los usuarios que visitan el sitio, etc.

Cómo crear una aplicación PHP Ajax

Crearemos una aplicación simple que permita a los usuarios buscar frameworks PHP MVC populares.

Nuestra aplicación tendrá un cuadro de texto en el que los usuarios ingresará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

PHP MVC Frameworks - Search Engine

PHP MVC Frameworks - Search Engine


Type the first letter of the PHP MVC Framework








Matches:

AQUÍ,

  • “Onkeyup =" showName (this.value) "” ejecuta la función de JavaScript showName cada vez que se escribe una clave en el cuadro de texto.

    Esta función se llama autocompletar

Paso 2) Creando la 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;?>

Paso 3) Creando el 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();}

AQUÍ,

  • “If (str.length == 0)” compruebe la longitud de la cadena. Si es 0, el resto del script no se ejecuta.
  • “If (window.XMLHttpRequest)…” Las versiones 5 y 6 de Internet Explorer usan ActiveXObject para la implementación de AJAX. Otras versiones y navegadores como Chrome, FireFox usan XMLHttpRequest. Este código asegurará que nuestra aplicación funcione tanto en IE 5 y 6 como en otras versiones altas 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 ha guardado el archivo index.php en phututs / ajax, busque la URL http: //localhost/phptuts/ajax/index.php

Escriba la letra C en el cuadro de texto. Obtendrá los siguientes resultados.

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 and XML
  • AJAX es una tecnología utilizada para crear aplicaciones de interacción enriquecidas que reducen las interacciones entre el cliente y el servidor al actualizar 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 los navegadores Chrome, Firefox, Opera y Safari utilizan XMLHttpRequest.

Articulos interesantes...