L8: Práctica 3_2 - myTeachingURJC/2018-19-LTAW GitHub Wiki

Sesión Laboratorio 8: Práctica 3-2

  • Tiempo: 2h
  • Fecha: Lunes, 18-Marzo-2019
  • Objetivos de la sesión:
    • Aprender a hacer peticiones ligeras con AJAX en JSON
    • Continuar con la práctica 3

Contenido

Actividades guiadas

Actividades guiadas por el profesor. Haremos lo siguiente:

Peticiones AJAX

AJAX es una técnica de desarrollo web mediante la cual hacemos que nuestros programas javascript del cliente realicen peticiones de datos al servidor web

Así, el servidor web deberá atender a dos tipos de peticiones:

  • Las peticiones del usuario, que serán páginas html, imágenes, etc.
  • Las peticiones de la aplicación: serán datos (JSON)

El protocolo usado en ambos casos es HTTP

Los datos se devuelven con estructura, y se usan formatos como XML o JSON. Originalmente AJAX estaba diseñado para trabajar con XML, sin embargo, actualmente se maneja con JSON. Es lo que haremos nosotros

La única diferencia entre las peticiones de usuario y de datos es que en las segundas se devuelve un fichero JSON, mientras que en las primeras será un HTML o algo que el usuario pueda entender

Ejemplo 1: Servidor-json

Como ejemplo, haremos un servidor que tiene dos puntos de acceso: / (Página principal, para humanos) y /myquery (datos). La parte de los datos se hace exactamente igual que fuese un archivo HTML. Lo único que tenemos que hacer es generar una cadena (o leerla de un fichero) con los datos en formato JSON y asignar a la cabecera Content-Type el valor application/json

var http = require('http');
var url = require('url');

const PORT = 8080

console.log("Arrancando servidor en puerto " + PORT)

//-- Configurar y lanzar el servidor. Por cada peticion recibida
//-- se imprime un mensaje en la consola
http.createServer((req, res) => {

  //-- Mostrar en la consola el recurso al que se accede
  var q = url.parse(req.url, true);
  console.log("Petición: " + q.pathname)

  //-- Segun el recurso al que se accede
  switch (q.pathname) {

    //-- Pagina principal
    case "/":
      content = `
      <!DOCTYPE html>
      <html lang="en" dir="ltr">
        <head>
          <meta charset="utf-8">
          <title>JSON Test</title>
        </head>
        <body>
          <p>Prueba de acceso a fichero JSON</p>
          <p>Accede al recurso <a href="myquery">/myquery</a> para
          recibir un objeto JSON con información</p>
        </body>
      </html>`

      res.statusCode = 200;
      break;

    //-- Acceso al recurso JSON
    case "/myquery":

      //-- Contenido en formato JSON
      //-- Es lo que se va a devolver en la petición
      content = `
      {
        "productos": ["FPGA", "RISC-V", "74ls00"]
      }
      `
      //-- Generar el mensaje de respuesta
      //-- IMPORTANTE! Hay que indicar que se trata de un objeto JSON
      //-- en la cabecera Content-Type
      res.setHeader('Content-Type', 'application/json')
      res.write(content);
      res.end();
      return
      break

    //-- Se intenta acceder a un recurso que no existe
    default:
      content = "Error";
      res.statusCode = 404;
  }

  //-- Generar el mensaje de respuesta
  res.setHeader('Content-Type', 'text/html')
  res.write(content);
  res.end();

}).listen(PORT);

La página pricipal es un HTML generado al vuelo, con información para humanos, y que incluye un enlace al recurso /myquery para probarlo. Lanzamos el servidor:

$ node server-json-1.js 
Arrancando servidor en puerto 8080

Desde el navegador accedemos a la página principal

El servidor nos devuelve la página HTML para humanos. Ahora accedemos al recurso /myquery para obtener los datos. Esta petición en realidad la reliza el cliente en javascript, pero vamos a realizarla nosotros a mano para comprobar que se recibe el fichero JSON con los datos

El Firefox por defecto cuando recibe un fichero JSON cambia la vista y nos permite visualizarlo para distinguir mejor su estructura. Si pinchamos en el botón de SAVE se nos grabará una copia local del JSON

En esta animación lo vemos en funcionamiento. En la consola en la parte inferior podemos ver las trazas del servidor

Ejemplo 2: Mi primera petición AJAX

Para probar nuestra primera petición AJAX necesitamos que se ejecute un cliente javascript en el navegador. Este cliente se llama desde la página HTML principal. Por ello, lo primero es tener un servidor capaz de atender la petición de 3 recursos al menos: la página principal HTML (al acceder al recurso /), el fichero javascript (que lo pide automáticamente el navegador al leer el HTML) y finalmente los datos JSON (recurso /myquery), que los pide la aplicación cliente

El servidor: servidor-json2

Este es el servidor de prueba. Es muy básico y limitado, sólo lo usaremos para hacer esta prueba y comprobar las peticiones AJAX. Implementa el acceso a los siguientes recursos:

  • Página principal: fichero index.html
  • Programa cliente: client-2.js
  • Recurso /myquery: devuelve los datos en JSON
var http = require('http');
var url = require('url');
var fs = require('fs');

const PORT = 8080

console.log("Arrancando servidor en puerto " + PORT)

