美文网首页
封装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