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
— index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> http-equiv="X-UA-Compatible" content="ie=edge"> |
— datos.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
[ { "nombre": "Fernando", "apellido": "ureña", "profesion": "Programador" }, { "nombre": "Ricardo", "apellido": "Merbas", "profesion": "Experto en Angular" }, { "nombre": "Pepe", "apellido": "Alcazar", "profesion": "Comerciante" } ] |
— main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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
— index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> http-equiv="X-UA-Compatible" content="ie=edge"> |
— main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 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
— index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> http-equiv="X-UA-Compatible" content="ie=edge"> list="names" name="name" id="name" onkeyup="buscarPersonas()" /> |
— main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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.
codigo de eventos de teclado en java para mover un balon