时代背景

浏览器和服务器交互模式web1.0

在AJAX未出现之前，浏览器想从服务器获得资源(注意是获取资源)会经过如下一个过程

浏览器发起请求
服务器接到请求响应给你HTML文档
浏览器收到资源，刷新页面
加载获得的资源

上面请求要么会导致页面刷新，性能差(卡死)要么只能请求特定类型的文件

浏览器和服务器交互模式web2.0

1999年，微软发布 IE 5 ，定义了一个私有接口 ActiveXObject(“Microsoft.XMLHTTP”)它允许JavaScript脚本向服务器发起HTTP请求。
2004年，Gmail发布和2005年Google Map发布，才引起广泛重视。
2005年，一个叫Jesse James Garrett的人提出了一个新术语——AJAX，它是一系列技术的组合体。
后来其他浏览器也跟进了，提供了类似的接口XMLHttpRequest，功能类似，下文会说到。
最终 W3C 标准也接纳了 XMLHttpRequest。

AJAX 是什么

AJAX即“Asynchronous JavaScript and XML”（非同步的JavaScript 和 XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。
AJAX 就是用 JS 向服务端发起一个请求，并获取服务器返回的内容。它可以阻止页面整体刷新，只是动态响应用户的操作，快速显示到局部。

如何实践

简单来说只需要四个步骤
1. 创建一个对象

var request = new XMLHttpRequest()

监听请求成功后的状态变化

request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
 console.log(request.responseText)
}
};
//第三行的 request.responseText 就是服务器返回的内容了（默认是字符串）

设置请求参数
```
request.open("GET", "filename", true);
```
发送请求
```
request.send();
```

状态值与状态码

在ajax时间运行过程中，对于访问XMLHttpRequest不是一次就完成的，而是经历多种状态后获取的结果
0：初始化，XMLHttpRequest对象还没有完成初始化
1：载入，XMLHttpRequest对象开始发送请求
2：载入完成，XMLHttpRequest对象的请求发送完成
3：解析，XMLHttpRequest对象开始读取服务器的响应
4：完成，XMLHttpRequest对象读取服务器响应结束

JSON

后来一个美国程序员道格拉斯·克罗克福特发明了JSON，解决了上面的问题，这货还写了一本蝴蝶书JavaScript语言精粹，还发明了一个JS校验器 ——JSLint。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成.JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。

以上是JSON官网的简介，可以看出它是一门全新的语言，不是JavaScript的子集。
JSON很简单，数据类型和JS有点不同的地方。
JavaScriptJSON
string “string” 必须写双引号
number 支持科学计数法
object{“object”: “name”} 必须双引号
null 没有undefined
boolean直接写true false
arrayarray

JSON.parse

浏览器的全局对象window上有JSON对象，直接使用window.JSON.parse(string)
将符合JSON语法的字符串转换成JS对应类型的数据
JSON字符串=> JS数据
由于JSON只有六种类型，
所以转成的数据也只有6种
如果不符合JSON语法，则直接抛出一个Error对象
一半用try catch捕获错误

JSON.stringify

是JSON.parse的逆运算
JS数据=> JSON字符串
由于JS的数据类型比JSON多，所以不一定能成功
如果失败，就抛出一个Error对象

简易封装AJAX

function ajax(url, success) {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          success(xhr.responseText);
        }
      }
    };
    xhr.send();
  }