© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022
Cómo usar AJAX en una web
Cómo usar AJAX en una página web con Fetch
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));
No hay descargable
Redactado por: , Leido 2897 veces
© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022