AJAX
AJAX
Async JavaScript And XML
作用：用 JS 发请求和收响应
背景
AJAX 是浏览器上的功能
- 浏览器可以 发请求，收响应
- 浏览器在 window 上加了一个 XMLHttpRequest 函数
- 用这个构造函数（类）可以构造出一个对象
- JS 通过它实现发请求，收响应
准备一个服务器
- 使用 server.js 作为我们的服务器
- node server.js 8888 启动
- 添加 index.html / main.js 两个路由
- node-dev foo.js （代替第二点，不用每次都重启）
挑战1
加载 CSS
步骤
- 创建 HTTPRequest 对象（全称是 XMLHTTPRequest ）
- 调用对象的 open 方法
- 监听对象的 onload & onerror 事件
- 也可以改用 onreadystatechange 事件
- 在事件处理函数里操作 CSS 文件内容
- 调用对象的 send 方法（发送请求）
挑战2
加载 js
步骤
- 创建 HTTPRequest 对象（全称是 XMLHTTPRequest ）
- 调用对象的 open 方法
- 监听对象的 onreadystatechange 事件
- 在事件处理函数里操作 js 文件内容
- 调用对象的 send 方法（发送请求）
挑战3
加载 HTML
- 创建 HTTPRequest 对象（全称是 XMLHTTPRequest ）
- 调用对象的 open 方法
- 监听对象的 onreadystatechange 事件
- 在事件处理函数里操作 HTML 文件内容
- 调用对象的 send 方法（发送请求）
挑战4
加载 XML
步骤
- 创建 HTTPRequest 对象（全称是 XMLHTTPRequest ）
- 调用对象的 open 方法
- 监听对象的 onreadystatechange 事件
- 在事件处理函数里操作 XML 文件内容
- 调用对象的 send 方法（发送请求）
挑战5
加载 JSON
- JSON 是一门语言（标记语言）
- 标记语言一般是用来展示数据的
支持的数据类型
- string -只支持双引号，不支持单引号和无引号
- number -支持科学计数法
- bool - true 和 false
- null - 没有 undefined
- object
- array
- 不支持函数和变量，不支持引用
步骤
- 创建 HTTPRequest 对象（全称是 XMLHTTPRequest ）
- 调用对象的 open 方法
- 监听对象的 onreadystatechange 事件
- 在事件处理函数里操作 JSON 文件内容
- 调用对象的 send 方法（发送请求）
window.JSON
JSON.parse
- 将符合 JSON 语法的字符串转换成 JS 对应类型的数据
- JSON 字符串 => JS 数据
- 由于 JSON 只有六种类型，所以转成的数据也只有6种
- 如果不符合 JSON 语法，则直接抛出一个 Error 对象
- 一般用 try catch 捕获错误
JSON.stringify
- 是 JSON.parse 的逆运算
- JS 数据 => JSON 字符串
- 由于 JS 的数据类型比 JSON 多，所以不一定能成功
- 如果失败，就抛出一个 Error 对象
