XMLHttpRequest（XHR）是一个浏览器内置对象，它能让Web页面实现异步数据请求。它就像是一个浏览器内的邮差，不需要刷新整个页面就能从服务器拿到你想要的数据。想象一下，你在玩一个在线游戏，突然游戏画面卡了一下，刷新！你要重新登录，多糟糕。用了XHR，这种悲剧就避免了，数据在背后悄悄更新，游戏体验丝滑顺畅。
AJAX（Asynchronous JavaScript and XML）是一种技术的大杂烩，XHR是这烩菜里的肉——主角。AJAX允许网页实现异步更新，意味着页面可以在不打扰用户的情况下，与服务器通信交换数据。
细说XHR，它不是个胆小的家伙，跨域请求？有点难度，但它有办法（CORS就是一种）。传统的表单提交必须刷新页面，XHR能悄无声息地送达数据，并且还能拿到服务器的答复。你可以用它获取各种格式的数据，比如JSON，HTML片段，文本，甚至是二进制数据。
来看一个栩栩如生的Ajax请求实战：
// 不就是创建个XHR对象嘛，简单！
var xhr = new XMLHttpRequest();
// 这位小伙子要去哪儿？URL，搞定！
xhr.open('GET', 'https://api.somewhere.com/data', true);
// 监听服务器的回应，耳朵得竖起来。
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 数据回来了！处理这个JSON包。
var jsonResponse = JSON.parse(xhr.responseText);
console.log('Data received: ', jsonResponse);
}
};
// 设置好了，发射！
xhr.send();
最后，让我们靓化一下这个Ajax流程：
- 新建XHR小怪兽。
- 开门看山，传授给它去哪儿，需要什么，教它如何打开各种门锁（HTTP请求方法、URL、是否异步）。
- 竖起你的天线，全神贯注待命响应（设置回调函数监听响应状态变化）。
- 哨声响起，请求发射，小怪兽开始跑酷。
- 等待...等到服务器响应，小怪兽冲过终点线。
- 读取小怪兽嘴里的报告（响应数据），做你想做的事！变形魔方，显示数据，或者偷偷地存起来。
XHR和AJAX结合起来，就能在不刷新页面的情况下，实现数据的神不知鬼不觉的交换，让用户体验如同吃了润滑油的滑梯。简洁而高效，这就是现代web开发的一个闪光点。
