Quelle est la différence entre ajax et fetch

La différence entre ajax et fetch : 1. L'architecture de développement XHR native d'Ajax n'est pas claire et fetch utilise le mécanisme de traitement asynchrone de Promise, qui est plus simple à utiliser qu'ajax 2. Ajax utilise l'objet XMLHttpRequest pour demander des données, et fetch l'est ; juste une méthode de fenêtre globale.

L'environnement d'exploitation de cet article : système windows7, version javascript1.8.5&&html5, ordinateur Dell G3.

Quelle est la différence entre ajax et fetch

1. La différence entre ajax et fetch :

(1), ajax utilise l'objet XMLHttpRequest pour demander des données, tandis que fetch est une méthode de fenêtre

(2). Ajax est développé sur la base de XHR natif. La structure de XHR elle-même n'est pas claire. Il existe déjà une alternative à fetch

(3). (4). Récupérer uniquement Les erreurs sont signalées pour les requêtes réseau, et 400 et 500 sont traitées comme des requêtes réussies, qui doivent être encapsulées pour le traitement

(5). XHR peut

2.utilisation d'ajax

car il est natif La méthode d'écriture est très inutile, donc la plupart d'entre elles seront encapsulées, ce qui peut empêcher de nombreuses personnes d'écrire elles-mêmes une requête ajax. Ils utilisent tous JQuery ou Axios pour demander des données

var xhr= new XMLHttpRequest(); // 新建XMLHttpRequest对象xhr.onload= function(){ //请求完成
  console.log(this.responseText);
}// 发送请求:xhr.open('GET', '/user');
xhr.send();

Une telle demande est envoyée. C'est très gênant. Vous devez écrire autant de lignes de code pour envoyer une simple requête. Bien sûr, vous ne l'écrirez pas comme ça dans le développement réel, sinon le code sera redondant et lisible. Utilisez promise pour l'encapsuler

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

Commentaires sur le code :

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

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

① Impossible d'utiliser le cache ; fichiers (mettre à jour des fichiers ou des bases de données sur le serveur)

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

③POST est plus stable et fiable que GET lors de l'envoi d'entrées utilisateur contenant des caractères inconnus

url : URL réglementaire de un 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 (qui peut effectuer des tâches sur le serveur avant de renvoyer une réponse) );

async : Spécifie que la requête doit être traitée de manière asynchrone (true) ou synchrone (false) ; true signifie exécuter d'autres scripts en attendant la réponse du serveur, et traiter la réponse lorsque la réponse est prête ; false signifie attendre le ; réponse du serveur avant l'exécution.

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

3.onreadystatechange : Il existe une fonction qui gère 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 (la méthode open a été appelée)

2 : La requête a été reçu (la méthode send a été appelée, et l'en-tête et le statut sont disponibles)
3 : La requête est en cours de traitement (téléchargement, l'attribut ResponseText contient déjà une partie des données)
4 : La requête est terminée, et la réponse est prêt (l'opération de téléchargement est terminée)

5.responseText : Obtenez les données de réponse du formulaire 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, tels que l'url ; ?a=a1&b=b1 .

3.utilisation de fetch

1. Le premier paramètre est l'URL

2 Le deuxième paramètre facultatif peut contrôler différents objets d'initialisation

3 L'objet promise dans js est utilisé

var arr1 = [{
   name: "haha",
   detail:"123"}];
   fetch("url", {
       method: "post",
       headers: {//设置请求的头部信息
           "Content-Type": "application/json"            //跨域时可能要加上
           //"Accept":"allication/json"
       },    //将arr1对象序列化成json字符串
       body: JSON.stringify(arr1)//向服务端传入json数据
   }).then(function(resp) {
       resp.json().then((data) => {
                   
       })
   });

Tous les navigateurs IE ne prendront pas en charge le. fetch(), et le serveur ne rejettera pas lorsqu'il renvoie le code d'état 400 ou 500

[Recommandations de didacticiel associées :

Tutoriel vidéo AJAX

]

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!