Encapsulation JS native des méthodes AJAX

Tout le monde utilise Ajax tous les jours. L'encapsulation d'Ajax par la bibliothèque jquery est également très complète et facile à utiliser. Jetons un coup d'œil à ses principes internes et encapsulons manuellement notre propre bibliothèque Ajax.

1. Principe

L'envoi d'Ajax natif nécessite quatre étapes :

1) Créer un objet Ajax : XMLHttpRequest

2) Définir paramètres de requête : ouvert (paramètres de requête [get/post], adresse url, asynchrone [true/false])

3) Définir la fonction de rappel : onreadystateChange est utilisé pour traiter les données renvoyées

4) Envoyez une requête : send()

//TODO step1: 创建ajax对象
var xhr = new XMLHttpRequest();
//TODO step2: 设置请求参数
xhr.open('get','01.php',true);
//TODO step3: 设置回调
xhr.onreadystatechange = function () {
    //接收返回数据
    console.log(xhr.responseText);//responseText 用于接收后台响应的文本
}
//TODO step4: 发送请求
xhr.send();

2. Encapsulation

L'idée principale de l'encapsulation est de traiter les parties qui doivent être modifiées dynamiquement comme Paramètres et laisser les parties inchangées. Là, dans le code ci-dessus, la méthode de demande (get, post), l'URL de l'adresse de la demande, les données du paramètre de demande, le succès du rappel, l'erreur de rappel d'échec, etc., ces paramètres sont modifiés dynamiquement; la création de l'objet Ajax XMLHttprequest, la surveillance des événements onreadystatechange, etc. sont corrigées, la première étape consiste donc à déterminer les paramètres d'encapsulation :

v adresse de demande d'url

v données de demande de données

v tapez type de demande

v success success callback

v erreur échec rappel

v beforeSend appel avant l'envoi return false pour empêcher l'envoi

v complet Rappel réussi de la requête ajax, peu importe quand elle sera exécutée

function ajax(option){
    //用户配置option 默认配置init
    var init = {
        type:'get',
        async:true,
        url:'',
        success: function () { },
        error: function () { },
        data:{},
        beforeSend: function () {
            console.log('发送前...');
            return false;
        }
    };
    //TODO step1: 合并参数
    for(k in option){
        init[k] = option[k];
    }
    //TODO step2: 参数转换
    var params = '';
    for(k in init.data){
        params += '&'+k+'='+init.data[k];
    }
    var xhr = new XMLHttpRequest();
    // type url
    //TODO step3: 区分get和post,进行传参
    var url = init.url+'?__='+new Date().getTime();
    //TODO step4: 发送前
    var flag = init.beforeSend();
    if(!flag){
        return;
    }
    if(init.type.toLowerCase() == 'get'){
        url += params;
        xhr.open(init.type,url,init.async);
        xhr.send();
    }else{
        xhr.open(init.type,url,init.async);
      xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(params.substr(1));
    }
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                init.success(xhr.responseText);
            }else{
                //error
                init.error();
            }
        }
    }
}

Ce à quoi nous devons faire attention ici, c'est que les méthodes de passage des paramètres de get et post sont différentes. La requête get doit être directement épissée après. l'adresse URL et la demande de publication doit transmettre les paramètres dans la méthode d'envoi, et cela doit être L'en-tête de la demande est setRequestHeader('content-type','application/x-www-form-urlencoded'), donc il doit être distingué lors de l’encapsulation.

En raison du trop grand nombre de paramètres, les utilisateurs n'ont pas besoin de transmettre de nombreux paramètres à chaque fois, sinon ce sera très fastidieux à utiliser. Nous adoptons donc la forme des paramètres par défaut. Si l'utilisateur ne transmet pas la valeur par défaut, les paramètres de l'utilisateur seront utilisés.

3. Exemples d'utilisation

ajax({
    url: 'test.json',
    data:{test:123,age:456},
    //type:'post',
    success: function (res) {
        console.log(res);
    }
});

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!