AJAX原理

AJAX是什么

AJAX = Async JavaScript And XML
可以说用JS发请求和收响应就是AJAX的全部内容
AJAX是浏览器上的功能

• 浏览器可以发请求，收响应
• 浏览器在window上加了一个XMLHttpRequest函数
• 用这个构造函数（类）可以构造出一个对象
  JS通过它来发请求和收响应

利用AJAX来加载CSS、JS、HTML、XML、JSON

加载CSS

我们在加载CSS一般的方法为<link rel=stylesheet href="1.css"/>，我们也可以使用AJAX来进行加载。
步骤如下：

创建 HttpRequest 对象（全称是 XMLHttpRequest）
调用对象的 open 方法
监听对象的 onload & onerror 事件
调用对象的 send 方法（发送请求）
代码演示：

getCSS.onclick = () => {
const request = new XMLHttpRequest(); //创建HttpRequest对象
request.open("GET", "/style.css"); //调用对象的open方法
request.onload = () => {
console.log(request.response);
console.log("成功了");

const style = document.createElement("style"); //创建style标签
style.innerHTML = request.response; //填写style内容
document.head.appendChild(style); //插入到head标签里面
}; //监听对象的onload事件
request.onerror = () => {
console.log("失败了");
}; //监听对象的error事件
request.send(); //调用对象的send方法
};

加载JS

我们以前使用常规方法就是引入<script src="2.js"></script>，JS也是可以用AJAX来进行实现的。
步骤同CSS就不进行演示了。

加载HTML

以往我们在一个html中是不会加载一个html的，如果加载也是iframe标签。我们可以通过AJAX来对一个HTML进行一个轻量级的请求。
步骤大致与加载CSS相同，具体代码如下

getHTML.onclick = () => {
  const request = new XMLHttpRequest(); //还是创建HTTPRequest对象
  request.open("GET", "/3.html"); //调用open
  request.onload = () => {
    const div = document.createElement("div"); //创建一个div
    div.innerHTML = request.response; //在这个div里面写上内容
    document.body.appendChild(div); //放入body里面，以上三行是对于成功请求的事件进行能够加载的处理（轻量级请求）
  };
  request.onerror = () => {}; //onerror不是很好的适配AJAX
  request.send();
};

onreadystatechange

可以看到以上两段代码都出现了onload和onerror，但是onerror也不会写什么内容。我们可以用一个更高级的API叫做onreadystatechange()其中涉及到一个属性叫做readystate，它是用来表示这个XMLHttpRequest对象的一生的

const request = new XMLHttpRequest(); //此时readyState=0
request.open(); //此时readyState=1
request.send(); //此时readyState=2
//响应出第一个字节此时readyState=3
//完全下载完毕此时readyState=4

我们可以利用onreadystatechange()来对加载CSS进行改写

getCSS.onclick = () => {
const request = new XMLHttpRequest(); //创建HttpRequest对象,此时readystate是0
request.open("GET", "/style.css"); //调用对象的open方法，此时readystate是1
request.onreadystatechange = () => {
console.log(request.readyState);
if (request.readyState === 4) {
//下载完成，但不知道是否成功 成功一般为2xx 失败可能为4xx 5xx
if (request.status >= 200 && request.status <= 300) {
const style = document.createElement("style"); //创建style标签
style.innerHTML = request.response; //填写style内容
document.head.appendChild(style); //插入到head标签里面
} else {
alert("加载css失败");
}
}
};

加载XML

步骤如下：

创建 HttpRequest 对象（全称是 XMLHttpRequest）
调用对象的 open 方法
监听对象的 onreadystatechange 事件 ——在事件处理函数里操作 responseXML
调用对象的 send 方法（发送请求）
代码演示：

//给XML事件一个监听
getXML.onclick = () => {
const request = new XMLHttpRequest();
request.open("GET", "/4.xml");
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
const dom = request.responseXML; //DOM对象不止是用于HTMl也用于XML
const text = dom.getElementsByTagName("warning")[0].textContent; //注意要加[0]，否则将会获得一个伪数组
console.log(text.trim()); //trim一下可以消除回车
}
};
request.send();
};

---

小结

解析方法得到 CSS 之后生成 style 标签
得到 JS 之后生成 script 标签
得到 HTML 之后使用 innerHTML 和 DOM API
得到 XML 之后使用 responseXML 和 DOM API
不同类型的数据有不同类型的解析办法

---

加载JSON

什么是JSON

JavaScript Object Notation
JSON是一门语言，是一门标记语言，与HTML、XML、Markdown一样用来展示数据

截屏2022-07-30 12.27.28.png
JSON支持的数据类型：number,bool,string,null,object,array
字符串用双引号，没有undefined，不支持函数，不支持变量
加载JSON

创建 HttpRequest 对象（全称是 XMLHttpRequest）
调用对象的 open 方法
监听对象的 onreadystatechange 事件 ——在事件处理函数里使用 JSON.parse
调用对象的 send 方法（发送请求）
代码演示：

//给JSON事件一个监听
getJSON.onclick = () => {
const request = new XMLHttpRequest();
request.open("GET", "/5.json");
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
console.log(typeof request.response);
console.log(request.response);
const bool = JSON.parse(request.response); //SON 字符串 => JS 数据,由于 JSON 只有六种类型，所以转成的数据也只有6种
console.log(typeof bool);
console.log(bool);
}
};
request.send();
};

这里用到了JSON.parse，要用try catch 捕获错误

let object;
try {
object = JSON.parse(`{'name':'origami'}`);
} catch (error) {
console.log("出错了，错误详情是");
console.log(error);
object = { name: "noname" };
}
console.log(object);