Comprendre XMLHttpRequest 2

Le développement web moderne repose sur une communication fluide entre le client et le serveur. XMLHttpRequest (XHR) est un objet JavaScript qui permet d’effectuer des requêtes HTTP. N’hésitez pas à vous rapprocher de notre précédent article XMLHttpRequest et le formatage des données. Avec la version 2 de cet objet, des améliorations significatives ont été apportées, rendant la gestion des requêtes asynchrones plus puissante et flexible.

Qu’est-ce qu’XMLHttpRequest 2 ?

XMLHttpRequest 2 est une évolution de l’objet XMLHttpRequest, introduit pour faciliter les requêtes HTTP dans les applications web. Cette version apporte des fonctionnalités supplémentaires, notamment la prise en charge des requêtes de type Blob et FormData, la gestion des flux, ainsi que des améliorations en matière de gestion des erreurs. Grâce à ces ajouts, les développeurs peuvent créer des applications web plus réactives et interconnectées.

Nouvelles fonctionnalités d’XMLHttpRequest 2

Prise en charge des réponses de type Blob

L’une des caractéristiques notables d’XMLHttpRequest 2 est la capacité de gérer les réponses au format Blob. Cela permet aux développeurs de récupérer des fichiers binaires tels que des images ou des fichiers audio sans nécessiter de traitement supplémentaire.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/image.png', true);
xhr.responseType = 'blob';

xhr.onload = function () {
    if (this.status === 200) {
        var img = document.createElement('img');
        img.src = URL.createObjectURL(this.response);
        document.body.appendChild(img);
    }
};

xhr.send();

Support de FormData

XMLHttpRequest 2 introduit également la prise en charge de l’objet FormData, permettant l’envoi de formulaires de manière plus efficace, y compris les fichiers.

var formData = new FormData();
formData.append('username', 'JohnDoe');
formData.append('file', fileInput.files[0]); // fileInput est un élément <input type="file">

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/upload', true);

xhr.onload = function () {
    if (this.status === 200) {
        console.log('Fichier envoyé avec succès!');
    }
};

xhr.send(formData);

Gestion des flux de données

XMLHttpRequest 2 permet également de gérer des flux de données en temps réel, ce qui est essentiel pour les applications nécessitant une mise à jour continue, comme les applications de chat ou de surveillance.

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/upload', true);

xhr.upload.onprogress = function (event) {
    if (event.lengthComputable) {
        var percentComplete = (event.loaded / event.total) * 100;
        console.log('Progression : ' + percentComplete + '%');
    }
};

xhr.onload = function () {
    if (this.status === 200) {
        console.log('Téléchargement terminé avec succès!');
    }
};

xhr.send(formData);

Gestion des erreurs

XMLHttpRequest 2 offre une meilleure gestion des erreurs grâce à des codes d’état HTTP plus clairs et une gestion des exceptions améliorée. Les développeurs peuvent désormais facilement déterminer la nature des problèmes lors de l’exécution des requêtes.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);

xhr.onload = function () {
    if (this.status >= 200 && this.status < 300) {
        console.log('Données reçues:', JSON.parse(this.responseText));
    } else {
        console.error('Erreur de requête:', this.status, this.statusText);
    }
};

xhr.onerror = function () {
    console.error('Erreur réseau');
};

xhr.send();

Conclusion

XMLHttpRequest 2 a radicalement amélioré la manière dont les développeurs peuvent interagir avec les serveurs via HTTP. Avec des fonctionnalités comme la gestion des Blob, FormData, et une gestion d’erreurs améliorée, cette API est essentielle pour le développement d’applications web modernes. Pour plus d’informations sur CORS et son interaction avec XMLHttpRequest, consultez l’article CORS ou la Gestion des Requêtes Cross-Origin.

---

Introduction des Promises et de fetch

Depuis l’introduction d’XMLHttpRequest 2, de nouvelles méthodes ont été mises en place pour effectuer des requêtes HTTP plus efficacement. Deux des plus notables sont Promises et l’API fetch. Ces concepts modernes apportent une approche plus propre et plus intuitive pour gérer les requêtes asynchrones en JavaScript. Voir l’article L’Évolution des Requêtes HTTP et des Opérations Asynchrones.

Promises

Une Promise est un objet représentant la terminaison (ou l’échec) d’une opération asynchrone et sa valeur résultante. Les Promises permettent d’écrire du code asynchrone de manière plus lisible en évitant les « callback hell » (chaînes de callbacks imbriquées).

function fetchData(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onload = () => {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(JSON.parse(xhr.responseText));
            } else {
                reject(new Error('Erreur : ' + xhr.statusText));
            }
        };
        xhr.onerror = () => reject(new Error('Erreur réseau'));
        xhr.send();
    });
}

fetchData('https://example.com/data')
    .then(data => console.log('Données reçues:', data))
    .catch(error => console.error(error));

API fetch

L’API fetch est une autre avancée qui remplace progressivement XMLHttpRequest. Elle utilise des Promises, ce qui permet une syntaxe plus simple et moderne pour effectuer des requêtes HTTP. fetch prend également en charge des fonctionnalités telles que les requêtes et les réponses sous forme de streams, rendant les opérations sur les données plus flexibles.

fetch('https://example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Erreur réseau : ' + response.statusText);
        }
        return response.json();
    })
    .then(data => console.log('Données reçues:', data))
    .catch(error => console.error(error));

Comparaison entre XMLHttpRequest 2, Promises et fetch

Caractéristique	XMLHttpRequest 2	Promises	fetch
Syntaxe	Implique des callbacks	Syntaxe plus claire avec .then() et .catch()	Basée sur des Promises
Gestion des erreurs	Nécessite une gestion manuelle des erreurs	Gestion simple via .catch()	Gestion intégrée avec les Promises
Prise en charge de Blob	Oui	Pas directement, nécessite une gestion manuelle	Oui
Prise en charge de FormData	Oui	Oui (à travers XMLHttpRequest)	Oui
Réponses en streaming	Non	Non	Oui
Utilisation de l’API	Plus complexe avec un code plus verbeux	Plus lisible et concise	Interface moderne et plus intuitive

Conclusion

L’évolution vers Promises et l’API fetch représente un progrès significatif dans le développement JavaScript pour les requêtes HTTP. Alors qu’XMLHttpRequest 2 a posé des bases solides, les nouvelles méthodes offrent une plus grande flexibilité et une meilleure lisibilité du code. Pour en savoir plus sur les requêtes HTTP et CORS, n’hésitez pas à consulter l’article CORS ou la Gestion des Requêtes Cross-Origin et d’autres ressources que nous avons abordées précédemment.