Maison >interface Web >js tutoriel >Comment puis-je passer des appels AJAX sans jQuery ?

Comment puis-je passer des appels AJAX sans jQuery ?

DDD
DDDoriginal
2024-12-20 17:57:11736parcourir

How Can I Make AJAX Calls Without jQuery?

Faire des appels AJAX sans jQuery

Dans le paysage actuel du développement Web, AJAX est devenu une technique cruciale pour améliorer l'expérience utilisateur. Bien que jQuery simplifie le processus d'appel AJAX, il est essentiel de comprendre comment les exécuter à l'aide de JavaScript Vanilla.

Une approche pour effectuer un appel AJAX sans jQuery consiste à utiliser l'objet XMLHttpRequest (XHR). Voici un exemple :

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();
}

Dans ce script, nous créons un objet XMLHttpRequest et configurons un écouteur d'événement pour l'événement readystatechange. Lorsque la requête est terminée (readystate est 4), nous vérifions le code d'état et effectuons les actions appropriées en fonction du résultat.

jQuery fournit une manière plus concise d'effectuer des appels AJAX, comme indiqué ici :

$.ajax({
    url: "test.html",
    context: document.body,
    success: function() {
      $(this).addClass("done");
    }
});

Ce script utilise la méthode jQuery $.ajax(), offrant plus de flexibilité et de lisibilité du code. Cependant, il est essentiel de noter que jQuery dépend de l'inclusion de la bibliothèque jQuery, alors que l'approche JavaScript vanilla fonctionne nativement dans la plupart des navigateurs modernes.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn