AJAX

全称Async JavaScript And XML，作用简单概括一下，就是使用JS发送请求和接收响应。

AJAX的通用四步骤

创建一个HttpRequest（全称是XMLHttpRequest）对象。
调用该对象的open方法。
监听对象的onload&onerror事件。
调用对象的send方法，即发送请求。

//step1
const request = new XMLHttpRequest();
//step2
request.open('method',url);
//open方法实际可接受五个参数，不过一般只用前两个就行了
//step3
request.onload = () =>{
	成功时调用
};
request.onerror = () =>{
	失败时调用
}
//step4
request.send()

例子来了，如果我想请求CSS：

const request = new XMLHttpRequest();
request.open('GET','./style.css');
request.onload = () =>{
	const style = document.createElement('style')
	style.innerHTML = request.response
//此处的request.response就是request请求得到的内容。
	document.head.appendChile(style)
};
request.onerror = () =>{
	console.log('请求失败了')
}
request.send()

加载JS/HTMl文件同理，修改open方法路径参数、将onload中的内容变成创建script/div标签，赋予内容，插入页面中就行了。

不过出现了一个问题。

假设我open方法的路径参数写错了呢？

它居然没有触发onerror而是请求到了错误的内容（例如路径错误时的404页面），此时request.response就变成了404页面的内容，这个内容被写在标签内插入页面了。。。

导致这个问题的原因是onerror和AJAX相性不好，onerror方法是先于AJAX出现的，最早用与处理图片、css\js文件等请求失败的情景，当时并没有想到会去处理AJAX。

那么如何解决这个问题？

--建议改用onreadystatechange，监听XMLHttpRequest.readyState属性。

该属性有五个值对应五个状态，一个XMLHttpRequest代理总是处于这五个状态中的一种。

值	状态	描述
0	UNSENT	代理创建但未调用open()
1	OPENED	open()已经被调用
2	HEADERS_RECEIVED	send()已经被调用且头部和状态已可获得
3	LOADING	下载中，responseText已经包含部分数据
4	DONE	下载已完成

（更多详细内容可以查看MDN，戳我）

用上面请求css的代码举个例子：

const request = new XMLHttpRequest();
request.open('GET','./style.css');
request.onreadystatechange = () =>{
  if(request.readystate === 4){
    if(request.status >= 200 && request.status < 300){
//status就是HTTP状态码
      const style = document.createElement('style')
      style.innerHTML = request.response
      document.head.appendChile(style)
    }else{
      alert('加载失败')
    }
  }
};
request.send()

加载XML & JSON

XML

const request = new XMLHttpRequest();
request.open('GET','./xxx.xml');
request.onreadystatechange = () =>{
  if(request.readystate === 4){
    if(request.status >= 200 && request.status < 300){
      const dom = request.responseXML;
//request.responseXML专门用于获取XML内容
      const text = dom.getElementsByTagName('warning')[0].textcontent
//getElementsByTagName获取到的是一个数组，所以需要[0]来选中第一个。
      console.log(text)
    }else{
      alert('加载失败')
    }
  }
};
request.send()

JSON

在XML出现两年不到，JSON就出现并替代了它。

const request = new XMLHttpRequest();
request.open('GET','./xxx.json');
request.onreadystatechange = () =>{
  if(request.readystate === 4){
    if(request.status >= 200 && request.status < 300){
      const object = JSON.parse(request.response)
//JSON.parse将参数符合语法的字符串转换为JS对象或其他东西比如bool
//解析出对象后就想怎么操作怎么操作了。
    }else{
      alert('加载失败')
    }
  }
};
request.send()

复习：JS三座大山-AJAX

AJAX

AJAX的通用四步骤

加载XML & JSON

XML

JSON