AJAX学习记录，原生AJAX，XML，AJAX的优点，AJAX的缺点，HTTP协议请求报文和响应报文的语法，安装express，创建一个服务端，点击按钮div中呈现响应体，使用axios发送ajax

原生AJAX

AJAX 全称为Asynchronous Javascript And XML。就是异步的JS和XML。通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

XML

可扩展标记语言。XML被设计用来传输和存储数据。XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全部都是自定义标签，用来表示一些数据。

AJAX的优点

（1）可以无需刷新页面而与服务器端进行通信。
（2）允许你根据用户事件来更新部分页面内容。

AJAX的缺点

（1）没有浏览历史，不能回退。
（2）存在跨域问题（同源）
（3）SEO不友好（查看源代码中无法查找到）

HTTP

HTTP全称为hypertext transport protocol 协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

请求报文：

重点格式与参数：
行：POST /URL HTTP协议版本
头： Host:值 Cookie: 值Content-type:值 User-Agent:值等等
空行：
体：如果是GET请求体为空，如果是POST可以不为空

响应报文：

行：HTTP协议版本 响应状态码 响应状态字符串
头： Content-type:值 Content-length:值 Content-encoding:值等等
空行：
体：HTML语法内容

1、安装express

2、创建一个服务端

3、在客户端打开

端口释放

Ctrl+c
点击按钮div中呈现响应体：

//获取button元素
    const btn = document.getElementsByTagName("button")[0];
    const result = document.getElementById("result");
    //绑定事件
    btn.onclick = function(){
        //1、创建对象
        const xhr = new XMLHttpRequest();
        //2、初始化 设置请求方法和 url
        xhr.open('GET','http://127.0.0.1:8000/server');
        //3、发送
        xhr.send();
        //4、事件绑定 处理服务端返回的结果
        //on 当什么时候 readystate 是 xhr 对象中的属性，表示状态
        // 0(初始化) 1(open方法调用完毕) 2(send方法调用完毕) 3(服务端返回了部分结果) 4(服务端返回了所有的结果)
        //change 改变的时候触发
        xhr.onreadystatechange = function () {
            //判断(服务端返回了所有的结果)
            if(xhr.readyState === 4){
                //判断响应状态码 200 404 403 401 500
                //2开头都表示成功
                if(xhr.status >= 200 && xhr.status <= 300){
                    //处理结果 行 头 空行 体
                    //1、响应行
                    console.log(xhr.status);//状态码
                    console.log(xhr.statusText);//状态字符串
                    console.log(xhr.getAllResponseHeaders());//响应头
                    console.log(xhr.response);//响应体

                    //设置result 的文本
                    result.innerHTML = xhr.response;
                }else {
                }
            }
        }
    }

设置url参数：用？隔开，=赋值，&分隔
例：http://127.0.0.1:8000/server?a=10&c=100
POST请求体的参数设置：xhr.send("a=100&c=10");
设置请求头：xhr.setRequestHeader(“请求名”,“值”);
例：

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

响应JSON数据的方式1

//手动数据转换
let data = JSON.parse(xhr.response);
console.log(data);
result.innerHTML = data.name;

方式2

//设置响应体数据的类型
xhr.responseType = 'json';
...
console.log(xhr.response);
result.innerHTML = xhr.response.name;

IE缓存问题解决

 xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());//获取当前的时间戳

设置延时响应

//延时响应
app.get('/delay',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    setTimeout(()=>{
        //设置响应体
        response.send('延时响应');
    },3000)
});

超时回调和网络异常回调

//超时设置 2s
        xhr.timeout = 2000;
        //超时回调
        xhr.ontimeout = function(){
            alert("请求异常，请稍后再试！");
        };
        //网络异常回调
        xhr.onerror = function(){
            alert("您的网络似乎出了一些问题！");
        };

ajax请求手动发送和手动取消

let x =null;
    //获取元素对象
    const btns = document.getElementsByTagName("button");
    btns[0].onclick = function () {
        x = new XMLHttpRequest();
        x.open("GET","http://127.0.0.1:8000/delay")
        x.send();
    }
    //abort
    btns[1].onclick = function () {
        x.abort();
    }

解决重复请求问题

    let x =null;
    //获取元素对象
    const btns = document.getElementsByTagName("button");
    //标识变量
    let isSending = false;//true表示正在发送
    btns[0].onclick = function () {
        //判断标识变量
        //如果正在发送，则取消该请求，创建一个新的请求
        if (isSending)x.abort();
        x = new XMLHttpRequest();
        //修改标识变量的值
        isSending = true;
        x.open("GET","http://127.0.0.1:8000/delay")
        x.send();
        x.onreadystatechange = function () {
            //当发送结束时
            if(x.readyState === 4){
                //修改标识变量
                isSending = false;
            }
        }
    }

使用axios发送ajax请求

        app.all('/axios-server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    response.setHeader("Access-Control-Allow-Headers","*");
    setTimeout(()=>{
        //设置响应体
        response.send('延时响应');
    },6000)

});

//GET请求
        axios.get('http://127.0.0.1:8000/axios-server',{
            //url 参数
            params:{
                id:100,
                vip:7
            },
            //请求头信息
            headers:{
                name:'hhh'
            }
        }).then(value => {
            console.log(value);
        });

 //POST请求
        axios.post('http://127.0.0.1:8000/axios-server',{
            //请求体
            username:'lw',
            password:'lww'
        },{
            //url 参数
            params:{
                id:100,
                vip:7
            },
            //请求头信息
            headers:{
                name:'hhh'
            }
        });

axios函数发送请求

axios({
            //请求方法
            method:"POST",
            //url
            url:"http://127.0.0.1:8000/axios-server",
            //url参数
            params:{
                vip:10,
                level:30
            },
            //头信息
            headers:{
                a:100,
                b:200
            },
            //请求体信息
            data:{
                uesername:"lw",
                password: "lww"
            }
        }).then(response =>{
            console.log(response);
        })