ajax实现步骤

ajax 的请求步骤

创建对象 配置请求路径和方式 获取数据 将获取的数据渲染到页面

---

<script>
    // ajax 发送请求
    // 1. 创建请求对象
    let xhr = new XMLHttpRequest();
    // 2.配置请求路径 和请求方式
    xhr.open("get", "https://3g.163.com/touch/reconstruct/article/list/BA10TA81wangning/10-10.html");
    // 监听请求状态变化
    xhr.onreadystatechange =function(){
        if(xhr.readyState==4 && xhr.status==200){
            // console.log(xhr.responseText);//响应数据
            // console.log(xhr.responseText.slice(9,-1));
            // console.log(JSON.parse(xhr.responseText.slice(9,-1)));
            // 3.获取数据
            let data = JSON.parse(xhr.responseText.slice(9,-1)).BA10TA81wangning
            console.log(data);
            //4. 将请求来的数据 渲染到页面上 
               // 1、获取dom节点
               let box = document.getElementById("box")
            // 2、组装html字符串
            // box.innerHTML = '<h2>22</h2>'
            let htmlstr = ``
            // 遍历对象数组时 element 代表其中某一个对象
            data.forEach(element => {
                htmlstr +=`<div class="item">
                <div class="title">
                    ${element.title}
                    <span>${element.source}</span>
                </div>
                <div class="img">
                    <img src="${element.imgsrc}" alt="">
                </div>
    
            </div>`
            });
            console.log(htmlstr);
            box.innerHTML = htmlstr;

        }
    }
    xhr.send();

</script>

  // ajax的请求步骤：
    // 1、创建XMLHttpRequest对象
    // 2、配置请求信息(请求方式，请求路径)
    // 3、监听状态变化
    // 4、发送请求

1、实现步骤

想要实现ajax需要四个步骤

• 创建xhr对象
• 配置请求信息
• 监听状态变化
• 发送请求

属性解析：

readyState 属性存留 XMLHttpRequest 的状态。 0 1 2 3 4

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

responseText属性 响应过来的数据

属性	描述
onreadystatechange	定义了当 readyState 属性发生改变时所调用的函数。
readyState	保存了 XMLHttpRequest 的状态。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 正在处理请求4: 请求已完成且响应已就绪
status	200: "OK"403: "Forbidden"404: "Page not found"如需完整列表，请访问 Http 消息参考手册
statusText	返回状态文本（例如 “OK” 或 “Not Found”）

其中 axios 是对其的封装

window.addEventListener('load', function () {


    // 获取dom节点  其中 querySelectorAll 返回的是数组 而getbyid 是返回的是一个节点对象
    let con = this.document.querySelectorAll(".con")[0];
    console.log(con);
    // 发送接口  拿数据 渲染页面
    axios.get("https://cnodejs.org/api/v1/topics")
        .then(res => {
            console.log(res);
            if (res.status == 200) {
                console.log(res.data.data);
                let list = res.data.data;
                // 将数据渲染到页面
                let htmlstr = "";
                list.forEach(item => {
                    htmlstr += ` 
                <div class="item">
                <img src="${item.author.avatar_url}" alt="">
                <span class="count">${item.reply_count}</</span>
                <span class="count1">${item.visit_count}</span>
                <div class="left">
                    ${item.top?`<div class="top">置顶</div>`:`<span></span>`}
                    <div class="title">${item.title}</div>
                </div>
            </div>`

                });
                con.innerHTML = htmlstr;

            }
        })
})

        </div>`

            });
            con.innerHTML = htmlstr;

        }
    })

})