Sono senza parole ChatGPT
Così tanto per provare, senza aspettarmi chissà cosa, gli ho chiesto " crea una classe javascript per gestire delle chiamate ajax " e in un paio di secondi mi ha buttato giù questo codice con tanto di spiegazione.
Certo! Ecco una semplice classe JavaScript che gestisce le chiamate AJAX utilizzando l'oggetto
XMLHttpRequest. Questa classe permette di effettuare richieste GET e POST.
class AjaxHandler {
constructor() {
this.xhr = new XMLHttpRequest();
}
// Metodo per effettuare una richiesta GET
get(url, callback) {
this.xhr.open('GET', url, true);
this.xhr.onload = () => {
if (this.xhr.status >= 200 && this.xhr.status < 300) {
callback(null, JSON.parse(this.xhr.responseText));
} else {
callback(`Error: ${this.xhr.status} ${this.xhr.statusText}`);
}
};
this.xhr.onerror = () => {
callback('Request failed');
};
this.xhr.send();
}
// Metodo per effettuare una richiesta POST
post(url, data, callback) {
this.xhr.open('POST', url, true);
this.xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
this.xhr.onload = () => {
if (this.xhr.status >= 200 && this.xhr.status < 300) {
callback(null, JSON.parse(this.xhr.responseText));
} else {
callback(`Error: ${this.xhr.status} ${this.xhr.statusText}`);
}
};
this.xhr.onerror = () => {
callback('Request failed');
};
this.xhr.send(JSON.stringify(data));
}
}
// Utilizzo della classe
const ajax = new AjaxHandler();
// Esempio di richiesta GET
ajax.get('https://api.example.com/data', (error, response) => {
if (error) {
console.error(error);
} else {
console.log('Response GET:', response);
}
});
// Esempio di richiesta POST
const postData = {name: 'John', age: 30};
ajax.post('https://api.example.com/data', postData, (error, response) => {
if (error) {
console.error(error);
} else {
console.log('Response POST:', response);
}
});Spiegazione della classe
Costruttore: Inizializza un'istanza di
XMLHttpRequest.Metodo
get(url, callback): Effettua una richiesta GET all'URL specificato e chiama ilcallbackcon i dati ricevuti o un errore in caso di fallimento.Metodo
post(url, data, callback): Effettua una richiesta POST all'URL specificato. I dati devono essere forniti come oggetto JavaScript, e vengono convertiti in JSON prima di essere inviati.Gestione degli errori: In entrambi i metodi, se la richiesta ha successo, il
callbackviene chiamato con i dati; altrimenti, viene passato un messaggio di errore.Puoi utilizzare questa classe per gestire le chiamate AJAX nel tuo progetto. Assicurati di sostituire gli URL di esempio con quelli reali della tua API.
