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:
Ver original<form id="buscador" action="clientes.php" method="get"> <input type="text" name="nombreCli" /> <input type="submit" value="Buscar" />
Código Javascript
:
Ver originalvar 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);
Código PHP:
Ver original$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.
