PHP - AJAX y PHP

AJAX (JavaScript asíncrono y XML) es una tecnología utilizada para intercambiar datos con el servidor sin actualizar toda la página.

AJAX es una tecnología que permite actualizar partes de una página web sin necesidad de recargar toda la página; intercambia datos con el servidor en segundo plano y puede actualizar parte del contenido de la página.

AJAX permite que las páginas web actualicen dinámicamente parte de su contenido, ofreciendo una experiencia de usuario más rápida.

AJAX normalmente utiliza el objeto XMLHttpRequest para comunicarse con el servidor en segundo plano, aunque también puede usar métodos modernos como fetch API.

Para más contenido, puedes consultar:Tutorial de AJAX

Cómo funciona AJAX

  • Enviar solicitud: El usuario activa una solicitud AJAX de alguna manera (por ejemplo, haciendo clic en un botón).
  • Crear solicitud: JavaScript crea un objeto XMLHttpRequest para comunicarse con el servidor.
  • Enviar solicitud: Enviar la solicitud al servidor mediante el objeto XMLHttpRequest.
  • Procesamiento en el servidor: Después de recibir la solicitud, el servidor procesa los datos.
  • Devolver respuesta: El servidor devuelve el resultado del procesamiento al cliente.
  • Actualizar página: Después de recibir la respuesta del servidor, JavaScript actualiza la parte correspondiente de la página web.

Pasos para usar AJAX en PHP

1. Frontend:JavaScript inicia la solicitud AJAX.

Usa XMLHttpRequest o fetch para enviar la solicitud al servidor PHP.

2. Backend:PHP recibe y procesa la solicitud.

PHP obtiene los datos de la solicitud AJAX y devuelve el resultado.

3. Frontend:Procesar los datos devueltos por PHP.

Usar JavaScript para analizar y mostrar los datos de respuesta recibidos de PHP.

Usar AJAX en PHP

1. Crear HTML y JavaScript: Primero, necesitas una página HTML y código JavaScript para enviar la solicitud AJAX.

Ejemplo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
    <script>
        function sendRequest() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                   document.getElementById("result").innerHTML = xhr.responseText;
                }
            };
            xhr.open("GET", "your_php_file.php?param=value", true);
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="sendRequest()">Send AJAX Request</button>
    <div id="result"></div>
</body>
</html>

2. Escribir el script PHP:En el lado del servidor, necesitas un archivo PHP para procesar la solicitud y devolver datos.

Ejemplo

<?php
if (isset($_GET['param'])) {
    // Procesar parámetros de la solicitud
    $param = $_GET['param'];
    // Realizar algunas operaciones...
    // Devolver respuesta
    echo "Received parameter: " . $param;
}
?>

3. Enviar solicitud:Cuando el usuario hace clic en el botón, se llama a la función de JavaScript sendRequest, que crea un objeto XMLHttpRequest y envía la solicitud al servidor.

4. Procesar la respuesta:Después de que el servidor procesa la solicitud, devuelve el resultado al cliente. El código JavaScript del cliente verifica el estado de la respuesta y, cuando el estado es 200 (es decir, solicitud exitosa), actualiza el contenido de la página.

Ejemplo de AJAX y PHP

El siguiente ejemplo demostrará cómo la página web se comunica con el servidor web cuando el usuario escribe caracteres en el campo de entrada:

Ejemplo

Intenta escribir un nombre en el campo de entrada, por ejemplo: Anna:

Nombre:

Valor devuelto:



Explicación del ejemplo - Página HTML

Cuando el usuario escribe caracteres en el campo de entrada anterior, se ejecuta la función 'showHint()'. Esta función se activa mediante el evento 'onkeyup':

Ejemplo

<html>
<head>
<script>
function showHint(str)
{
        if (str.length==0)
        {
                document.getElementById("txtHint").innerHTML="";
                return;
        }
        if (window.XMLHttpRequest)
        {
// Código ejecutado por los navegadores IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
        }
        else
        {      
// Código ejecutado por los navegadores IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
        }
        xmlhttp.open("GET","gethint.php?q="+str,true);
        xmlhttp.send();
}
</script>
</head>
<body>

