76- AJAX y PHP

Jorge Catalao febrero 25, 2025

AJAX y PHP trabajan juntos para crear aplicaciones web dinámicas e interactivas. PHP se utiliza en el lado del servidor para procesar solicitudes y generar respuestas, mientras que AJAX se utiliza en el lado del cliente para realizar solicitudes asíncronas y actualizar la página web sin recargarla.

¿Cómo funciona la combinación de AJAX y PHP?

  1. Solicitud AJAX: JavaScript en el navegador del usuario realiza una solicitud AJAX al servidor utilizando el objeto XMLHttpRequest.
  2. Procesamiento en el servidor PHP: El servidor recibe la solicitud y la pasa a un script PHP. El script PHP procesa la solicitud, que puede incluir consultas a una base de datos, cálculos o cualquier otra lógica necesaria.
  3. Generación de la respuesta: El script PHP genera una respuesta, que puede ser en formato XML, JSON, HTML o texto plano.
  4. Envío de la respuesta: El servidor envía la respuesta de vuelta al navegador del usuario.
  5. Manejo de la respuesta en AJAX: JavaScript recibe la respuesta y actualiza dinámicamente la página web, sin necesidad de recargarla.

Beneficios de usar AJAX con PHP:

  • Mejora de la experiencia del usuario: Las aplicaciones web se vuelven más rápidas y receptivas al evitar la recarga completa de la página.
  • Actualización parcial de la página: Solo se actualizan las partes de la página que necesitan ser modificadas, lo que reduce el tráfico de red y la carga del servidor.
  • Interacción en tiempo real: AJAX permite crear aplicaciones web que responden a las acciones del usuario en tiempo real, como formularios de autocompletado o actualizaciones de datos en vivo.
  • Mayor flexibilidad: PHP proporciona una amplia gama de funciones y bibliotecas para procesar datos y generar respuestas, lo que permite crear aplicaciones web complejas y personalizadas.

Ejemplo de uso común:

Un ejemplo común de AJAX y PHP es un formulario de búsqueda que sugiere resultados a medida que el usuario escribe. JavaScript envía una solicitud AJAX a un script PHP con el texto ingresado. El script PHP consulta una base de datos y devuelve una lista de sugerencias en formato JSON. JavaScript recibe la respuesta y actualiza dinámicamente la lista de sugerencias en la página.

Al combinar AJAX y PHP, los desarrolladores pueden crear aplicaciones web más dinámicas y eficientes que brindan una experiencia de usuario mejorada.

Este ejemplo demuestra cómo usar AJAX con PHP para obtener sugerencias de nombres en tiempo real mientras el usuario escribe en un campo de entrada. El ejemplo consta de un archivo HTML con JavaScript y un archivo PHP que procesa la solicitud y devuelve las sugerencias.

Archivo HTML (index.html):


<!DOCTYPE html>
<html>
<head>
    <title>AJAX PHP Ejemplo</title>
</head>
<body>

<p><b>Empieza a escribir un nombre en el campo de entrada:</b></p>
<form>
    Nombre: <input type="text" id="txtHint" onkeyup="showHint(this.value)">
</form>
<p>Sugerencias: <span id="txtResult"></span></p>

<script>
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtResult").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtResult").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>

</body>
</html>

Archivo PHP (gethint.php):


<?php
$a = array("Anna", "Brittany", "Cinderella", "Diana", "Eva", "Fiona", "Gunda", "Hege", "Inga", "Johanna", "Kitty", "Linda", "Nina", "Ophelia", "Petunia", "Amanda", "Raquel", "Cindy", "Doris", "Eve", "Evita", "Sunniva", "Tove", "Unni", "Violet", "Liza", "Elizabeth", "Ellen", "William", "Will");

$q = $_GET["q"];

$hint = "";

if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
        }
    }
}

echo $hint === "" ? "no suggestion" : $hint;
?>

