XMLHttpRequest的基本使用和封装

XMLHttpRequest发起GET请求

步骤:
1.创建xhr对象
2.调用 xhr.open()函数
3.调用 xhr.send()函数
4.监听 xhr.onreadystatechange 事件

// 1.创建xhr对象
var xhr = new XMLHttpRequest();
// 2.调用 xhr.open()函数,指定 请求方式 与 URL地址
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks');
// 2.1 使用xhr发起带参数的GET请求  这种在 URL 地址后面拼接的参数，叫做查询字符串
// xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1');
// 3.调用 send函数 发起ajax 请求
xhr.send();
// 4.监听 onreadystatechange 事件
xhr.onreadystatechange = () => {
    // 4.1 监听 xhr 对象的请求状态 readyState;与服务器响应的状态 status
    if(xhr.readyState === 4 && xhr.status === 200) {
        // 4.2 打印服务器响应回来的数据
        console.log(xhr.responseText);
    }
}

了解xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个：

值	状态	描述
0	UNSENT	XMLHttpRequest 对象已被创建，但尚未调用 open方法
1	OPENED	open() 方法已经被调用
2	HEADERS_RECEIVED	send() 方法已经被调用，响应头也已经被接收
3	LOADING	数据接收中，此时 response 属性中已经包含部分数据
4	DONE	Ajax 请求完成，这意味着数据传输已经彻底完成或失败

XMLHttpRequest发起POST请求

1.创建 xhr对象
2.调用 xhr.open()函数
3.设置 Content-Type属性(固定写法)
4.调用 xhr.send()函数，同时指定要发送的数据
5.监听 xhr.onreadystatechange 事件

// 1.创建 xhr对象
var xhr = new XMLHttpRequest();
// 2.调用 open()
xhr.open('POST','http://www.liulongbin.top:3006/api/addbook');
// 3.设置 Content-Type属性(固定写法)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 4.调用 xhr.send()函数，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5.监听 xhr.onreadystatechange 事件
xhr.onreadystatechange = () => {
    if(xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}

封装自己的Ajax函数

要实现的效果

ajax({
    method: '请求类型',
    url: '请求地址',
    data: {
        请求参数对象
    },
    success: (res) => {		// 成功的回调函数
        console.log(res);	//打印数据
    }
})

// 需要把data对象，转化成查询字符串的形式，从而提交给服务器，因此提前定义 resolveData 函数如下:
/**
 * 处理 data 参数
 * @param {data} 需要发送到服务器的数据
 * @returns {string} 返回拼接好的查询字符串 name=zs&age=10
 */

function resolveData(data) {
    let arr = [];
    // 遍历对象，k=value
    for(let k in data) {
        arr.push(k + '='+ data[k]);
    }
    // 将数组连成字符串，用&分隔符
    return arr.join('&');
}

// 定义ajax函数
// 在ajax()函数中，需要创建xhr对象，并监听 onreadystatechange 事件
function ajax(options) {
    let xhr = new XMLHttpRequest();
    // 拼接查询字符串
    let qs = resolveData(options.data);

    // 监听请求状态改变的事件
    xhr.onreadystatechange = () => {
        if(xhr.readyState === 4 && xhr.status === 200) {
            // JSON.parse()，把字符串转换为数据对象
            let result = JSON.parse(xhr.responseText);
            options.success(result);
        }
    }
    if(options.method.toUpperCase() === 'GET') {
        // 发起GET请求
        xhr.open(options.method,options.url+ '?' + qs);
        xhr.send()
    } else if(options.method.toUpperCase() === 'POST') {
        // 发起POST请求
        xhr.open(options.method,options.url);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(qs);
    }
}