js-ajax封装

原理

<script>
        window.onload=function (ev) {
            var btn=document.querySelector('button');
            btn.onclick=function () {
                //1.创建一个异步对象
                var xmlhttp=new XMLHttpRequest();
                //2.设置请求方式和请求地址
                /*
                open('method','url',async);
                method:请求的类型：GET或POST
                url:文件在服务器上的位置
                async:true（异步）或false（同步）
                 */
                xmlhttp.open('get','4-ajax-get.php',true);
                //3.发送请求
                xmlhttp.send();
                //4.监听状态变化
                xmlhttp.onreadystatechange=function (ev2) {
                    /*
                    0:请求初始化
                    1:服务器连接已建立
                    2:请求已接收
                    3:请求处理中
                    4:请求已完成，且响应已就绪
                     */
                    if (xmlhttp.readyState===4){//判断是否到4
                        if(xmlhttp.status>=200&&xmlhttp.status<300||xmlhttp.status===304){
                            //5.处理返回结果
                            console.log('接受到服务器返回的结果');
                            //6.访问服务器
                            console.log(xmlhttp.responseText);
                        }else {
                            console.log('没有接受到服务器返回的结果');
                        }
                    }
                }
            }
        }
    </script>

封装并兼容IE

function obj2str(data) {
    data.t = new Date().getTime();
    var res = [];
    for (var key in data) {
        //中文转换（在URL中不能出现中文）
        res.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    return res.join('&');
}

function Ajax(option) {
    //将对象转为字符串
    var str = obj2str(option.data);
    var xml;
    var timer;
    //兼容ie 1、创建一个异步对象
    if (window.XMLHttpRequest) {
        xml = new XMLHttpRequest();
    } else {//IE5和6
        xml = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //判断请求类型 2、设置请求方式和请求地址 3、发送请求
    if (option.type.toLowerCase() === 'GET') {
        xml.open(option.type, option.url + '?' + str, true);
        xml.send();
    } else {
        xml.open(option.type, option.url, true);
        //post请求注意点：此代码位置固定
        xml.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xml.send(str);
    }
    //IE缓存 4、监听状态变化
    xml.onreadystatechange = function () {
    //判断服务器处理
        if (xml.readyState === 4) {
            clearInterval(timer);
            if (xml.status >= 200 && xml.status < 300 || xml.status === 304) {
                // console.log('请求成功');
                //访问服务器
                // console.log(xml.responseText);
                option.success(xml);
            } else {
                // console.log('请求失败');
                option.error(xml.status);
            }
        }
    };
    //判断是否超时
    if (option.timeout) {
        timer = setInterval(function () {
            alert('网络请求超时');
            xml.abort();
            clearInterval(timer);
        }, option.timeout);
    }
}

//应用
window.onload = function () {
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                Ajax({
                    url: '7-ajax-post.php',
                    type: 'Post',
                    data: {
                        'name': '胡歌',
                        'age': 19
                    }
                    ,
                    timeout: 3000,
                    success: function (xml) {
                        console.log(xml.responseText);
                    },
                    error: function (xml) {
                        console.log('error');
                    }
                })
            }
        }