ajax学习笔记

/*
Ajax
关键名词
1.同步(容易阻塞)
2.异步(多个同时进行,互相之间没有关系)
3.进程(单独进行的程序叫做进程)
4.线程(进程里面的最小计量单位)
Ajax概述
ajax是一种异步通信技术,利用网络请求 请求对应的数据工具(http,https)
相当于异步的js和异步的xml
ajax入门
核心对象 xmlHttpRequest
*/

    //关键请求对象
    var request = new XMLHttpRequest()
    var request1 = new XMLHttpRequest()
    //打开请求的地址 指定请求方式
    request.open('GET', 'http://jsonplaceholder.typicode.com/todos')
    request1.open('GET', 'http://jsonplaceholder.typicode.com/todos')
    //发送请求
    request.send()
    request1.send()
    //事件监听 请求状态的改变
    request.onreadystatechange = function () {
        if (request.readyState == 4) {
            // console.log(request.responseText);
            var jsonStr = request.responseText
            var jsonObj = JSON.parse(jsonStr)
            console.log(jsonObj);
        }
    }
    //事件监听 请求状态的改变
    request1.onreadystatechange = function () {
        if (request1.readyState == 4) {
            var jsonStr = request.responseText
            var jsonObj = JSON.parse(jsonStr)
            console.log(jsonObj);
        }
    }

var ul = document.querySelector(‘ul’)
var btns = document.querySelectorAll(‘button’)
//默认的页面为第一页
var nextPage = 1
btns[0].onclick = function () {
loadData()
}
btns[1].onclick = function () {
loadData({
typeid: 1
})
}
btns[2].onclick = function () {
loadData(
{
typeid: 2
}
)
}
btns[3].onclick = function () {
loadData(
{
current: nextPage, //当前页
limit: 5 //页面数据个数
}
)
}
btns[4].onclick = function () {
loadData(
{
current: nextPage,
limit: 5
}
)
}

    function loadData(params) {
        // {typeid:2} ==> typeid=2 将传入的对象做拆分
        let paramstr = ""
        for (key in params) {
            if (paramstr == '') { //第一次前面要带问号 ?typeid=2
                paramstr += '?' + key + "=" + params[key]
            } else { //后面的使用&符号连接 &typeid=2
                paramstr += "&" + key + "=" + params[key]
            }
        }
        //创建一个请求对象
        var request = new XMLHttpRequest()
        //打开请求的地址 并指定请求方式 get请求传参使用?做拼接 &做连接
        request.open('GET', 'http://10.41.12.7:8080/shop' + paramstr)
        //发送请求
        request.send()
        //监听请求状态改变 接收对应的数据
        request.onreadystatechange = function () {
            //判断请求是否完成 响应是否结束 request.readyState 判断状态码 request.status(200 表示成功)
            //readyState 只存在于ajax里面 
            //0 请求未开始 1 请求准备发送 2 请求已经发送 3 请求已经结束 响应中 4 请求已经结束 响应结束
            //request.status 状态码 （只要是http请求都有状态码）
            //100 - 599
            //1开头表示成功但是需要你做下一部操作 2表示成功 3表示重定向 
            //4表示客户端错误（跟前端有关系） 5表示服务器错误（跟后端有关系）
            if (request.readyState == 4 && request.status == 200) {
                //request.responseText 拿到响应的文本
                //request.responseXML 拿到响应的xml
                var shops = JSON.parse(request.responseText).data.list //将数据转为对象 存储
                //获取下页页码 重新设置值
                nextPage = JSON.parse(request.responseText).data.nextPage
                console.log(shops);
                console.log(JSON.parse(request.responseText));
                //将数据渲染到页面
                shops.forEach(({ imgurl, info, pic, oldpic, count }) => {
                    ul.innerHTML += `
                    <li class="item">
                        <img src="${imgurl}" alt="" class="pic">
                        <div class="info">${info}</div>
                        <div>
                            ￥<span class="newPrice">${pic}</span>
                            <del class="oldPrice">￥${oldpic}</del>
                        </div>
                        <div class="bottom">
                            <div class="count">月销 ${count}+</div>
                        </div>
                    </li>
                    `
                });
            }
        }
    }