5.2.5 - Parser in JavaScript, AJAX e Frameworks JavaScript

Obiettivi della lezione:

Comprendere il concetto di parsing in JavaScript. Gli studenti impareranno come utilizzare i parser per analizzare e manipolare dati XML e JSON.
Analizzare l’utilizzo di AJAX per la comunicazione asincrona. Gli studenti acquisiranno conoscenze sull’utilizzo di xmlhttprequest per inviare e ricevere dati dal server senza ricaricare la pagina.
Esaminare i principali framework JavaScript. Gli studenti comprenderanno le caratteristiche e i vantaggi di framework come Bootstrap, Angular, React e Vue.

Parsing in JavaScript

Parsing significa analizzare una stringa di testo e trasformarla in una struttura dati che può essere utilizzata dal programma. In JavaScript, il parsing viene spesso utilizzato per convertire dati XML o JSON in oggetti JavaScript.

Parsing di JSON

JSON è ampiamente utilizzato per lo scambio di dati tra client e server. In JavaScript, il parsing di JSON è semplice grazie alla funzione JSON.parse().

Esempio:

let jsonString = '{"name": "John", "age": 30, "city": "New York"}';
let jsonObject = JSON.parse(jsonString);

console.log(jsonObject.name); // Output: John

Parsing di XML

Per il parsing di XML in JavaScript, è possibile utilizzare l’oggetto DOMParser, che trasforma una stringa XML in un documento DOM.

Esempio:

let xmlString = `<note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>`;
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(xmlString, "application/xml");

console.log(xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue); // Output: Tove

AJAX: Comunicazione asincrona

AJAX (Asynchronous JavaScript and XML) permette di inviare e ricevere dati dal server in modo asincrono senza dover ricaricare la pagina. Questo è essenziale per creare applicazioni web dinamiche e interattive.

xmlhttprequest

xmlhttprequest è l’oggetto JavaScript utilizzato per eseguire richieste AJAX. Esso permette di inviare richieste HTTP al server e di ricevere risposte in vari formati, tra cui XML, JSON, HTML o testo semplice.

Esempio di richiesta GET:

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        let response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};
xhr.send();

Esempio di richiesta POST:

let xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/data", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        let response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};
let data = JSON.stringify({"name": "John", "age": 30});
xhr.send(data);

Frameworks JavaScript

I framework JavaScript sono strumenti che facilitano lo sviluppo di applicazioni web complesse, fornendo strutture e librerie predefinite. Ecco una panoramica dei principali framework:

Bootstrap

Bootstrap è un framework front-end che aiuta a creare siti web reattivi e mobili con HTML, CSS e JavaScript. Offre una vasta gamma di componenti predefiniti come moduli, pulsanti, navigazioni e altro.

Vantaggi: Facile da usare, personalizzabile, compatibile con tutti i principali browser.
Esempio:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
    <h1 class="text-center">Benvenuti in Bootstrap</h1>
    <button class="btn btn-primary">Clicca qui</button>
</div>

Angular

Angular è un framework front-end sviluppato da Google per costruire applicazioni web a pagina singola (SPA). Utilizza TypeScript e offre una struttura robusta per lo sviluppo di applicazioni complesse.

Vantaggi: Struttura MVC, iniezione delle dipendenze, forte supporto per test.
Esempio:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Benvenuti in Angular</h1>`
})
export class AppComponent {}

React

React è una libreria front-end sviluppata da Facebook per costruire interfacce utente. Utilizza un approccio dichiarativo e componenti riutilizzabili per semplificare lo sviluppo.

Vantaggi: Virtual DOM, flusso unidirezionale dei dati, grande ecosistema.
Esempio:

import React from 'react';

function App() {
  return <h1>Benvenuti in React</h1>;
}

export default App;

Vue

Vue è un framework progressivo per la costruzione di interfacce utente. È progettato per essere incrementale e facile da integrare con altri progetti e librerie.

Vantaggi: Semplicità, reattività, facile integrazione.
Esempio:

<div id="app">
  {{ message }}
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Benvenuti in Vue'
    }
  });
</script>

Esercitazioni pratiche

Parsing di JSON e XML con JavaScript:
- Creare uno script JavaScript che carica e analizza dati JSON e XML da un server e visualizza i dati in una pagina web. Gli studenti dovranno utilizzare fetch per JSON e DOMParser per XML.
Implementazione di richieste AJAX:
- Creare una semplice applicazione web che utilizza AJAX per inviare e ricevere dati dal server. Gli studenti dovranno implementare richieste GET e POST utilizzando xmlhttprequest.
Creazione di una pagina web con Bootstrap:
- Utilizzare Bootstrap per creare una pagina web reattiva con componenti come moduli, pulsanti e griglie. Gli studenti dovranno personalizzare il design utilizzando le classi CSS di Bootstrap.
Sviluppo di componenti con Angular, React e Vue:
- Creare una semplice applicazione web utilizzando Angular, React o Vue. Gli studenti dovranno implementare componenti, gestire lo stato e integrare l’applicazione con un’API di backend.

5.2.5 – Parser in JavaScript, AJAX e Frameworks JavaScript