<p><b>Escribe un nombre en el campo de entrada:</b></p>
<form>
Nombre:<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Valor devuelto:<span id="txtHint"></span></p>

</body>
</html>

Explicación del código fuente:

Si el campo de entrada está vacío (str.length==0), la función limpia el contenido del marcador de posición txtHint y sale de la función.

Si el campo de entrada no está vacío, showHint() ejecutará los siguientes pasos:

  • Crear un objeto XMLHttpRequest
  • Crear la función que se ejecutará cuando la respuesta del servidor esté lista
  • Enviar solicitud al archivo en el servidor
  • Observa el parámetro (q) añadido al final de la URL (contiene el contenido del campo de entrada).

La página del servidor llamada mediante JavaScript anteriormente es un archivo PHP llamado 'gethint.php'.

El código fuente en 'gethint.php' verifica la matriz de nombres y luego devuelve el nombre correspondiente al navegador:

Ejemplo

<?php
// Llenar la matriz con nombres
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

// Obtener el parámetro q desde la URL de la solicitud
$q=$_GET["q"];

// Buscar si hay valores coincidentes, si q>0
if (strlen($q) > 0)
{
        $hint="";
        for($i=0; $i<count($a); $i++)
        {
                if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
                {
                        if ($hint=="")
                        {
                                $hint=$a[$i];
                        }
                        else
                        {
                                $hint=$hint." , ".$a[$i];
                        }
                }
        }
}

// Si no hay valores coincidentes, establecer la salida como 'no suggestion'
if ($hint == "")
{
        $response="no suggestion";
}
else
{
        $response=$hint;
}

// Enviar el valor de retorno
echo $response;
?>

Explicación: si JavaScript ha enviado algún texto (es decir, strlen($q) > 0), ocurre lo siguiente:

  1. Buscar nombres que coincidan con los caracteres enviados por JavaScript
  2. Si no se encuentra ninguna coincidencia, la cadena de respuesta se establece como 'no suggestion'
  3. Si se encuentra uno o más nombres coincidentes, la cadena de respuesta se establece con todos los nombres
  4. Enviar la respuesta al marcador de posición 'txtHint'

Implementar AJAX usando fetch y PHP

HTML + JavaScript:

Ejemplo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX with PHP Example</title>
</head>
<body>

<h1>AJAX Example</h1>
<button id="ajaxButton">Get Data from PHP</button>
<div id="result"></div>

<script>
    document.getElementById('ajaxButton').addEventListener('click', function() {
// Enviar solicitud AJAX
        fetch('server.php', {
method: 'POST', // Usar solicitud POST
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ message: "Hello from client" })
        })
.then(response => response.json()) // Parsear como JSON
        .then(data => {
document.getElementById('result').innerHTML = data.response; // Actualizar la página
        })
        .catch(error => console.error('Error:', error));
    });
</script>

</body>
</html>

Servidor PHP (server.php):

Ejemplo

<?php
// Configurar el encabezado de respuesta para admitir JSON
header('Content-Type: application/json');

// Obtener los datos de entrada de la solicitud AJAX
$request = json_decode(file_get_contents("php://input"), true);

// Procesar los datos y devolver la respuesta
if ($request['message'] === "Hello from client") {
    $response = array('response' => 'Hello from PHP server!');
} else {
    $response = array('response' => 'Invalid message');
}

// Devolver el resultado al cliente
echo json_encode($response);
?>

Explicación:

  1. Frontend: Cuando el usuario hace clic en el botón, JavaScript usafetch()para enviar una solicitud POST aserver.php, y envía datos JSON.
  2. Backend: El servidor PHP lee la solicitud enviada por el cliente, la procesa y devuelve una respuesta JSON.
  3. Procesamiento de la respuesta: Después de recibir la respuesta del servidor PHP, JavaScript actualiza el contenido de la página.

Solución al problema de dominios cruzados en PHP AJAX

Si tu solicitud asíncrona necesita ser entre dominios, puedes consultar:Solución al problema de dominios cruzados en PHP AJAX。

Otras extensiones