JavaScript Ajax 和 JSON(八)

Ajax: 允许加载数据而无需刷新整个页面

Ajax 采用异步( 或称非阻塞 )处理模型, 所以浏览器在等待数据加载期间, 用户可以做其他事情.

• 一般页面再加载数据时, 如果脚本需要从服务器收集数据, 那么浏览器不仅要等脚本完成加载处理, 而且还要等待服务器将脚本将要显示的数据发送回来
• 使用 Ajax, 浏览器向服务器请求数据, 一旦请求发出, 就可以继续加载页面, 浏览器无需等待数据返回. 如果服务器响应并返回了数据,就会触发一个事件, 调用一个函数.
• Ajax 刷新页面的一部分, 是通过监听事件, 并使用异步请求向服务器请求新内容来完成的.

---

Ajax 请求与响应

请求

1. 用对象构造函数, 创建一个 XMLHttpRequest 对象实例, 并储存在变量中.
2. XMLHttpRequest对象的.open()方法会准备请求. 三个参数: HTTP 方法, 请求地址, 是否异步布尔值
3. .send()方法的作用是将准备好的信息发给服务器. 括号内是额外信息, 如果内有可使用关键字 null

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data/text.json', true);
xhr.send('search=arduino');

响应

1. 当浏览器收到响应并载入时, 会触发 onload 事件, 事件将触发一个函数
2. 函数会检查对象的 status 属性,以确保请求是正常的

xhr.onload = function() {
  if (xhr.status === 200) {
    //code
  }
}

---

JSON数据

JSON 看上去很想对象字面量, 但它其实仅仅是文本数据, 并不是对象

• 键放在双引号中, 键和值使用冒号隔开, 每个键值对都用逗号隔开(除了最后一个)
• 值可以是一下任意数据类型: string number Boolean array object null

{
  "location": "San Francisco, CA",
  "capacity": 270,
  "booking": true
}

JavaScript 的 JSON 对象可以将 JSON 数据转化为 JavaScript 对象, 也可以将 JavaScript 对象转换成字符串
JSON.stringify() 会将 JavaScript 对象转换成 JSON 格式的字符串
JSON.parse() 能够处理包含 JSON 数据的字符串, 并转换为浏览器可以使用的JavaScript 对象