Saltar la navegación

Ejemplo: Leer fichero con AJAX

El objetivo de este ejercicio es aplicar AJAX para leer el contenido de un fichero en formato json ( fichero.json ). La idea es utilizar JS, específicamente la tecnología AJAX para leer el fichero.json.

Instrucciones:

  1. Crea un directorio para el proyecto en cualquier parte de tu computador.
  2. En el directorio, crea el fichero.json (puedes cortar y pegar el código mostrado)
  3. En el directorio, crea el fichero ejercicio.html (corta y pega el contenido de ejercicio.html mostrado a continuación)
  4. Despliega ejercicio.html en un navegador y visualiza el comportamiento.
  5. Analiza principalmente cómo se han aplicado los 4 pasos indicados en la sección anterior.

fichero.json

{
    "list":[
      {"item":"Gestión de auditoría"},
      {"item":"Gestión de menús"},
      {"item":"Gestión de pedidos"},
      {"item":"Gestión de contratos"},
      {"item":"Gestion de logistica"},
      {"item":"Administración"},
      {"item":"Gestión de recursos humanos"},
      {"item":"Gestión de compras"},
      {"item":"Gestión mayorista"},
      {"item":"Gestion de seguridad"},
      {"item":"Administración de cuentas"},
      {"item":"Gestión financiera"},
      {"item":"Otra gestión"}
    ]
  }



ejercicio.html

<!DOCTYPE html>
<html lang="en">

<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>Obtención de JSON con AJAX</title>
</head>

<body>
    <h1>Contenido JSON obtenido</h1>
    <div id="datos"></div>

    <button onclick="obtenerDatos();">Obtener Datos</button>
    <script>
        function obtenerDatos() {
			//PASO 1: Crear el objeto XMLHttpRequest
            var htr = new XMLHttpRequest();

			//PASO 2: Asignar la función que responde al evento

            htr.onreadystatechange = function(){
                if (this.readyState == 4 && this.status == 200) {
                    console.log(this.response);
                     
                     var elementoUL = document.createElement("ul");

                     this.response.list.forEach(element => {
                        var elementoLI = document.createElement("li");
                        var texto = document.createTextNode(element.item) ;
                        elementoLI.appendChild(texto);
                        elementoUL.appendChild(elementoLI);
                     });

                     document.getElementById("datos").appendChild(elementoUL);
                }
            }
//PASO 3: Configurar la solicitud
            htr.open("GET", "ficheroJSON.json", true);
            htr.responseType = "json";
//PASO 4: Enviar la solicitud

            htr.send();
        }

    </script>
</body>

</html>