Utiliser les fonctions JavaScript pour implémenter les requêtes AJAX et l'acquisition de données

Utilisez les fonctions JavaScript pour implémenter les requêtes AJAX et l'acquisition de données

1 Introduction à AJAX
AJAX (JavaScript asynchrone et XML) est une technologie utilisée pour implémenter une interaction de données asynchrone sur des pages Web. Grâce à AJAX, nous pouvons envoyer une requête au serveur et obtenir les données renvoyées par le serveur sans actualiser la page entière. Cela améliore l'expérience utilisateur et rend la page plus interactive et dynamique.

2. Étapes de mise en œuvre de la requête AJAX

1. Créer un objet XMLHttpRequest.
2. Définissez la méthode de requête, l'URL, si elle est asynchrone, etc.
3. Enregistrez une fonction de rappel pour gérer les données renvoyées par le serveur.
4. Envoyez une demande.
5. Traitez les données renvoyées par le serveur.

3. Exemples de code d'utilisation de fonctions JavaScript pour implémenter des requêtes AJAX

1. Créez un objet XMLHttpRequest

   function createHttpRequest() {
     if (window.XMLHttpRequest) {
    // 支持现代浏览器
    return new XMLHttpRequest();
     } else if (window.ActiveXObject) {
    // 兼容IE6及更早版本
    return new ActiveXObject("Microsoft.XMLHTTP");
     } else {
    alert("浏览器不支持AJAX！");
    return null;
     }
   }

2. Envoyez une requête GET et obtenez des données

   function getData(url, callback) {
     var xhr = createHttpRequest();
     if (xhr) {
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        callback(xhr.responseText);
      }
    };
    xhr.send();
     }
   }

3. Envoyez une requête POST et obtenez des données

   function postData(url, data, callback) {
     var xhr = createHttpRequest();
     if (xhr) {
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        callback(xhr.responseText);
      }
    };
    xhr.send(data);
     }
   }

Quatre. Exemple d'utilisation

Supposons que nous ayons une interface API backend qui peut renvoyer une donnée au format JSON. Utilisez le code ci-dessus pour effectuer une requête AJAX et obtenir des données.

1. Utilisez la requête GET pour obtenir des données

   var url = "http://example.com/api/getData";
   getData(url, function(response) {
     // 在这里处理获取到的数据
     console.log(response);
   });

2. Utilisez la requête POST pour envoyer des données et obtenir les résultats de retour

   var url = "http://example.com/api/submitData";
   var data = "username=John&password=123456";
   postData(url, data, function(response) {
     // 在这里处理返回的结果
     console.log(response);
   });

Résumé :
L'utilisation de fonctions JavaScript pour implémenter les requêtes AJAX et l'acquisition de données peut rendre les pages Web plus dynamiques et interactif. En créant un objet XMLHttpRequest, en définissant la méthode de requête et l'URL, en envoyant la requête et en traitant les données renvoyées par le serveur, nous pouvons réaliser la fonction d'interaction de données asynchrone. Obtenez des données via des requêtes GET ou envoyez des données à l'aide de requêtes POST et traitez les résultats renvoyés par le serveur dans la fonction de rappel, permettant à la page Web d'interagir avec le serveur et d'afficher dynamiquement les données.

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!