パッケージAjax

質問:1回のAjaxリクエストコードの送信が多すぎて、複数回のリクエストコードの送信が冗長で重複している
ソリューション:要求コードを関数にカプセル化し、要求を送信するときに関数を呼び出す
1、簡略版

function ajax(mether, url, callback, data, flag) {
    //     ，    
    flag = flag || true;
    let xhr;
    
    //          
    mether = mether.toUpperCase();
    
    //        
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    } else if (window.ActiveXObject) {
        xhr = new ActiveXObject()
    }
    
    //     
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            callback(xhr.responseText)
        }
    }
    ``
    //    get  
    if (mether === 'GET') {
        let date = new Date();
        let timer = date.getTime();
        xhr.open("GET", url + '?' + data + '&timer' + timer, flag);
        xhr.send()
    
        //    post  
    } else if (mether === 'POST') {
        xhr.open('POST', url, flag);
        xhr.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");
        xhr.send(data)
    }
}

注:getリクエストには、キャッシュの問題を解決するために時間パラメータが追加されています.
低バージョンのIEブラウザでは、Ajaxで深刻なキャッシュの問題が発生しています.リクエストアドレスが変更されない場合、最初のリクエストのみがサーバ側に送信され、後続のリクエストはブラウザのキャッシュから結果を取得します.これにより、サーバのデータが更新されても、クライアントはキャッシュ内の古いデータを取得します.
解決策は、要求アドレスの後にパラメータを要求し、各要求における要求パラメータの値が異なることを保証することである.
だから送信するたびにリアルタイム時間を加えて、毎回のリクエストパラメータが違います.
2、詳細版
上記の簡略版はデフォルトでデータを処理しています.つまり、転送時に自分でデータを処理する必要があります.
このメソッドには、リクエストの成功とリクエストの失敗のメソッドが追加されました.

function Ajax(options) {
    //     
    let defaults = {
        method: 'GET',
        url: '',
        data: {},
        header: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function() {},
        error: function() {}
    }

    // options     defaults       
    Object.assign(defaults, options)
    
    //       
    defaults.method = defaults.method.toUpperCase()

    let xhr;
    //      
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xhr = new ActiveXObject();
    }

    //       
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            //        
            let contentType = xhr.getResponseHeader('Content-Type');
            //       
            let contentText = xhr.responseText;

            //          JSON     ,     JSON  
            if (contentType === 'application/json') {
                contentText = JSON.parse(contentText)
            }

            //   HTTP    200 ，  success  
            if (xhr.status === 200) {
                defaults.success(contentText, xhr)
                //     error  
            } else {
                defaults.error(contentText, xhr)
            }
        }
    }

    //        namer=   &song=   
    let params = ''
    for (let key in defaults.data) {
        params += key + '=' + defaults.data[key] + '&'
    }
    //          &
    params = params.substr(0, params.length - 1);

    //    GET  
    if (defaults.method === 'GET') {
        //         
        defaults.url = defaults.url + '?' + params;
    }
    
    //          
    xhr.open(defaults.method, defaults.url)

    //    POST  
    if (defaults.method === 'POST') {
        let contentType = defaults.header['Content-Type'];
        //      
        xhr.setRequestHeader('Content-Type', contentType);
        //        JSON  ，   JSON     json      
        if (contentType === 'application/json') {
            xhr.send(JSON.stringify(defaults.data))
                //          jSON  
        } else {
            xhr.send(params)
        }

        //        POST  ，      GET  
    } else {
        xhr.send();
    }
};

GETリクエストとPOSTリクエストの最大の違いは、データの送信方式の違いです

GET要求は、要求アドレスにデータを結合する

である.

POST要求は、send()にデータを送信するサーバ

である.
共通点は、データがnamer=xxx&age=xxxの形に結合される必要があることです.
ただし、POSTリクエストにはヘッダを設定する必要があります.

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

JSON文字列でデータを送信するには、JSONオブジェクトをJSON文字列に変換する必要があります.POSTリクエストを使用する必要があります

JSON.stringify(JSON  )

パッケージのAjax関数を呼び出します.
前提:この関数をインポートする必要があります

Ajax({
    //     
    method: 'post',
    //     
    url: 'http://localhost:3000/cache',
    //   JSON         
    header: {
        'Content-Type': 'application/json'
    },
    data: {
        namer: '   ',
        song: '   '
    },
    success: function(data, xhr) {
        console.log('    ');
        console.log(data);
        console.log(xhr);
    },
    error: function(data, xhr) {
        console.log('    ');
        console.log(xhr);
        console.log(xhr.getResponseHeader);
    }
});