AJAX 快速精通

一、什么是 AJAX？

在浏览器中向服务器发送异步请求，常用于前端对后端的服务器的请求以及调用，并不是一种语言，是一种方式、技术

优点：可以无刷新获取数据，根据事件调用的触发更新部分的页面内容

缺点：
1、无浏览历史记录，不可后退返回原数据
2、存在跨域问题（可以解决，详看第八点）

二、报文格式

请求报文
行： POST /s?ie=utf-8 HTP/1.1
头： HOST: xxx.com
        Cookie: name=xxx
        Content-type: xxxxxx
        User-Agent: xxx
空行
体： username=xxx&password=xxx

响应报文
行：HTTP/1.1 200 OK
头：Content-Type: Text/html;charset=utf-8
        Content-length: 2048
        Contentt-encoding: gzip
空行
体：httml格式体

三、什么是 XML？

XML是一种可扩展标记语言，被设计用来传输和存储数据

对比HTML

HTML是预定义标签
XML没有预定义标签，所有的标签都是自定义的

现在XML已经渐渐不用，更多的使用JSON。

四、express框架

和Vue框架类似，是一种后端框架，实际开发中常用的是 Vue + express 的框架搭建模式
参考：Express + Vue开发环境(前后端分离)

设置搭建express

1、基本框架格式：

//1、引入express
const { request, response } = require('express');
const express = require('express');

//2、创建应用对象
const app = express();

//3、创建路由规则
app.get('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX');
});

app.post('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX POST');
});

//4、监听端口启动服务
app.listen(8000, () => {
    console.log("已经启动，8000端口正在监听");
})

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>

<script>
    //1、创建对象
    const xhr = new XMLHttpRequest();

    //2、初始化 设置请求方法和 URL
    ## 绑定事件和基本请求设置（而且同时只能出现一个）
    xhr.open('GET', 'http://127.0.0.1:8000/server');

    //3、发送（里面的内容可以任意，合理运行即可）
    xhr.send();

    //4、事件绑定 处理服务器返回的结果
    // on when 当....时间
    // readystate 是 xhr 对象中的属性。表示状态 0 1 2 3 4
    //change 改变
    xhr.onreadystatechange = function () {
        //判断（服务器返回了所有的结果）
        if (xhr.readyState === 4) {
            //判断响应状态码 200 404 403 401 500
            //2xx 表示成功
            if (xhr.status >= 200 && xhr.status < 300) {
                //处理结果 行 头 空行 体
                //1、响应行
                console.log(xhr.status);//状态码
                console.log(xhr.statusText);//状态字符串
                console.log(xhr.getAllResponseHeaders());//所有响应头
                console.log(xhr.response);
            }
        }
    }
</script>

2、设置请求参数

3、请求 JSON 响应

在服务器设置数据
服务器封装形式同上

reponse.send只能接收字符串

后端数据：JSON.stringify(xxx) 转变成字符串
前端数据：let data = JOSN.parse(xxx.reponse) 再转变成数据形式（手动形式）
                  class.innerHTML = xhr.response;（自动转的形式）

前端绑定事件，调用即可，如下：

//1、获取元素对象
const result = document.getElementById("result");

//2、绑定事件
result.addEventListener("mouseover", function () {
    //1、创建对象
    const xhr = new XMLHttpRequest();

    //2、初始化
    xhr.open('POST', 'http://127.0.0.1:8000/server');

    //3、发送
    xhr.send();

    //4、事件绑定
    xhr.onreadystatechange = function () {
        //判断
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                //处理服务端返回的结果
                result.innerHTML = xhr.response;
            }
        }
    }
})

五、IE缓存问题

IE浏览器会自动缓存结果，下一次请求的时候会提取缓存在本地的数据而非新的数据，相对于时效性较高的开发，会有很大的影响

解决方法：
在端口请求后 + Pate.now() => 用当前时间戳来更新数据
eg. https://127.0.0.1:8000/ie?t='Date.now()'

六、请求超时与网络异常处理

1、超时处理

在方法内加个条件超时处理
例如，超过2s后自动取消请求

# 直接超时取消
xxx.timeout = 2000

# 超时回调函数
xxx.outimeout = function(){
	。。。
}

2、网络异常

当我们的网络出现异常，请求失败的时候

xxx.onerror = function(){
	。。。
}

七、手动请求取消

x.abort();

八、请求重复发送问题

当用户重复点击，重复请求的时候，容易出现服务器压力的增大，所以需要做个锁，阻止重复请求。

var btns = document.querySelectorAll('button')

//标识变量
let isSending = false;//使用一个标识来判断，是否正在发送AJAX请求

//2、绑定事件
btns[0].onclick = function () {
    if (isSending) {
        x.abort();
    }
    x = new XMLHttpRequest();
    //修改 标识变量的值
    isSending = true;
    x.open('GET', 'http://127.0.0.1:8000/server')
    x.send();
    x.onreadystatechange = function () {
        //判断
        if (x.readyState === 4) {
            //修改标识变量
            isSending = false;
        }
    }
}

九、axios

axios是一个工具库

1、使用

安装
npm install axios

直接访问

<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>

2、统一配置URL

3、用 axios 发送 AJAX 请求

以下是视频的具体例子，借助参考这个写法

服务器端：

app.all('/axios-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    const data = {
        name: 'ABC'
    }
    response.send(JSON.stringify(data));
});

前端绑定配置：

btns[2].onclick = function () {
    axios({
        //请求方法
        methods: 'POST',
        //URL
        url: '/axios-server',
        //URL参数
        params: {
            vip: 10,
            level: 30,
        },
        //头信息
        headers: {
            a: 100,
            b: 200,
        },
        //请求体参数
        data: {
            username: 'admin',
            password: 'admin',
        }
    }).then(response => {
        //响应状态码
        console.log(response.status);
    })
}

十、跨域

1、同源策略

这是一种浏览器的安全机制
请求发出的协议、域名、端口号与浏览器的三个信息一致，就是同源。

而违背同源策略的就是跨域（跨端口号）

2、解决跨域问题 JSONP（非官方方式）

一般文件调用，要么是本地地址访问，要么是引用
而有时候我们需要跨域去服务器访问其他地方的信息，这个时候就需要跨域

借助 sprict 标签的特性解决

sprict 本身就拥有跨域的能力，可以跨地址调用东西