Uso de Ajax en una página web
Autor: J. Luis, 6 mayo, 2021
Vamos a implementar un buscador sencillo para entender como funciona AJAX en un sitio web
QUE ES AJAX
es una técnica de desarrollo web para crear aplicaciones interactivas
COMO FUNCIONA AJAX
Se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano.
De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.
QUE TECNOLOGIAS INTERVIENEN
HTML JS PHP MYSQL
EJEMPLO PRÁCTICO
IMPLEMENTAR UN BUSCADOR DE CIUDADES SENCILLO
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EJEMPLO DE AJAX</title>
<style>
.texto{ color:red}
</style>
</head>
<body>
<input type="text" placeholder="Ingrese Ciudad a buscar:" id="txtbuscar">
<div id="resultados"></div>
<script>
document.getElementById("txtbuscar").addEventListener("keyup",(e)=>{
const data = { texto : e.target.value }
fetch("http://localhost/ajax/respuesta.php",{
method:'POST',
body: JSON.stringify(data),
headers:{
'Accept' : 'application/json',
'Content-Type' : 'application/json',
}
}).then(response => {
return response.json()
}).then(data =>{
if(data.success){
document.getElementById("resultados").innerHTML = '<p class="texto"> ID :'+ data.ciudad.id +', NOMBRE: '+ data.ciudad.nombre+' POBLACIÓN : '+ data.ciudad.poblacion +' </p>'
}else{
document.getElementById("resultados").innerHTML = '<p>'+ data.mensaje +' </p>'
}
}).catch(error =>console.error(error));
})
</script>
</body>
</html>
respuesta.php
<?php
// CONSULTAS A LA BASE DE DATOS
$data = ["success"=>false];
$_post = json_decode(file_get_contents('php://input'),true);
if(isset($_post['texto'])):
// array de ciudades
$ciudades = array(
array('id'=>1,'nombre'=>'Arequipa','poblacion'=> 15000000),
array('id'=>2,'nombre'=>'Yanahuara','poblacion'=> 120000),
array('id'=>3,'nombre'=>'Mollendo','poblacion'=> 100000)
);
$r = array_search($_post['texto'], array_column($ciudades,'nombre'),true);
if($r>-1)
$data = ["success"=>true,'ciudad'=>$ciudades[$r],'mensaje'=>"EXISTEN COINCIDENCIAS"];
else
$data = ["success"=>false,'mensaje'=>"NO EXISTEN COINCIDENCIAS"];
endif;
die(json_encode($data));
Leido 5590 veces | 1 usuarios
Código fuente no disponible.
