标签：success xhr Demo js updateProgress headers ajaxProtogenesis error data

js原生请求XMLHttpRequest封装

//js原生请求XMLHttpRequest
const ajaxProtogenesis = {
    post: function (url, data, success, error, headers) {
        //默认application/json
        if (!headers) {
            headers = { "Content-type": "application/json" };
        }
        this.ajax('post', url, true, data, success, error, headers);
    },
    get: function (url, success, error, headers) {
        this.ajax('get', url, true, null, success, error, headers);
    },
    ajax: function (method, url, async, data, success, error, headers, updateProgress) {
        //请求对象
        var xhr = new XMLHttpRequest();

        //请求类型，请求地址 .open(method, url, async, user, password);
        if (!method) { method = "post" }
        if (async == undefined || async == null) { async = true }
        xhr.open(method, url, async);

        xhr.responseType = 'json';//返回数据解析类型

        //状态事件
        xhr.onreadystatechange = function () {
            //readyState=4请求完成
            if (xhr.readyState == 4) {
                var res = xhr.response;

                if (xhr.status == 200) {
                    if (success) {
                        success(res);
                    }
                } else if (error) {
                    error(res);
                }
            }
        };

        //// 请求成功回调函数readyState等于4
        //xhr.onload = e => {
        //    console.log('request success');
        //    console.log(e.explicitOriginalTarget.responseText);
        //};
        //// 请求结束
        //xhr.onloadend = e => {
        //    console.log('request loadend');
        //    console.log(e.explicitOriginalTarget.responseText);
        //};
        //// 请求出错
        //xhr.onerror = e => {
        //    console.log('request error');
        //    console.log(e.explicitOriginalTarget.responseText);
        //};
        //// 请求超时
        //xhr.ontimeout = e => {
        //    console.log('request timeout');
        //    console.log(e.explicitOriginalTarget.responseText);
        //};
        //xhr.timeout = 0; // 设置超时时间,0表示永不超时

        //传输进度获取 //var updateProgress=function (event) {if (event.lengthComputable) { var completedPercent = event.loaded / event.total;  } }
        if (updateProgress) {
            //xhr.onprogress = updateProgress;当readyState等于3
            //xhr.upload.onprogress = updateProgress;
            xhr.upload.addEventListener("progress", updateProgress, false);
        }

        //请求头//formData参数不能设置请求头
        if (headers) {
            for (var i in headers) {
                xhr.setRequestHeader(i, headers[i]);
            }
        }

        //json对象参数转json字符串
        if (headers && headers["Content-type"].toLowerCase() == "application/json") {
            if (typeof (data) == "object") {
                data = JSON.stringify(data);
            }
        }

        //参数，发出请求xhr.send(null || new FormData || 'a=1&b=2' || 'json字符串');
        xhr.send(data);

        //终止请求xhr.abort();
    },
    formData: function (url, data, success, error, updateProgress) {
        //data例{ planId: planId, file: document.getElementById("fileUpload").files[0] }
        //updateProgress传输进度回调
        let formData = new FormData();
        for (var i in data) {
            formData.append(i, data[i]);
        }

        //formData参数不能设置请求头
        this.ajax("POST", url, true, formData, success, error, null, updateProgress);
    }
}

标签：success,xhr,Demo,js,updateProgress,headers,ajaxProtogenesis,error,data
来源： https://www.cnblogs.com/lanofsky/p/15233578.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。