Recibir parámetro en la misma página

[Alexis88]

No es nada complicado. Solo tienes que utilizar una instancia del objeto XMLHttpRequest y sus métodos para hacer la petición asíncrona, recibir la respuesta y procesarla.

Un ejemplo:

Archivo 1:

Código HTML:

<form id="buscador" action="clientes.php" method="get">
    <label>Ingrese el nombre del cliente:</label>
    <input type="text" name="nombreCli" />
    <input type="submit" value="Buscar" />
</form>
 
<section id="clientes"></section>
 

Código Javascript:

var formulario = document.querySelector("#buscador"), //El formulario
    input = document.querySelector("[name=nombreCli]"), //La caja de texto
    listado = document.querySelector("#clientes"); //La sección para mostrar los resultados
 
formulario.addEventListener("submit", function(event){
    event.preventDefault(); //Cancelamos el envío
 
    var ajax = new XMLHttpRequest(), //Creamos una instancia del objeto XMLHttpRequest
        metodo = this.method, //El método HTTP de envío será el establecido en el formulario
        ruta = this.action + "?nombre=" + input.value, //El destino será el establecido en el formulario y se adjuntará una cadena de consulta con el valor escrito en la caja de texto
        asincrono = true; //La petición será asíncrona
 
    ajax.open(metodo, ruta, asincrono); //Establecemos los parámetros para iniciar la petición
    ajax.addEventListener("load", function(){ //Ejecutamos acciones cuando se complete la petición
        if (this.status == 200){ //Si la petición se completó exitosamente
            listado.innerHTML = this.responseText; //Se muestra el resultado en la sección
        }
    }, false);
    ajax.send(); //Se inicia la petición
}, false);
 

Archivo 2 (clientes.php):

Código PHP:

$conexion = new mysqli('server', 'user', 'password', 'database');
 
if ($conexion->connect_errno) exit($conexion->connect_errno . ': ' . $conexion->connect_error);
$nombre = $conexion->real_escape_string(strip_tags(trim($_GET['nombre'])));
$consulta = "SELECT cli_nombre, cli_documento, cli_domicilio FROM tbl_clientes WHERE cli_nombre LIKE '%$nombre%'";
$resultados = $conexion->query($query) or exit($conexion->errno . ': ' . $conexion->error);
 
if ($resultados->num_rows){
    while ($filas = $resultados->fetch_assoc()){
        echo <<<FdW
            <ul>
                <li>Nombre: {$filas['cli_nombre']}</li>
                <li>N° de documento: {$filas['cli_documento']}</li>
                <li>Domicilio: {$filas['cli_domicilio']}</li>
            </ul>
FdW;
    }
    $resultados->free();
}
else{
    echo 'No se encontraron coincidencias en la búsqueda';
}
 
$conexion->close();
 

En el primer archivo, tenemos un formulario con el cual se puede buscar uno o varios datos de clientes ―almacenados en una base de datos― cuyo nombre coincida o su estructura sea similar al que el usuario haya escrito en la caja de texto del formulario de búsqueda. Al momento de lanzar la búsqueda, se cancela el envío normal ―que implica recargar la ventana― y se realizan las acciones para iniciar la petición asíncrona. Una vez que se obtiene una respuesta, esta se muestra en un elemento HTML; en este caso, un elemento <section>.

En el segundo archivo, se realiza la conexión a la base de datos, se realiza la búsqueda y, si se encuentran coincidencias, se imprimen. Dicha impresión de datos será la respuesta que se devolverá al primer archivo.

Este es un ejemplo de una petición asíncrona básica utilizando un método de envío HTTP constructor, como lo es GET. Con otros métodos, como POST, DELETE o PUT, es necesario modificar las cabeceras, además de que, los datos a enviar, se colocan como argumento del método .send(), alineados en una cadena de consulta.