Ajax的四个步骤

Ajax 的实现一般需要实现四个步骤。

btn.onclick = () =>{
    const request = new XMLHttpRequest()
    //1.创建一个XMLHttpRequest对象
    request.open('GET/POST','URL')
    //2.调用对象的open方法
    request.onreadystatechange = ()=>{
        if (
          request.readyState === 4 &&
          request.status >= 200 &&
          request.status < 300
        ){
            console.log(request.response)
        }else{
            //报错
        }
    }
    //3.监听Ajax请求是否成功
    requset.send()
    //4.调用对象的send方法发送请求
}

当我们使用Ajax加载css，html时，request.response获取到的都是string，需要使用innerHTML来将其插入到元素中，而XML则只需要获取其request.responseXML即可。

JSON

JSON 是在js的基础上简化而来的一门语言，他拥有体积小，速度快等优点，所以我们经常需要使用到他。

JSON支持的数据类型只有6种。

string
number
boolean
null
object
array

并且，他不支持函数和变量。

我们通过Ajax也可以调用到JSON，还可以通过JSON的一些接口，将其转换为对于的js数据类型。

JSON.parse()

将JSON语法的字符串转换成js对应类型的数据

我们可以使用try catch 捕获错误

let x;
      try {
        x = JSON.parse(request.response);
      } catch (error) {
        console.log("JSON.parse(request.response)转换错误");
        console.log(error);
      }

JSON.stringify() 是 JSON.parse() 的逆运算。

实现一个简单的加载分页

第一页我们可以通过拼接字符串的方式实现静态加载，之后可以通过Ajax实现动态加载。

简述Ajax

Ajax的四个步骤

JSON

实现一个简单的加载分页