Ajax: 允许加载数据而无需刷新整个页面
Ajax 采用异步( 或称非阻塞 )处理模型, 所以浏览器在等待数据加载期间, 用户可以做其他事情.
- 一般页面再加载数据时, 如果脚本需要从服务器收集数据, 那么浏览器不仅要等脚本完成加载处理, 而且还要等待服务器将脚本将要显示的数据发送回来
- 使用 Ajax, 浏览器向服务器请求数据, 一旦请求发出, 就可以继续加载页面, 浏览器无需等待数据返回. 如果服务器响应并返回了数据,就会触发一个事件, 调用一个函数.
- Ajax 刷新页面的一部分, 是通过监听事件, 并使用异步请求向服务器请求新内容来完成的.
Ajax 请求与响应
请求
- 用对象构造函数, 创建一个 XMLHttpRequest 对象实例, 并储存在变量中.
- XMLHttpRequest对象的
.open()方法会准备请求. 三个参数: HTTP 方法, 请求地址, 是否异步布尔值 -
.send()方法的作用是将准备好的信息发给服务器. 括号内是额外信息, 如果内有可使用关键字null
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data/text.json', true);
xhr.send('search=arduino');
响应
- 当浏览器收到响应并载入时, 会触发 onload 事件, 事件将触发一个函数
- 函数会检查对象的 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 对象
