美文网首页
封装ajax

封装ajax

作者: css7 | 来源:发表于2017-12-04 19:52 被阅读0次
// 实例化,配置请求信息,发送请求,设置回调函数
// 分析:
// 期望:ajax(method,url,data,success)

/**
 * ajax封装
 * @param {*} method get/post 
 * @param {*} url 请求资源路径
 * @param {*} data 请求参数
 * @param {*} success 回调函数 
 */

function ajax(method, url, data, success) {
    // 1.实例化对象
    var xhr = null; //  实例化一个对象,初始值为空   new XMLHttpRequest();
    if (window.ActiveXObject) { //IE5IE6是以ActiveXObject的方式引入XMLHttpRequest
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    } else if (window.XMLHttpRequest) { //除IE5 IE6以外的浏览器XMLHttpRequest
        xhr = new XMLHttpRequest(); //实例化一个XMLHttpRequest
    }

    // 2.配置信息 open()
    if (method == 'GET' && data) { //判断data存在并且是GET方式
        url += '?' + data;
    }
    xhr.open(method, url, true);

    // 3.发送请求 send(),如果是POST方式,参数写在括号里
    if (method == 'GET') {
        xhr.send();
    } else if (method == 'POST') {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                // 如果回调函数不为空,就执行这个回调函数,该函数有一个参数xhr.responseText就是返回的内容
                success && success(xhr.responseText);
            }
        }
    }
}

相关文章

网友评论

      本文标题:封装ajax

      本文链接:https://www.haomeiwen.com/subject/pwcfixtx.html