Hola a todos, hoy os dejo una serie de ejercicios de AJAX de Javascript para practicar todo aquello que hemos explicado en anteriores posts.
Todos los ejercicios que proponemos están resueltos en este mismo post, intenta hacerlo por ti mismo y si te quedas atascado puedes mirar la solución. Recuerda, que no tiene por que estar igual tu solución con la del post, el objetivo es que aprendas no que me copies la solución.
Si tienes alguna duda, recuerda que puedes consultarnos escribiendo un comentario en este post o enviándonos un e-mail a administrador@discoduroderoer.es
1. Crea una llamada AJAX para recoger el contenido de un fichero JSON.
| Spoiler Inside | SelectShow |
|---|---|
— index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="main.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
— datos.json
[
{
"nombre": "Fernando",
"apellido": "ureña",
"profesion": "Programador"
},
{
"nombre": "Ricardo",
"apellido": "Merbas",
"profesion": "Experto en Angular"
},
{
"nombre": "Pepe",
"apellido": "Alcazar",
"profesion": "Comerciante"
}
]
— main.js
function cargarJSON() {
// Creo el objeto que hara la llamada
let llamada = new XMLHttpRequest();
// Ruta de donde esta el fichero
let url = "datos.json";
// Indico que debo hacer cuando reciba una respuesta
llamada.onreadystatechange = function () {
// Si todo esta bien
if (this.readyState == 4 && this.status == 200) {
// Parseo la informacion y la muestro
console.log("Recibida la informacion del fichero");
let datos = JSON.parse(this.responseText);
console.log(datos);
}
}
console.log("Se envia la peticion");
// Abro la llamada o peticion
llamada.open("GET", url, true);
// lanzo la peticion
llamada.send();
}
window.onload = cargarJSON;
| |
2. Crea una llamada POST que cree un fichero JSON con un objeto que le pasemos.
| Spoiler Inside | SelectShow |
|---|---|
— index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="main.js"></script>
<title>Ejercicio AJAX 2</title>
</head>
<body>
</body>
</html>
— main.js
function enviarPersona() {
// creo el objeto que realizara la llamada
let llamada = new XMLHttpRequest();
// url del php a llamar
let url = "guardarPersona.php";
// Creo la persona que voy a insertar
let persona = {
"nombre": "Pepe",
"apellido": "Alcazar",
"profesion": "Comerciante"
};
// Indico los parametros que voy a mandar
let params = "persona=" + JSON.stringify(persona);
// Funcion que se ejecutara al recibir la respuesta
llamada.onreadystatechange = function () {
// si todo esta bien
if (this.readyState === 4 && this.status === 200) {
let personaRecibida = JSON.parse(this.responseText);
console.log("Se ha insertado correctamente: " , personaRecibida);
}
}
// Indico que es una peticion POST
llamada.open("POST", url, true);
// Esta linea es necesaria en una peticion POST
llamada.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
llamada.send(params); // Le paso los parametros
}
window.onload = enviarPersona;
— guardaPersona.php
<?php
// Decodifico el parametro persona que me envian
$data = json_decode($_POST['persona']);
// Fichero donde voy a crear las personas
$fichero = "personas.json";
// Abro el fichero en modo lectura
$fd = fopen($fichero,"w");
// Escribo el objeto codificado
fputs($fd,json_encode($data));
// cierro el fichero
fclose($fd);
// Vuelvo a mandar a la persona en la respuesta
echo json_encode($data);
?>
| |
3. Autocompletador de nombres con PHP y AJAX
| Spoiler Inside | SelectShow |
|---|---|
— index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="main.js"></script>
<title>Ejercicio AJAX 3</title>
</head>
<body>
<label for="name">Escribe un nombre:</label>
<input list="names" name="name" id="name" onkeyup="buscarPersonas()" />
<datalist id="names">
</datalist>
</body>
</html>
— main.js
function buscarPersonas() {
let busqueda = document.getElementById("name").value;
if (busqueda.length >= 3) {
// creo el objeto que realizara la llamada
let llamada = new XMLHttpRequest();
// url del php a llamar
let url = "filtrar-nombres.php";
// Indico los parametros que voy a mandar
let params = "busqueda=" + busqueda;
// Funcion que se ejecutara al recibir la respuesta
llamada.onreadystatechange = function () {
// si todo esta bien
if (this.readyState === 4 && this.status === 200) {
let nombres = JSON.parse(this.responseText);
let datalist = document.getElementById("names");
datalist.innerHTML = "";
for (let nombre of nombres) {
let option = document.createElement('option');
let text = document.createTextNode(nombre);
option.appendChild(text);
datalist.appendChild(option);
}
}
}
// Indico que es una peticion POST
llamada.open("POST", url, true);
// Esta linea es necesaria en una peticion POST
llamada.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
llamada.send(params); // Le paso los parametros
} else {
let datalist = document.getElementById("names");
datalist.innerHTML = "";
}
}
— conexion.php
<?php
define("HOST_DB", "localhost");
define("USER_DB", "root");
define("PASS_DB", "");
define("NAME_DB", "nombres");
$conexion = new mysqli(
constant("HOST_DB"),
constant("USER_DB"),
constant("PASS_DB"),
constant("NAME_DB")
);
?>
— filtrar-nombres.php
<?php
require 'conexion.php';
$busqueda = strtolower(str_replace("'", "", $_POST['busqueda']));
$resultado = mysqli_query($conexion, "select * from nombres where lower(nombre) LIKE '%" . $busqueda . "%'");
$data = array();
while ($fila = mysqli_fetch_assoc($resultado)) {
array_push($data, $fila['nombre']);
}
echo json_encode($data);
— nombre.sql
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";
CREATE TABLE `nombres` (
`nombre` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `nombres` (`nombre`) VALUES
('Fernando'),
('Manuel'),
('Victor'),
('Marta'),
('MAr'),
('Federico'),
('Francisco'),
('Vicente'),
('Manuela'),
('Pepe'),
('Jose'),
('Jose MAria');
COMMIT;
| |
Espero que os sea de ayuda. Si tenéis udas, preguntad. Estamos para ayudarte.
