1、AJAX

英文：Async JavaScript And XML
AJAX 的全部内容：用 JS 发请求和收响应

2、背景

AJAX 是浏览器上的功能
浏览器可以发请求，收响应
浏览器在 window 上加了一个 XMLHttpRequest 函数
用这个构造函数（类）可以构造出一个对象
JS通过它实现发请求，收响应

3、加载 CSS

以前使用
现在使用 AJAX 加载 CSS
四个步骤：
1. 创建 HttpRequest 对象（全称是 XMLHttpRequest）
2. 调用对象的 open 方法
3. 监听对象的 onload & onerror 事件
  - 专业前端会改用 onreadystatechande 事件
  - 在事件处理函数里操作 CSS 文件内容
4. 调用对象的 send 方法（发送请求）
readyState：
示例：
index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>AJAX</title>
    <!-- <link rel="stylesheet" href="style.css" /> -->
  </head>
  <body>
    <h1>
      AJAX demo1
      <span style="font-size: 24px;">hello <span id="myName"></span></span>
    </h1>

    <p>
      <button id="getCSS">请求 CSS</button>
      <button id="getJS">请求 JS</button>
      <button id="getHTML">请求 HTML</button>
      <button id="getXML">请求 XML</button>
      <button id="getJSON">请求 JSON</button>
      <button id="getPage">请求下一页</button>
    </p>

    <div>
      {{page1}}
    </div>
    <script src="/main.js"></script>
  </body>
</html>

main.js：

getCSS.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/style.css"); // readyState = 1
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status < 300) {
        console.log(request.response);

        // 创建 style 标签
        const style = document.createElement("style");
        // 填写 style 内容
        style.innerHTML = request.response;
        // 插到 head 中
        document.head.appendChild(style);
      } else {
        alert("CSS 加载失败");
      }
    }
  };
  request.send(); //readyState = 2
};

4、加载 JS

以前使用
现在使用 AJAX 加载 JS
四个步骤：
1. 创建 HttpRequest 对象（全称是 XMLHttpRequest）
2. 调用对象的 open 方法
3. 监听对象的 onreadystatechande 事件
  - 在事件处理函数里操作 JS 文件内容
4. 调用对象的 send 方法（发送请求）
示例:

// 请求 JS 按钮的事件
getJS.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/2.js");
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status < 300) {
        console.log(request.response);

        // 创建 script 标签
        const script = document.createElement("script");
        // 填写 script 内容
        script.innerHTML = request.response;
        // 插入到 body 中
        document.body.appendChild(script);
      } else {
        alert("2.js 加载失败");
      }
    }
  };
  request.send();
};

5、加载 HTML

以前我们不会加载 3.html
四个步骤：
1. 创建 HttpRequest 对象（全称是 XMLHttpRequest）
2. 调用对象的 open 方法
3. 监听对象的 onreadystatechande 事件
  - 在事件处理函数里操作 HTML 文件内容
4. 调用对象的 send 方法（发送请求）
示例：

// 请求 HTML 按钮的事件
getHTML.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/3.html");
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status < 300) {
        console.log(request.response);

        // 创建 div 标签
        const div = document.createElement("div");
        // 填写 div 内容
        div.innerHTML = request.response;
        // 插入到 body 中
        document.body.appendChild(div);
      } else {
        alert("HTML 加载失败");
      }
    }
  };

  request.send();
};

6、加载 XML

以前我们不会加载 4.xml
四个步骤：
1. 创建 HttpRequest 对象（全称是 XMLHttpRequest）
2. 调用对象的 open 方法
3. 监听对象的 onreadystatechande 事件
  - 在事件处理函数里操作 responseXML 文件内容
4. 调用对象的 send 方法（发送请求）
示例：

// 请求 XML 按钮的事件
getXML.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/4.xml");
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status < 300) {
        const dom = request.responseXML;
        const text = dom.getElementsByTagName("warning")[0].textContent;
        console.log(text.trim());
      } else {
        alert("XML 加载失败");
      }
    }
  };
  request.send();
};

7、总结

HTTP 是个框，什么都能往里装
- 可以装 HTML、CSS、JS、XML.....
- 记得设置正确的 Content-Type，这是个好习惯
- 只要你知道怎么解析这些内容，就可以使用这些内容
解析方法
- 得到 CSS 之后生成 style 标签
- 得到 JS 之后生成 script 标签
- 得到 HTML 之后使用 innerHTML 和 DOM API
- 得到 XML 之后使用 responseXML 和 DOM API
- 不同类型的数据有不同类型的解析办法

8、什么是JSON

什么是JSON
- JavaScript Object Notation
JSON 是一门语言，跟 HTML、CSS、XML、JS 一样，是一门独立的语言
JSON 不是编程语言，是标记语言
- 跟 HTML、XML、Markdown 一样，用来展示数据
- 学习JSON，就看 json.org/json-zh.htm…
JSON 支持的数据类型（value的类型）
- string - 只支持双引号，不支持单引号和无引号
- number - 支持科学计数法
- bool - true 和 false
- null - 没有 undefined
- object
- array
- 就只有这 6 种，注意区别于 JS 的7种数据类型
- 不支持函数，不支持变量（所以也不支持引用）

9、加载 JSON

我们需要加载 5.json
四个步骤：
- 创建 HttpRequest 对象（全称是 XMLHttpRequest）
- 调用对象的 open 方法
- 监听对象的 onreadystatechande 事件
  - 在事件处理函数里使用 JSON.parse
- 调用对象的 send 方法（发送请求）
示例：

// 请求 JSON 按钮的事件
getJSON.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/5.json");
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status < 300) {
        console.log(request.response);

        //JSON.parse() 把符合JSON规范的字符串转化为对象object 或者其他东西
        const object = JSON.parse(request.response);
        myName.textContent = object.name;
      } else {
        alert("JSON 加载失败");
      }
    }
  };
  request.send();
};

10、关于 window.JSON

JSON.parse
- 将符合 JSON 语法的字符串，转换成 JS 对应类型的数据
- 也就是 JSON 字符串 => JS 数据
- 由于 JSON 只有六种类型，所以转成的数据也只有6种
- 如果不符合 JSON 语法，则直接抛出一个 Error 对象
- 一般用 try catch 捕获错误
- 示例：

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

初探 AJAX

1、AJAX

2、背景

3、加载 CSS

4、加载 JS

5、加载 HTML

6、加载 XML

7、总结

8、什么是JSON

9、加载 JSON

10、关于 window.JSON