Tutorial de PHP Ajax con ejemplo

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

⚡ Resumen inteligente

Ajax en PHP permite que una página web intercambie pequeñas cantidades de datos con el servidor y actualice parte de la página sin recargarla por completo. Este tutorial muestra cómo crear una búsqueda en tiempo real, explicando el enfoque clásico de XMLHttpRequest y la alternativa moderna de la API Fetch.

  • 🔄 Qué es Ajax: Ajax, asíncrono JavaMediante scripts y XML, se actualiza parte de una página intercambiando datos con el servidor sin necesidad de una recarga completa.
  • ⚡ Por qué usarlo: Ajax permite funciones avanzadas, similares a las de un ordenador de escritorio, como el autocompletado, la validación en tiempo real y los menús desplegables dependientes.
  • 🖥️ Cliente y servidor: JavaEl script se ejecuta en el navegador y llama a un script PHP, que devuelve únicamente los datos necesarios para actualizar la página.
  • 🔍 Búsqueda en vivo: Un controlador onkeyup envía cada pulsación de tecla a un script PHP que devuelve instantáneamente los nombres de los frameworks coincidentes.
  • 📜 Solicitud XMLHttp: El método clásico crea un objeto XMLHttpRequest y lee responseText cuando la solicitud se completa.
  • 🆕 Obtener API: El código moderno reemplaza XMLHttpRequest con la función fetch basada en promesas para obtener solicitudes más limpias y legibles.
  • 🤖 Asistencia de IA: Las herramientas de IA pueden convertir el código XMLHttpRequest antiguo a fetch o axios y ayudar a depurar las solicitudes Ajax que fallan.
Descubre más

PHP Ajax

¿Qué es Ajax?

AJAX significa asíncrono 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 asíncronas se inician mediante JavaScript. El propósito de AJAX es intercambiar pequeñas cantidades de datos con el servidor sin recargar la página.

JavaScript es un lenguaje de scripting del lado del cliente. Se ejecuta en el lado del cliente mediante navegadores web que admiten JavaGuión. JavaEl código de script solo funciona en navegadores que tienen JavaScript habilitado.

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

¿Por qué utilizar AJAX?

  • Permite desarrollarping Aplicaciones web interactivas y completas, al igual que las aplicaciones de escritorio.
  • La validación puede realizarse mientras el usuario completa un formulario, incluso antes de enviarlo. Esto se logra mediante la función de autocompletado. Las palabras que el usuario escribe se envían al servidor para su procesamiento, y el servidor responde con palabras clave que coinciden con lo que el usuario ingresó.
  • Se puede utilizar para rellenar un menú desplegable en función del valor de otro menú desplegable.
  • Los datos se pueden recuperar del servidor y solo se puede actualizar una parte específica de la página sin cargar la página completa. Esto es muy útil para partes de páginas web que cargan elementos como:
    • Tweets
    • Comentarios
    • Usuarios que visitan el sitio y datos similares en tiempo real.

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 donde los usuarios podrán escribir los nombres de los frameworks.

A continuación, utilizaremos AJAX para buscar una coincidencia y mostraremos el nombre completo del framework 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 JavaLa función del script muestra el nombre cada vez que se escribe una tecla en el cuadro de texto. Esta función se denomina 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Í,

  • La instrucción “if (str.length == 0)” comprueba 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 utilizan ActiveXObject para la implementación de AJAX. Otras versiones y navegadores como Chrome y Firefox Utilice XMLHttpRequest. Este código garantiza que nuestra aplicación funcione tanto en IE 5 y 6 como en navegadores modernos.
  • “xmlhttp.onreadystatechange=function…” comprueba si la interacción AJAX se ha completado y el estado es 200, y luego actualiza el span txtName con los resultados devueltos.

Paso 4) Probar nuestra aplicación PHP Ajax

Suponiendo que haya guardado el archivo index.php en phptuts/ajax, navegue hasta el URL http://localhost/phptuts/ajax/index.php

Probando nuestra aplicación PHP Ajax

Escribe la letra C en el cuadro de texto. Obtendrás 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 interactivas y completas.

AJAX moderno con la API Fetch

El objeto XMLHttpRequest mencionado anteriormente sigue funcionando, pero su rama ActiveXObject para versiones antiguas de Internet Explorer ya no es necesaria. Los navegadores modernos ofrecen la API Fetch basada en promesas, que realiza la misma solicitud con mucho menos código.

function showName(str) {
    if (str.length === 0) {
        document.getElementById("txtName").innerHTML = "";
        return;
    }
    fetch("frameworks.php?name=" + encodeURIComponent(str))
        .then(response => response.text())
        .then(text => {
            document.getElementById("txtName").innerHTML = text;
        });
}

Esta versión realiza la misma función: envía el texto introducido a frameworks.php y coloca la respuesta en el elemento span txtName. Además, utiliza encodeURIComponent para escapar la entrada de forma segura, y su cadena de promesas se puede ampliar fácilmente con manejo de errores mediante un bloque catch.

Preguntas Frecuentes

Una solicitud síncrona bloquea el navegador hasta que el servidor responde, congelando la página. Una solicitud asíncrona se ejecuta en segundo plano, por lo que la página permanece receptiva y se actualiza cuando llegan los datos. Ajax utiliza el modelo asíncrono.

Con fetch, pasa un segundo argumento que establece el método para POST y un cuerpo, luego lee $_POST en PHP. Con XMLHttpRequest, llama a open('POST', url), establece el encabezado Content-Type y envía los datos codificados.

CORS, Intercambio de recursos de origen cruzado, bloquea las solicitudes del navegador a un dominio diferente a menos que ese servidor envíe el encabezado Access-Control-Allow-Origin correcto. Agregue el encabezado en el lado de PHP o llame a un mismo origen. URL arreglarlo.

Sí. Pega el código XMLHttpRequest y la IA podrá reescribirlo usando la API fetch basada en promesas o axios, añadir manejo de errores y mantener el mismo comportamiento. Prueba el resultado, ya que el manejo de la respuesta difiere ligeramente.

Sí. Comparta el código de solicitud y el error de la consola del navegador o de la red, y la IA podrá detectar un error. URL, un bloqueo CORS, un parámetro faltante o un error del servidor, luego sugiera la solución a intentar.

Resumir este post con: