js封装ajax请求

最新推荐文章于 2023-09-20 10:27:08 发布

captAction

最新推荐文章于 2023-09-20 10:27:08 发布

阅读量247

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/captAction/article/details/110233161

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

封装ajax请求（promise）

function ajax(opts) {
    var xhr = new XMLHttpRequest(),
        type = opts.type || 'GET',
        url = opts.url,
        params = opts.data,
        dataType = opts.dataType || 'json';

    type = type.toUpperCase();

    if (type === 'GET') {
        params = (function(obj){
            var str = '';

            for(var prop in obj){
                str += prop + '=' + obj[prop] + '&'
            }
            str = str.slice(0, str.length - 1);
            return str;
        })(opts.data);
        url += url.indexOf('?') === -1 ? '?' + params : '&' + params;
    }

    xhr.open(type, url);

    if (opts.contentType) {
        xhr.setRequestHeader('Content-type', opts.contentType);
    }

    xhr.send(params ? params : null);

    //return promise
    return new Promise(function (resolve, reject) {
        //onload are executed just after the sync request is comple，
        //please use 'onreadystatechange' if need support IE9-
        xhr.onload = function () {
            if (xhr.status === 200) {
                var result;
                console.log(xhr)
                if (xhr.responseText != null) {
                    try {
                        result = JSON.parse(xhr.responseText);
                    } catch (e) {
                        result = xhr.response;
                        //result = JSON.parse(xhr.responseText);
                    }
                }
                resolve(result);
            } else {
                reject(xhr.response);
            }
        };

    });
}

ajax请求（非promise）

/* 封装ajax函数
 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
function ajax(opt) {
    opt = opt || {};
    opt.method = opt.method.toUpperCase() || 'POST';
    opt.url = opt.url || '';
    opt.async = opt.async || true;
    opt.data = opt.data || null;
    opt.success = opt.success || function () {};
    var xmlHttp = null;
    if (XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    else {
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    }var params = [];
    for (var key in opt.data){
        params.push(key + '=' + opt.data[key]);
    }
    var postData = params.join('&');
    if (opt.method.toUpperCase() === 'POST') {
        xmlHttp.open(opt.method, opt.url, opt.async);
        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
        xmlHttp.send(postData);
    }
    else if (opt.method.toUpperCase() === 'GET') {
        xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
        xmlHttp.send(null);
    }
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            opt.success(JSON.parse( xmlHttp.responseText));//如果不是json数据可以去掉json转换
        }
    };
}