原生ajax封装

// 定义工具方法
let Util = {
    /**
     * 发送异步请求
     * @url     请求的地址
     * @fn      请求成功时候的回调函数
     **/
    getData(url, fn) {
        // 实例化xhr对象
        let xhr = new XMLHttpRequest();
        // 监听状态变化
        xhr.onreadystatechange = () => {
            // 监听数据请求完毕
            if (xhr.readyState === 4) {
                // 判断状态码
                if (xhr.status === 200) {
                    // 将数据转化成json字符串
                    fn && fn(JSON.parse(xhr.responseText))
                }
            }
        }
        // 打开请求
        xhr.open('GET', url, true);
        // 发送数据
        xhr.send(null)
    },
    postData(url, params, fn) {
        // 实例化xhr对象
        let xhr = new XMLHttpRequest();
        // 监听状态变化
        xhr.onreadystatechange = () => {
            // 监听数据请求完毕
            if (xhr.readyState === 4) {
                // 判断状态码
                if (xhr.status === 200) {
                    // 将数据转化成json字符串
                    fn && fn(JSON.parse(xhr.responseText))
                }
            }
        }
        // 打开请求
        xhr.open('POST', url, true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=utf-8");
        // 发送数据
        xhr.send(params);
    },
    /**
     * 将对象转化成query的形式
     * @obj     转化的对象 {color:red, num:100}
     * return   ?color=red&num=100
     **/
    objToQuery(obj,type) {
        type = type ? '':'?';
        let result = '';
        // 遍历对象，转化成json
        for (var i in obj) {
            result += '&' + i + '=' + obj[i]
        }
        // 去除最后一个&
        return type + result.slice(1)
    }
}
请求状态监控:onreadystatechange事件:当自己的Ajax与服务器之间有通讯时触发
    主要通过readyState属性来判断结束没有,结束了也并没有代表成功,status属性来判断
    1.--readyState属性:请求状态
        　--0(未初始化)还没有调用open方法
        　--1(载入)已经调用send()方法,正在发送请求
        　--2(载入完成)send()方法完成,已经收到全部相应内容
        　--3(解析)正在解析收到的响应内容
        　--4(完成)响应内容解析完成,可以在客户端调用(完成并不一定成功,需要status来检测是成功还是失败)
    2.--status属性:请求结果,是成功(200)还是失败(404):oAjax.status==200
    3.--返回值responseText:从服务器返回来的文本:oAjax.responseText
          (返回的值是一个字符串,有时需要进一步处理成其他格式的形式)
    　oAjax.onreadystatechange=function(){
      　//oAjax.readyState: 表示浏览器和服务器之间进行到哪一步了
     　 if(oAjax.readyState==4){  //读取完成
        　if(oAjax.status==200){  //读取的结果是成功
          　alert('成功:'+oAjax.responseText);
       　 }
      　}
    　}

实例化对象=》监听状态=》建立链接=》发送数据=》解析数据（JSON.parse是json格式字符串转化为json对象）