作用

• 用JS发送请求和接收响应

背景

AJAX是浏览器上的功能（XMLHttpRequest函数）

• 浏览器可以发送请求，接收响应
• 浏览器在window上加了一个XMLHttpRequest全局函数
• 用这个构造函数(类)可以构造出一个对象
• JS通过它实现发请求，收响应

准备一个服务器

• 启动server.js
• 使用node-dev代替node,当server.js修改的时候，重启

• 添加index.html路由，添加main.js路由

• write等价于以下代码
• 将读取的文件转化成字符串写入

加载CSS（4个步骤）

• 创建HttpRequest对象
• 调用对象的open
• 监听对象的onload和noerror
• 调用对象的send发送请求

• 配置main.js之前先设置路由

加载js文件

• 同上

加载html

• 同上

补充： 加载失败

• onload和onerror比较简陋，使用onreadystatechange

XMLHttpRequest.onreadystatechange

• XMLHttpRequest.readyState 属性返回一个状态值，表明一个请求的状态

• 简化图解

代码演示

• 调用onreadyStatechange,由于已经调用send，所以状态码从2开始，直到下载完成（状态码4）

优化请求代码

• 以请求CSS为例

• 舍弃掉onload和onerror
• 调用请求的onreadystatechange
• 首先判断下载是否完成，判断条件为请求的readyState返回值:4
• 此条件下，再次判断请求的状态码（主要是判断路由，筛选出文件路径相关的一系列问题：比如文件名错误）
• 如果路由正常，页面写入style标签
• 如果路由异常，提示加载文件失败

加载XML

• 思路同上
• 自带 reponseXML,返回的是对象，说明是个dom指令
• 声明dom为得到的对象，DOM指令：dom得到warning标签里面的文本内容（由于是伪数组，所以要声明是第一项）
• 打印文本（trim函数，消除周围的转义符）

JSON

概念

• 全称：JavaScript Object Noation（JS对象标记语言）
• 是一门标记语言，不是编程语言
• 根HTML、XML、Markdown一样，用来展示数据

语法

• 链接：www.json.org.cn/

支持的数据类型

• string- 只支持双引号
• NUMBER- 支持科学计数法
• bool- true和false
• null- 不支持undefined
• object
• array
• 不支持函数、不支持变量（所以也不支持引用）

加载JSON

• 准备工作同上
• 由于得到的是字符串，所以调用parse，将json字符串转化成js对应的数据类型
• 页面中#myName标签内容为 object里面name的value
• 点击触发按钮，页面跳出name的内容

小结

• JSON.parse
  • 将符合JSON语法的字符串转化成JS对应类型的数据（JSON字符串=>JS数据）
  • 由于JSON只有六种数据类型，所以转换成的数据也只有六种
  • 如果不符合JSON语法，直接返回一个Error对象
  • 一般用try catch捕获错误

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

综合应用-加载分页

• 新开文件夹，新开三个文件

• 填写json文件内容

• 第一页静态载入page1的内容
• 标记{}
• 第一页路由设置

• 事件监听