Ajax笔记整理 超详细！！

什么是Ajax？

        Ajax(Asynchronous JavaScript and XML)是一种构建交互式网页应用的Web开发技术。它是指在不需要重新加载整个网页的情况下，可以与服务器进行数据交换和通信，从而实现动态更新网页内容的技术。

        Ajax 的主要实现方式是使用 JavaScript 向服务器发送一个异步请求，请求服务器上的数据。服务器响应后，JavaScript 再对这些数据进行处理，并仅更新网页上的部分内容。这样，用户在操作网页时，网页的响应速度和性能都会得到很大提升。

Ajax的几种请求方式：

GET请求：

        Ajax中最基本的请求方式。在GET请求中，数据通过URL传递，参数附加在URL之后。由于GET请求的数据在URL中暴露，因此安全性较差，且数据量有限（因为URL的长度限制）。

POST请求：

        与GET请求不同，POST请求将数据包装在请求体中，这样就比GET请求更加安全，且可以传输更多的数据。在POST请求中，数据不会出现在URL中。

PUT请求：

        用于更新服务器上的资源。这个请求必须包含一个有效的HTTP PUT请求体，且与请求URL关联的资源可以被修改。

DELETE请求：

        用于删除服务器上的资源。这个请求的作用是请求服务器删除与请求URL关联的资源。

HEAD请求：

        用于请求网页的元数据，比如网页的标题、状态代码等，与GET请求类似，但不返回网页内容。

OPTIONS请求：

        用于获取服务器支持的HTTP请求方法，也可以用来检查服务器的功能性。

一、原生Ajax

1. 创建XMLHttpRequest类型的对象【创建】 

2. 准备发送，打开与一个网址之间的连接【准备】 

3. 执行发送动作【执行】 

4. 指定xhr状态变化事件处理函数【监听】

        // 1 创建
        var xhr = new XMLHttpRequest()
        // 2 准备
        // xhr.open(请求方式，请求地址)
        xhr.open('GET', 'https://api.uomg.com/api/rand.qinghua?format=json')
        // 3 发送
        xhr.send()
        // 4 监听
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4) {
            // 接口调用成功，数据成功返回
                console.log(JSON.parse(this.responseText).content)
             }
         }

xmlhttprequst的方法

1. open(method, url, async)：打开一个网络请求。
2. send(data)：发送请求。
3. abort()：取消请求。
4. onreadystatechange：请求状态改变时触发的事件。
5. readyState：请求的状态
6. status：请求的HTTP状态码。
7. responseText：返回的文本数据。
8. responseXML：返回的XML数据。
9. responseJSON：返回的JSON数据。
10. withCredentials：是否携带Cookie进行请求。

open() 方法

open() 方法语法结构：

        open(method, url[, async, user, password])

参数说明：

        method：请求方法，get、post、put、delete 等
        url：发送请求的 url
        async：是否异步交互
        user：用户名用于认证用途
        password：用户密码

send() 方法

        send() 方法将请求送往服务器。

二、 jquery的ajax

        $(function () {
            $.ajax({
                type: "GET", // 请求方式
                url: "https://api.uomg.com/api/rand.qinghua", // 请求地址
                data: {
                    format: 'json'
                }, // 请求参数
                dataType: "json", // 数据类型为json
                success: function (data) {
                    console.log(data.content)
                } // 成功的回调
            });
        })

三、axios的ajax

          axios({
              method: 'post', // 请求方式
              url: 'https://api.uomg.com/api/rand.qinghua', // 请求地址
              data: { // 请求参数
                  format: 'json'
              }
           }).then(function (response) {
              console.log(response.data.content);
              console.log(box, btn)
              box.innerHTML = response.data.content
           })

四、服务器的HTTP状态

200——服务器已成功处理了请求
304——请求成功，但文件未修改
400——执行错误，如语法错误
401——表示发送的请求授权失败
404——(未找到)服务器找不到请求网页
500——(服务器内部错误)服务器遇到错误，无法完成请求