Comment puis-je passer des appels AJAX en utilisant uniquement JavaScript Vanilla ?

Faire des appels AJAX sans jQuery : explorer l'approche JavaScript Vanilla

Faire des appels AJAX sans jQuery est une exigence courante pour les développeurs cherchant à tirer parti de puissance de la communication asynchrone sans recourir à de vastes bibliothèques tierces. Voici une exploration détaillée de la façon d'y parvenir en utilisant du JavaScript simple :

Objet XHR JavaScript Vanilla

L'objet XMLHttpRequest (XHR) est la pierre angulaire des appels AJAX dans JavaScript Vanilla. . Pour commencer, instanciez un objet XHR à l'aide du nouveau constructeur XMLHttpRequest().

Fonctions de gestion des événements et de rappel

Ensuite, définissez un écouteur d'événement qui surveille l'état de l'objet XHR. (état prêt). Lorsque l'état passe à XMLHttpRequest.DONE (généralement 4), cela signale que la requête est terminée.

Traitement des requêtes et des réponses HTTP

La méthode open() s'initialise une requête HTTP, spécifiant la méthode de requête (par exemple, GET, POST), l'URL cible et si la requête doit être asynchrone (définie sur true pour AJAX). La méthode send() envoie la requête.

Dès réception d'une réponse, évaluez la propriété status de l'objet XHR. Un code d'état de 200 indique une demande réussie, tandis que d'autres codes (tels que 400 ou 500) indiquent des erreurs. Gérez ces scénarios en conséquence.

Exemple de code

L'extrait de code suivant montre comment créer et traiter un appel AJAX à l'aide de JavaScript Vanilla :

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}

Conclusion

Comprendre comment passer des appels AJAX sans jQuery élargit votre boîte à outils en tant que développeur. En tirant parti de l'objet Vanilla JavaScript XHR, vous obtenez un contrôle total sur le processus de communication asynchrone, permettant un transfert de données flexible et efficace dans les applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!