Explicación del ejemplo:

  1. Archivo HTML (index.html):
    • Contiene un campo de entrada de texto con el ID "txtHint".
    • El evento onkeyup llama a la función JavaScript showHint() cada vez que se presiona una tecla.
    • La función showHint():
      • Verifica si el campo de entrada está vacío.
      • Crea un objeto XMLHttpRequest.
      • Define un manejador de eventos onreadystatechange para procesar la respuesta del servidor.
      • Envía una solicitud GET al archivo "gethint.php" con el valor del campo de entrada como parámetro "q".
      • Actualiza el elemento con el ID "txtResult" con la respuesta del servidor.
  2. Archivo PHP (gethint.php):
    • Define un array $a con una lista de nombres.
    • Obtiene el valor del parámetro "q" de la solicitud GET.
    • Filtra el array $a para encontrar nombres que coincidan con el valor de "q".
    • Construye una cadena $hint con las sugerencias encontradas.
    • Devuelve la cadena $hint como respuesta.

Funcionamiento:

A medida que el usuario escribe en el campo de entrada, la función showHint() envía solicitudes AJAX al archivo "gethint.php". El archivo PHP busca nombres que coincidan con el texto ingresado y devuelve las sugerencias. JavaScript recibe las sugerencias y las muestra debajo del campo de entrada.

Este ejemplo demuestra cómo AJAX y PHP pueden trabajar juntos para crear una funcionalidad de autocompletado en tiempo real.

El archivo PHP "gethint.php" es responsable de procesar las solicitudes AJAX y devolver sugerencias de nombres basadas en la entrada del usuario. Aquí se explica cómo funciona el archivo:


<?php
// Array with names
$a = array("Anna", "Brittany", "Cinderella", "Diana", "Eva", "Fiona", "Gunda", "Hege", "Inga", "Johanna", "Kitty", "Linda", "Nina", "Ophelia", "Petunia", "Amanda", "Raquel", "Cindy", "Doris", "Eve", "Evita", "Sunniva", "Tove", "Unni", "Violet", "Liza", "Elizabeth", "Ellen", "William", "Will");

// get the q parameter from URL
$q = $_REQUEST["q"];
$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
    $q = strtolower($q);
    $len = strlen($q);
    foreach ($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
        }
    }
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>

Explicación del código:

  1. Array de nombres: Se define un array $a que contiene una lista de nombres. Este array actúa como la base de datos de sugerencias.
  2. Obtención del parámetro "q": Se obtiene el valor del parámetro "q" de la URL utilizando $_REQUEST["q"]. Este parámetro contiene el texto ingresado por el usuario en el campo de entrada.
  3. Inicialización de la variable $hint: Se inicializa una variable $hint como una cadena vacía. Esta variable almacenará las sugerencias encontradas.
  4. Búsqueda de sugerencias:
    • Se verifica si el parámetro "q" no está vacío.
    • Se convierte el valor de "q" a minúsculas utilizando strtolower() para realizar una búsqueda insensible a mayúsculas y minúsculas.
    • Se obtiene la longitud del valor de "q" utilizando strlen().
    • Se recorre el array $a utilizando un bucle foreach.
    • Para cada nombre en el array, se verifica si el valor de "q" coincide con el inicio del nombre utilizando stristr() y substr().
    • Si se encuentra una coincidencia, se agrega el nombre a la variable $hint. Si ya hay sugerencias en $hint, se agrega una coma y un espacio antes de agregar el nuevo nombre.
  5. Salida de la respuesta:
    • Se verifica si la variable $hint está vacía. Si está vacía, se imprime "no suggestion".
    • Si $hint contiene sugerencias, se imprime su valor.

Funcionamiento:

El archivo "gethint.php" recibe el texto ingresado por el usuario, busca nombres que coincidan con ese texto y devuelve una lista de sugerencias. Esta lista se envía de vuelta al navegador como respuesta a la solicitud AJAX.

Este archivo demuestra cómo PHP puede procesar solicitudes AJAX y generar respuestas dinámicas basadas en la entrada del usuario.

Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias