丸子学JS（学习1小时 - AJAX）

Ajax 是干什么的

Ajax（Asynchronous JavaScript And XML）是2005年新出现的技术，它的出现是为了解决这样一个场景：整个页面中，只有一小部分的数据需要进行更新，按照传统的前后端交互，我们需要向服务器请求该网页的所有数据，然后再在客户端重新渲染，这无疑是非常低效的操作。因此，Ajax就可以做到只向服务器请求我们想要的那一小部分数据，而不用请求全部数据，进而在刷新整个页面的前提下更新那部分的数据。

Ajax的优缺点

1）优点

1. 浏览器默认支持（一般浏览器都是支持JavaScript的）
2. 提高用户体验（不需要刷新整个页面，而只需要局部刷新）
3. 提高页面的性能（只需要请求部分数据，所以数据量就明显下降了）
   2）缺点
4. 破坏了浏览器的前进和后退功能(Ajax不会改变网页URL，因此不会在浏览器记录前后页面)
5. 对搜索引擎的支持较弱(搜索引擎无法检测到JS引起的数据变化)

Ajax的使用

Ajax的基本流程： 创建XHR对象 => 发送数据 => 接收数据
1）状态码

2）xhr的使用
创建一个xhr的实例

let xhr = new XMLHttpRequest()  

创建一个请求体

xhr.open('get', 'example.php', 'true');

发送

xhr.send();

获取服务端返回的数据

xhr.onreadystatechange = function() {
    console.log(xhr.readyState);
}

3. 发送get请求
   get请求所携带的数据是明文的，大小只有4k左右，而且它是写在URL的 ? 后面的

let xhr = new XMLHttpRequest();
xhr.open('get', 'example.php?query=2&count=10')
xhr.send()

4. 发送post请求
   发送post请求的数据是放在请求体中的，因此这里需要调用 xhr 对象上的 setRequestHeader（）方法来模仿表单提交时的内容类型

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

send() 方法接收的一个参数是请求主体发送的数据，所以我们的post请求要发送的数据就要作为该方法的参数

xhr.send('query=4&em=0')

封装$.ajax方法

const $ = {
    createXHR: function() {
        if(window.XMLHttpRequest) {
            return new XMLHttpRequest();
        }else {
            return new ActiveXObject();
        }
    },
    ajax: function(params){
        // 初始化
        let type = params.type ? params.type.toLowerCase() : 'get';
        let url = params.url;
        let data = params.data ? params.data : {};
        let isAsync = params.isAsync ? params.isAsync : 'true';
        let dataType = params.dataType.toLowerCase();
        let xhr = this.createXHR();
        // 拼接字符串
        let str = '';
        Object.keys(data).forEach(key => {
            str += `${key}=${data[key]}&`;
        })
        // 去掉尾部的&
        str = str.slice(0, -1);
        // 如果type = get 则吧携带参数直接拼到 url后面
        if(type === 'get') {
            url += `?${str}`;
        }
        // 返回一个promise对象
        return new Promise((resolve, reject) => {
            // 创建请求
            xhr.open(type, url, isAsync);

            if(type === 'post') {
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.send(str);
            }else {
                xhr.send();
            }

            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4) {
                    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        let res = dataType === 'json' ? JSON.parse(xhr.responseText) : xhr.responseText;
                        resolve(res)
                    }else {
                        reject(xhr.status)
                    }
                }
            }
        })
    }
}