封装ajax

/**
 * 简单请求：
 *      1. 请求方式只能是 GET、POST、HEAD
 *              GET：一般用来获取数据用的，特点：数据会拼接在url地址里
 *              POST：一般是用来存储数据用的，特点：数据会保存在请求体当中，而不会拼接在地址里
 *              HEAD：一般用来预查（判断请求是否正确）特点：不传递数据
 *      2. HTTP的请求头信息内容不能超出以下的几个字段：
 *              content-Type的值只能用: application/x-www-form-urlcoded, multipart/form-data, text/plain
 *              Accept-languge
 *              Accept
 *              Content-language
 * 
 * 非简单请求： 不是简单请求的请求
 *       
 */


/**
 *  我要发送信息给b
 *  请求当中所需要保存的信息：
 *      1. 发出去的信息        （请求数据）
 *      2. 发给谁（B）        （请求地址）
 *      3. 用哪种方式请求     （请求方式）（明发还是暗发）
 *      4. 保存响应的状态    （响应的状态码）（请求成没成功）
 *      5. 保存响应的信息       (响应的数据)
 * 
 *      XMLHTTPRequest 
 */
/**
 * 
 * @param {*} method  请求方式
 * @param {*} url     请求地址  协议、域名、路径
 * @param {*} data    请求数据
 * @param {*} cb      回调函数
 */


function ajax(method, url, data, cb) {
    // 存储一次请求中的所有信息（包括请求信息和响应信息）
    var xhr = null;
    if (window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    // 监听响应（为什么放在send之前，如果你网速极快，还没来得及绑定就发送完了，就监听不到了）
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                // JSON.stringify() 把JS对象序列化为JSON字符串
                // JSON.parse() 把JSON字符串解析为JS对象
                cb(JSON.parse(xhr.responseText));
            } else {
                console.log('error');

            }
        }
    }

    if (method == 'GET') {
        // 建立连接
        xhr.open(method, url + '?' + data, true);
        // 发送信息
        xhr.send();
    } else {
        xhr.open(method, url, true);
        // 在数据传递的过程中，编码格式为 key=value&key1=value1
        xhr.setRequestHeader('content-Type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }

}