//-- Configurar y lanzar el servidor. Por cada peticion recibida
//-- se imprime un mensaje en la consola
http.createServer((req, res) => {

  //-- Mostrar en la consola el recurso al que se accede
  var q = url.parse(req.url, true);
  console.log("Petición: " + q.pathname)

  //-- Segun el recurso al que se accede
  switch (q.pathname) {

    //-- Pagina principal
    case "/":
      fs.readFile("./index.html", function(err, data) {
        //-- Generar el mensaje de respuesta
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(data);
        res.end();
        return
      });
      break;

    //-- Fichero js cliente
    case "/client-2.js":
      fs.readFile("./client-2.js", function(err, data) {
        //-- Generar el mensaje de respuesta
        res.writeHead(200, {'Content-Type': 'application/javascript'});
        res.write(data);
        res.end();
        return
      });
      break;

    //-- Acceso al recurso JSON
    case "/myquery":

      //-- Contenido en formato JSON
      //-- Es lo que se va a devolver en la petición
      content = `
      {
        "productos": ["FPGA", "RISC-V", "74ls00"]
      }
      `
      //-- Generar el mensaje de respuesta
      //-- IMPORTANTE! Hay que indicar que se trata de un objeto JSON
      //-- en la cabecera Content-Type
      res.setHeader('Content-Type', 'application/json')
      res.write(content);
      res.end();
      return
      break

    //-- Se intenta acceder a un recurso que no existe
    default:
      content = "Error";
      res.statusCode = 404;
      //-- Generar el mensaje de respuesta
      res.setHeader('Content-Type', 'text/html')
      res.write(content);
      res.end();
  }

}).listen(PORT);

Fichero HTML: index.html

El fichero HTML principal carga el cliente javascript (client-2.js). Cuando se ha terminado de cargar la página completa, se llama a la función main() de client-2.js

Se incluye un botón identificado como "ver" y un párrafo vacio para mostrar el resultado de la petición AJAX, identificado como *"resultado"

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>AJAX test</title>
    <script src="client-2.js"></script>
  </head>
  <body onload="main();">
    <p>Bienvenido a mi tienda</p>
    <p>Prueba de petición AJAX</p>
    <input type="button" id="ver" value="Ver productos"/>
    <p id="resultado"></p>
  </body>
</html>

Cliente javascript: client-2.js

Este es el cliente que corre en el navegador. Una vez que se ha cargado la página, se invoca a la función main(). Lo primero que se hace es imprimir la traza "Hola" en la consola para comprobar que está funcionando bien

Cuando se aprieta el botón de VER se lanza la petición AJAX para obtener el objeto JSON con los productos. Se recorren todos los productos recibidos y se añaden al párrafo identificado como "resultado", por lo que nos aparecen renderizados en la pantalla del navegador

function main()
{
  //-- Traza de prueba
  console.log("Hola!")

  //-- Obtener el botón de VER del DOM
  var ver = document.getElementById('ver')

  //-- Obtener el párrafo del DOM donde mostrar el resultado
  var resultado = document.getElementById('resultado');

  //-- Cuando el usuario aprieta el botón de ver los productos
  ver.onclick = ()=>{

    //-- Crear objeto para hacer peticiones AJAX
    m = new XMLHttpRequest();

    //-- Configurar la petición
    m.open("GET","http://localhost:8080/myquery", true);

    //-- Cuando la haya alguna noticia sobre la peticion
    //-- ejecuta este código
    m.onreadystatechange=function(){
       //-- Petición enviada y recibida. Todo OK!
       if (m.readyState==4 && m.status==200){

         //-- La respuesta es un objeto JSON
         var o = JSON.parse(m.responseText)

         //-- Borrar el resultado anterior que hubiese en el párrafo
         //-- de resultado
         resultado.innerHTML = "";

         //--Recorrer los productos del objeto JSON
         for (i=0; i < o.productos.length; i++) {

           //-- Añadir cada producto al párrafo de visualización
           resultado.innerHTML += o.productos[i];

           //-- Separamos los productos por ',''
           if (i<o.productos.length-1) {
             resultado.innerHTML += ', ';
           }
         }
       }
     }

     //-- Enviar la petición!
     m.send();
  }

}

Probándolo todo

Primer arrancamos el servidor:

$ node server-json-2.js 
Arrancando servidor en puerto 8080

Ahora desde el navegador nos conectamos a la página principal

Si abrimos la consola de javascript podremos ver la traza "Hola" y comprobar que nuestro cliente javascript se está ejecutando. Ahora apretamos el botón de Ver productos y nos aparece la información en la parte inferior

En esta animación se muestra el proceso

¡Hemos hecho nuestra primera petición AJAX!

Ejemplo 3: Petición AJAX con parámetros

Por último nos queda por aprender cómo hacer una petición AJAX pasando parámetros. Es muy fácil. En el cliente sólo hay que añadir los parámetros en la URL de la petición. Por ejemplo:

//-- Configurar la petición
    m.open("GET","http://localhost:8080/myquery?param1=hola&param2=wei", true);

Estamos pasando los parámetros param1 y param2, con los valores hola y wei respectivamente

En el servidor, al atender al recurso /myquery podemos obtener los parámetros así:

  //-- Acceso al recurso JSON
    case "/myquery":

      //-- Leer los parámetros recibidos en la peticion
      var params = q.query;

      //-- No hacemos nada con ellos, simplemente los mostramos en
      //-- la consola
      console.log("Parametros: " +params.param1 + ' y ' + params.param2);

En este servidor NO hacemos nada con los parámetros, simplemente los mostramos en la consola

Al probar el nuevo servidor obtendremos esto:

En la consola nos aparecerá:

Petición: /myquery
Parametros: hola y wei

Actividades NO guiadas

  • Continuar con la práctica 3. Esta es la última semana dedicada a la práctica 3

Autores

Licencia

Enlaces

⚠️ **GitHub.com Fallback** ⚠️