Comment implémenter la méthode Ajax en js natif ? Introduction à la méthode d'implémentation d'Ajax en JS natif (avec code)

Le contenu de cet article est de savoir comment implémenter la méthode Ajax en JS natif ? Introduction à la méthode d'implémentation d'Ajax en JS natif (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

De manière générale, tout le monde est peut-être habitué à utiliser la méthode Ajax fournie par JQuery, mais comment implémenter la méthode Ajax en utilisant du js natif ?

Méthodes Ajax fournies par JQuery :

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

Implémentation js native des méthodes Ajax :

var Ajax={
  get: function(url, fn) {
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头，发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}

Remarques :

1. open (méthode, url, async) La méthode nécessite trois paramètres :

Méthode : La méthode utilisée pour envoyer la requête (GET ou POST par rapport à POST, GET est plus simple et plus rapide, et dans la plupart des cas le sera) ; cependant, veuillez utiliser les requêtes POST dans les situations suivantes :

• Les fichiers cache (mise à jour de fichiers ou de bases de données sur le serveur) ne peuvent pas être utilisés

• Envoyer de grandes quantités de données au serveur (POST n'a pas de limite de données)

• Lors de l'envoi d'une entrée utilisateur contenant des caractères inconnus, POST est plus stable et fiable que GET

url : Spécifie l'URL du script côté serveur (le fichier peut être n'importe quel type de fichier, tel que .txt et .xml, ou un fichier de script serveur, tel que .asp et .php (avant renvoyant la réponse, Capable d'effectuer des tâches sur le serveur));

async : Spécifie que la demande doit être traitée de manière asynchrone (vrai) ou de manière synchrone (faux, vrai pour exécuter d'autres scripts en attendant le serveur) ; pour répondre et répondre à la réponse lorsque la réponse est prête. Processus ; false signifie attendre la réponse du serveur avant de s'exécuter.

2. La méthode send() peut envoyer la requête au serveur.

3. onreadystatechange : il existe une fonction qui traite la réponse du serveur à chaque fois que readyState change, la fonction onreadystatechange sera exécutée.

4. readyState : stocke les informations d'état de la réponse du serveur.

• 0 : La requête n'est pas initialisée (le proxy est créé, mais la méthode open() n'a pas été appelée)

• 1 : La connexion au serveur a été établie (openLa méthode a été appelée)

• 2 : La requête a été reçue (sendLa méthode a été appelée, et l'en-tête et le statut sont disponibles)

• 3 : La demande est en cours de traitement (téléchargement, l'attribut responseText contient déjà des données)

• 4 : Les la demande est terminée et la réponse est prête (l'opération de téléchargement est terminée)

5.responseText : obtenez les données de réponse sous forme de chaîne.

6. setRequestHeader() : Lorsque POST transmet des données, il est utilisé pour ajouter un en-tête HTTP, puis envoyer (données), faites attention au format des données lorsque GET envoie des informations, ajoutez simplement des paramètres directement à l'URL ; , tel que url?a =a1&b=b1.

PS : Le principe de base de Fetch polyfill est de détecter si la méthode window.fetch existe, et sinon, d'utiliser XHR pour l'implémenter

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!