Quelle est la différence entre ajax et fetch

Différences : 1. fetch ne peut pas surveiller nativement la progression des requêtes, alors qu'ajax est développé sur la base de XHR natif et peut être surveillé ; 2. Par rapport à ajax, fetch a une méthode d'écriture meilleure et plus pratique 3. fetch ne signale que les erreurs ; pour les requêtes réseau, traiter à la fois 400 et 500 comme des requêtes réussies, mais pas ajax.

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.

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, et XHR lui-même La structure n'est pas claire et il existe déjà une alternative à fetch

(3) Par rapport à ajax, fetch a une méthode d'écriture meilleure et plus pratique

(4). traite 400 et 500 comme réussis. Les requêtes doivent être encapsulées pour le traitement

(5). Fetch ne peut pas surveiller nativement la progression de la requête, mais XHR peut

utilisation d'ajax

Parce que sa méthode d'écriture native est. très inutile, donc la plupart d'entre eux seront encapsulés, ce qui entraînera peut-être que beaucoup de gens ne savent pas comment écrire eux-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 du code :

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

• .

  méthode : où envoyer la requête La méthode à utiliser (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 :

  ① Les fichiers cache ne peuvent pas être utilisés. être utilisé (Mettre à jour les fichiers ou les 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)

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

• url : Spécifie l'URL d'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 demande doit être traitée de manière asynchrone (vrai) ou de manière synchrone (faux) ; true signifie exécuter d'autres scripts en attendant la réponse du serveur et traiter la réponse lorsque la réponse est reçue ; est prêt ; 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 (la méthode open a été appelée)

• 2 : La requête a été reçue (send La méthode 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 réponseText contient déjà une partie des données)

• 4 : La demande est terminée et la réponse est prête (opération de téléchargement 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 des données, faites attention au format des données lorsque GET envoie des informations, ajoutez simplement des paramètres directement à l'URL, par exemple comme url?a=a1&b =b1.

fetch usage

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 de promesse 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 Aucun de l'IE. les navigateurs prennent en charge la méthode fetch() et le serveur ne rejettera pas lorsqu'il renvoie le code d'état 400 ou 500

[Tutoriels associés recommandés : 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!