Inicio » Blog » Javascript

6 mayo, 2021

Uso de Ajax en una página web

Vamos a implementar un buscador sencillo para entender como funciona AJAX en un sitio web

Suscríbete a nuestro canal en Youtube

Suscríbirse

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 4043 veces

Compartir link del tutorial con tus amigos


Aprende más sobre Javascript

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023