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 src="dompurify/purify.min.js"></script>

  
12
 <script type="module" src="libclienteweb/manejaErrores.js"></script>

  
13

  
14
</head>

  
15

  
16
<body>

  
17

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

  
19

  
20
 <dl id="lista">

  
21
  <dt>Cargando…</dt>

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

  
23
 </dl>

  
24

  
25
 <script type="module">

  
26

  
27
  import { consume } from "./libclienteweb/consume.js"

  
28
  import { recibeJson } from "./libclienteweb/recibeJson.js"

  
29
  import { htmlentities } from "./libclienteweb/htmlentities.js"

  
30

  
31
  descargaDatos()

  
32

  
33
  async function descargaDatos() {

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

  
35
  const json = await respuesta.json()

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

  
37
    let render = ""

  
38
    for (const modelo of json) {

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

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

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

  
42
     const nombre =

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

  
44
     const color =

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

  
46
     render += /* html */

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

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

  
49
    }

  
50
    lista.innerHTML = DOMPurify.sanitize(render)

  
51
  }

  
52

  
53
 </script>

  
54

  
55
</body>

  
56

  
57
</html>

 


 
 
 
     skip_previous
    
 
     skip_next