简述什么是Ajax及其作用,简述Ajax

Ajax 即 'Asynchronous Javascript And XML' , 他可以在不重新加载整个页面的情况下对页面的某些部分局部刷新。

简单的来说,Ajax就是 使用JS发送请求和接收响应。

当然，在使用Ajax之前，我们需要一个路由。

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实现动态加载。