Ajax(一)_xhr.addeventlistener-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_53107845/article/details/122743151

ajax的概念：用来做数据交互使用的

ajax的原理：通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后通过

JavaScript操作数据，从而达到更新页面的效果

简答来说：用于在后台与服务器交换数据，达到局部刷新的效果

ajax的核心：XmlHttpRequest对象

ajax的特点：异步加载，局部刷新
- 同步：一次一个，前一个没执行完，后一个也不能开始
- 异步：一次一堆，前一个没执行完，后一个也能开始

ajax的好处：
1.最大的点就是页面无刷新，在页面与服务器通信时，用户体验会非常好，节约带宽、节约资源
2.在使用异步请求时，具有更加迅速的响应能力，不需要打断用户操作

注意：涉及到ajax的访问，千万不能使用文件协议的方式打开2

创建XmlHttpRequest对象 ---> 相当于创建了一个http请求的对象，主要用于和服务器交换数据
```
var xhr = new XMLHttpRequest();
```
open(规定请求的类型get/post, URL, 是否异步请求（默认是异步）) ---> 相当于与服务器建立了一个特定的端口的链接
```
xhr.open('get', './test.txt');    //get类型 文件路径为./test.txt
```

将请求发送到服务器开始请求

 // send(string --> 只能用在post方式请求的时候)
xhr.send();

等待响应，需要使用事件机制去通知他,这个事件只要状态发生了改变就会触发

        xhr.onreadystatechange = function() {
            // console.log(111);// 触发了三次
            console.log(this.readyState);// 状态的数值：2/3/4

            // 判断响应已经就绪时，就可以拿到我们想要的数据了
            if(this.readyState != 4) return;// 当函数体只有一行时，可以省略大括号

            console.log(this.responseText);// 拿到响应的文本
            document.getElementsByTagName('body')[0].innerHTML = this.responseText;
        }

readyState的四种状态

readyState的状态变化

        var xhr = new XMLHttpRequest();
        console.log(xhr.readyState);// 0：请求未初始化（还没有调用send()方法）

        xhr.open("get", "./01.ajax的基本概念.html");
        console.log(xhr.readyState);// 1：服务器连接已经建立（已调用send()方法，正在发送请求）

        xhr.send();
        // console.log(xhr.readyState);   //也是1

        xhr.addEventListener("readystatechange", function() {
            console.log(xhr.readyState);// 2, 3, 4
            switch(xhr.readyState) {
                case 2:// 请求已接收
                    // 获取响应头
                    console.log(this.getAllResponseHeaders());// 所有响应头
                    console.log(this.getResponseHeader("date"));// 其中一个
                    // 获取响应的文本内容
                    console.log(this.responseText);// 没有
                    break;
                case 3:// 请求处理中
                    // 获取响应的文本内容
                    console.log(this.responseText);
                    // 但是有可能不完整，不保险
                    break;
                case 4:// 整个响应的报文已经完整的下载下来了
                    console.log(this.responseText);
            }
        })

控制台network中可以找到请求头,请求方式,请求地址,响应头等内容

        // 怎么遵循http协议：就是要设置请求头和请求体
        var xhr = new XMLHttpRequest();

        xhr.open("post", "./test.txt");

        // 设置请求头：一般都是urlencode格式，都会设置application/x-www-form-urlencoded
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        // 设置请求体
        xhr.send("username=Cherry&password=123456");// 发送要传过去的数据

        xhr.addEventListener("readystatechange", function() {
            if(this.readyState == 4 && this.status == 200) {
                console.log(this.responseText);
            }
        })

用get请求数据

json 就是一种格式一种数组里储存的对象每个对象都有自己的属性

上面就是一种json文件的格式

JSON.parse() ---> 将json字符串转化为json对象

JSON.stringify() ---> 将json对象转化为json字符串

eval()函数也可以将JSON对象解析为对象，写法不一样 eval("(" + data + ")");

用post发送请求

get：一般用于根据参数获取数据

post：相对更安全，一般用户信息提交，表单提交，无限制大小

一种用post发送请求到"http://www.liulongbin.top:3005/api/addproduct"端口的例子 (可能现在已经废弃)

<div>
        添加品牌数据：
        <input type="text" id="product">
        <br>
        <button id="btn">确定</button>
    </div>
    <script>
        var inp = document.getElementById("product");
        var btn = document.getElementById("btn");

        btn.onclick = function() {
            var addName = inp.value; 
            var xhr = new XMLHttpRequest();
            xhr.open("post", "http://www.liulongbin.top:3005/api/addproduct");
            // 设置请求头
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send("name=" + addName);
            xhr.addEventListener("readystatechange", function() {
                if(this.readyState != 4) return;
                console.log(this.responseText);
            })
        }