前端Ajax-Day32

XMLHttpRequest：用于请求服务器上的资源。

使用XMLHttpRequest发起get请求：

① 创建xhr对象

② 调用xhr.open函数：请求类型和请求地址

③ 调用xhr.send函数

④ 监听xhr.onreadystatechange事件

　　　　　  // 创建xhr对象
        let xhr = new XMLHttpRequest();

        // 调用open函数
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
        
        // 调用send函数
        xhr.send();

        // 监听onreadystatechange事件
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                // 获取服务器响应数据
                console.log(xhr.responseText);
            }
        }

xhr对象的readyState属性：表示当前ajax请求的状态

使用xhr发起带参数的请求：在open方法内的url属性里写入？和指定参数，若有多个参数则使用&进行连接。

查询字符串：

GET请求携带参数的本质：将参数以查询字符串的形式追加到url后

URL编码：使用英文字符表示非英文字符。

encodeURI进行编码，decodeURI进行解码。

使用xhr发起post请求：

① 创建xhr对象

② 调用xhr.open函数

③ 设置Content-Type属性：setRequestHeader（'Content-Type'，'application/x-www-form-urlencoded'）

④ 调用xhr.send函数，将数据以查询字符串的方式发送给服务器

⑤ 监听xhr.onreadystatechange事件

　　　　　// 创建xhr对象
        let xhr = new XMLHttpRequest();

        // 调用open函数
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook');

        // 设置Content-Type属性
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        // 调用send函数，指定发送数据
        xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社');

        // 监听onreadystatechange事件
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }

数据交换格式：服务器端和客户端进行数据传输和交换的格式。

XML：可扩展标记语言，与HTML类似

JSON：JavaScript对象和数组的字符串表示法。

JSON的两种结构：对象和数组

对象结构：{key：value}，key必须是以双引号包裹的字符串。

数组结构：

注意事项：

JSON和对象的关系：JSON就是对象的字符串表示法。

JSON和对象的互相转化：

JSON.parse()函数：将JSON字符串转化为对象

JSON.stringify()函数：将对象转化为JSON字符串

序列化：把数据对象转化为字符串的行为，叫做序列化。调用JSON.stringify()叫做JSON的序列化。

反序列化：把字符串转化为数据对象的行为，叫做反序列化。调用JSON.parse()叫做JSON的反序列化。

封装自定义Ajax函数：

/**
 * 处理data参数
 * @param{data} 需要发送到服务器的数据
 * @returns{string} 返回拼接好的查询字符串
 */
function resolveData(data) {
    const arr = [];
    for (let k in data) {
        arr.push(k + '=' + data[k]);
    }
    return arr.join('&');
}

// 处理成功的回调函数和与服务器连接
function ajax(options) {
    let xhr = new XMLHttpRequest();
    // 拼接查询字符串
    let qs = resolveData(options.data);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 服务器返回数据反序列化为对象，再利用success实现回调
            let res = JSON.parse(xhr.responseText);
            options.success(res);
        }
    }

    // 判断类型
    let type = options.method.toUpperCase();
    if (type === 'GET') {
        xhr.open(type, options.url + '?' + qs);
        xhr.send();
    } else if (type === 'POST') {
        xhr.open(type, options.url);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(qs);
    }
}

XMLHttpRequest Level2新特性：

① 设置http请求时限：timeout属性进行设置。

② 使用FormData管理表单数据：

通过FormData直接获取表单的属性，类似jQuery中的serialize函数快速获取。

③ 上传文件：

1.定义UI结构

2.验证是否选择了文件

3.向FormData中追加文件

4.使用xhr发起上传文件的请求（必须使用post）

5.监听onreadystate事件

④ 获取数据传输的进度信息：xhr.upload.onprogress事件

先判断是否可以计算上传长度：lengthComputable

再计算进度=Math.ceil((e.load / e.total) * 100)：e.loaded为已传输字节，e.total为总需的字节。

使用jQuery实现上传文件：

 $('#btnUpload').on('click', () => {
            const files = $('#file1')[0].files;
            if (files.length <= 0) return alert('未选择文件!');
            const fd = new FormData();
            fd.append('avatar', files);

            $.ajax({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                data: fd,
                contentType: false,
                processData: false,
                success: res => console.log(res)
            })
        })