AJAX 小知识上个世纪90年代，几乎所有的网站都由HTML页面实现，服务器处理每一个用户请求都需要重新加载网页。这样

1.如何发请求？

我们知道有几种方式可以发请求，但是都有其局限性，如下：

用 form 可以发请求，但是会刷新页面或新开页面

用 a 可以发 get 请求，但是也会刷新页面或新开页面

用 img 可以发 get 请求，但是只能以图片的形式展示

用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示

用 script 可以发 get 请求，但是只能以脚本的形式运行

思考：有没有这样的发请求的方式？

get、post、put、delete 请求都行

想以什么形式展示就以什么形式展示

2.AJAX 的出现

AJAX 即 “Asynchronous JavaScript and XML”（异步的 JavaScript 与 XML 技术)

2.1 AJAX 的历史

服务器之殇

上个世纪90年代，几乎所有的网站都由HTML页面实现，服务器处理每一个用户请求都需要重新加载网页。这样的处理方式效率不高。用户的体验是所有页面都会消失，再重新载入，即使只是一部分页面元素改变也要重新载入整个页面，不仅要刷新改变的部分，连没有变化的部分也要刷新。这会加重服务器的负担。
异步加载和 iframe 方案

这可以用异步加载来解决。1995年，JAVA语言的第一版发布，随之发布的的 Java applets（JAVA小程序）首次实现了异步加载。浏览器通过运行嵌入网页中的 Java applets与服务器交换数据，不必刷新网页。1996年，Internet Explorer 将 iframe元素 加入到HTML，支持局部刷新网页。
XMLHttp 的出现

1998年前后，Outlook Web Access 小组写成了允许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件。该组件原属于微软Exchange Server，并且迅速地成为了Internet Explorer 4.0[2]的一部分。

部分观察家认为，Outlook Web Access是第一个应用了Ajax技术的成功的商业应用程序，并成为包括 Oddpost 的网络邮件产品在内的许多产品的领头羊。但是，2005年初，许多事件使得Ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通讯，如Google讨论组、Google地图、Google搜索建议、Gmail等。

Ajax这个词由《Ajax: A New Approach to Web Applications》一文所创，该文的迅速流传提高了人们使用该项技术的意识。另外，对Mozilla/Gecko的支持使得该技术走向成熟，变得更为简单易用。
总结为：

IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest，并被纳入 W3C 规范

2.2 AJAX 的优缺点

优点

（1）实现局部更新：

就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。

（2）仅依赖于浏览器和 JavaScript：

Ajax 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。就像 DHTML 应用程序那样，Ajax 应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着 Ajax 的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持 JavaScript 的用户提供替代功能。
缺点

（1）浏览器的兼容问题：

Ajax 在本质上是一个浏览器端的技术，首先面临无可避免的第一个问题即是浏览器的兼容性问题。各家浏览器对于 JavaScript／DOM／CSS 的支持总有部分不太相同或是有Bug，甚至同一浏览器的各个版本间对于 JavaScript／DOM／CSS 的支持也有可能部分不一样。这导致程序员在写Ajax应用时花大部分的时间在调试浏览器的兼容性而非在应用程序本身。因此，目前大部分的Ajax链接库或开发框架大多以js链接库的形式存在，以定义更高阶的 JavaScript API、JavaScript 对象（模板）、或者 JavaScript Widgets 来解决此问题。

（2）局部刷新带来的问题：

Ajax 技术之主要目的在于局部交换客户端及服务器之间的数据。如同传统之主从架构，无可避免的会有部分的业务逻辑会实现在客户端，或部分在客户端部分在服务器。由于业务逻辑可能分散在客户端及服务器，且以不同之程序语言实现，这导致 Ajax 应用程序极难维护。如有用户接口或业务逻辑之更动需求，再加上前一个JavaScript/DOM/CSS 之兼容性问题，Ajax 应用往往变成程序员的梦魇。

3.AJAX 的使用

3.1 AJAX的原理

使用 XMLHttpRequest 发请求
服务器返回 XML 格式的字符串
JS 解析 XML，并更新局部页面

3.2 AJAX 的目的：

使用 js 发请求，使用 js 处理返回的响应。

3.3 请用原生 JS写出一个AJAX请求：

<body>
  <button id="button">点我</button>
  <script>
    button.addEventListener('click', (e) => {
      let request = new XMLHttpRequest()
      request.open(method, address)
      request.send()
      reqeust.onreadychange = () => {
        if (request.readyState === 4) {
          if (request.status >= 200 && reuest.status < 300) {
            let string = responseText
            let object = window.JSON.parse(string)
          }
        }
      }

    })
  </script>
</body>

分析：

let request = new XMLHttpRequest() 创建一个AJAX实例
request.open(method,address) 初始化请求，一般有3个参数，如果没有设置就是默认值 request.open(method,url,async)
- method ：请求的类型；GET 或 POST
- url ：文件在服务器上的位置
- async ：true（异步）或 false（同步）
request.send() 发送请求(如果参数为String，只能为 post请求)

reqeust.onreadychange() 监听 readystate 的变化，每当 readyState 改变时，就会触发 onreadystatechange 事件。

request.readyState XMLHttpRequest 的状态。从 0 到 4 发生变化

值	readyState 状态	意义
0	`UNSENT`(未打开)	`open()`方法还未被调用，请求未初始化
1	`OPENED` (未发送)	`open()`方法已经被调用，服务器连接已建立
2	HEADERS_RECEIVED (已获取响应头)	`send()`方法已经被调用, 响应头和响应状态已经返回.请求已接收
3	LOADING (正在下载响应体)	响应体下载中; `responseText`中已经获取了部分数据.
4	DONE (请求完成)	整个请求过程已经完毕.