F. index.html

1
<!DOCTYPE html>
2
<html lang="es">
3

  
4
<head>

  
5

  
6
 <meta charset="UTF-8">

  
7
 <meta name="viewport" content="width=device-width">

  
8

  
9
 <title>Render en el cliente</title>

  
10

  
11
 <script type="module" src="js/lib/manejaErrores.js"></script>

  
12

  
13
</head>

  
14

  
15
<body>

  
16

  
17
 <h1>Render en el cliente</h1>

  
18

  
19
 <dl id="lista">

  
20
  <dt>Cargando…</dt>

  
21
  <dd><progress max="100">Cargando…</progress></dd>

  
22
 </dl>

  
23

  
24
 <script type="module">

  
25

  
26
  import { consume } from "./js/lib/consume.js"

  
27
  import { recibeJson } from "./js/lib/recibeJson.js"

  
28
  import { htmlentities } from "./js/lib/htmlentities.js"

  
29

  
30
  descargaDatos()

  
31

  
32
  async function descargaDatos() {

  
33
  const respuesta = await consume(recibeJson("php/lista.php"))

  
34
  const json = await respuesta.json()

  
35
    // Genera el código HTML de la lista.

  
36
    let render = ""

  
37
    for (const modelo of json) {

  
38
     /* Codifica nombre y color para que cambie los caracteres especiales y

  
39
      * el texto no se pueda interpretar como HTML. Esta técnica evita la

  
40
      * inyección de código. */

  
41
     const nombre =

  
42
      typeof modelo.nombre === "string" ? htmlentities(modelo.nombre) : ""

  
43
     const color =

  
44
      typeof modelo.color === "string" ? htmlentities(modelo.color) : ""

  
45
     render += /* html */

  
46
      `<dt>${nombre}</dt>

  
47
       <dd>${color}</dd>`

  
48
    }

  
49
    lista.innerHTML = render

  
50
  }

  
51

  
52
 </script>

  
53

  
54
</body>

  
55

  
56
</html>

 


 
 
 
     skip_previous
    
 
     skip_next