今天我来谈谈Ajax技术。
Ajax和异步分不开，但是本文重点部分不是异步，而是对实现Ajax的技术进行总结。
我简要罗列一下几种常见的Ajax技术：
动态脚本注入和JSON-P
图片信标（Beacons）
XMLHttpRequest(XHR)技术
接下来我简要谈谈我对这几种技术的理解。
<!--more-->
动态脚本注入
之前的文章中谈到，<script>标签作为DOM的一部分，可以由JavaScript调用DOM操作的接口动态创建。动态创建的<script>元素可以为其设置src属性并且插入到DOM树中。此时异步线程会并行的去加载src资源，等到资源加载完成之后，其中的字符会当做JavaScript语句执行。
该技术是一个hack技术，它利用了浏览器的特性。该特性可以实现“无阻塞加载脚本”技术。更多细节可以移步：无阻塞加载脚本的理解。
除了在页面初始化的时候可以使用动态脚本注入，Ajax技术也可以使用动态脚本注入的技术实现。动态脚本注入可以从服务器中请求数据。
首先我们需要将待请求数据的细节放在src中。因为src对应一个url，浏览器会将这个url作为GET请求发往相应的服务器，所以我们将请求数据作为查询字符串写入src。
服务器在收到请求后，会返回数据。但是这个数据必须以一段JavaScript脚本的形式返回。原因是浏览器收到响应数据后会将其当做JavaScript脚本执行。
也就是说，假设响应数据如果只是简单的xml或者json数据，对于动态脚本注入来说，没有任何意义。
因此服务器收到动态脚本注入中的GET请求时，需要返回一个约定好的表示JavaScript脚本的字符串。这段脚本还需要处理浏览器端需要的数据，比如：
dosomething([{"x": 1,"y": "haha"}]);
这段字符串返回之后就会被执行。其中dosomething就是约定好的一个回调函数名。这个回调函数已经在之前的脚本中定义好。
另外，我们还可以将回调函数名称作为查询字符串传入，这样服务器就可以动态的将回调函数作为响应数据中的一部分返回。
dosomething中的参数一个JSON数据，但是它在返回之后，会被当做JavaScript对象执行。由于这种特性，使用JSON的动态脚本注入又可以称作所谓的“JSON-P”。
该技术还有两个注意点：
动态脚本注入技术可以跨域访问，不同域中返回的脚本可能截获网站数据，导致安全问题，因此要小心使用。
动态脚本注入技术不能发送POST等非GET请求。然而，有些浏览器对GET请求有诸多限制（比如url字符数的限制），因此需要POST请求的Ajax，请考虑其他方法。
Beacons
Beacons技术很适合向服务器发送数据。
和上面的动态脚本注入类似，Beacons可以使用特定的DOM元素，利用src属性向服务器发送数据，但是不需要服务器返回数据。
我们可以使用一个Image对象，设置src之后，该请求会从服务器返回一个图片（一般是一个1*1的透明图片）。这是最常用的方法。
var url = "....";
var params = [
"..",".."
];
var img = new Image();
img.src = url + '?' + params.join('&');
如果响应中不需要任何数据，注意需要服务器设置状态码为204 No Content。
如果需要一定的消息返回，我们可以用一种变通的手法：设置返回图片的宽度，不同的宽度代表不同的信息。这些信息可以在Image对象的onload事件中监听。
img.onload = function(){
if (this.width === 1){
// ...
} else if (this.width === 2){
// ...
} // else if ...
}
和动态脚本注入类似，Beacons技术也有可跨域和无法发送非GET请求的问题。
另外，也可以利用<iframe>标签来做类似的操作。
XMLHttpRequest
目前Ajax使用最多的技术手段就是利用XMLHttpRequest技术。
XMLHttpRequest是一个特殊的构造函数，这个构造函数不在ECMA标准内，但是各大浏览器对其均支持良好。
直接上代码：
var xhr = new XMLHttpRequest();
var url = '...';
var data; // 接受响应主体
var header; // 接受响应头
var status; // 接收状态码
var statusText; // 接收状态信息
xhr.onreadystatechange = function(){ // 监听readyState变化
if (xhr.readyState === 4){ // 该值为4，表明响应结束
data = xhr.responseText; // 获取响应主体
// or: data = xhr.responseXML; ...
headers = xhr.getAllResponseHeaders(); // 获取响应头
status = xhr.status; // 获取状态码
statusText = xhr.statusText; //获取状态信息
// do something...
}
}
xhr.open('GET',url,true); // 开启一个请求，true表示异步响应
xhr.setRequestHeader('..','..'); // 设置请求头
xhr.send(null); // 开始发送，参数是请求主体（用于POST请求）
XMLHttpRequest支持GET和POST请求，并且可以轻松设置请求主体和部分请求头，也可以获取响应主体和响应头。虽然名称叫XMLHttpRequest，但是事实上它支持各种不同的数据格式如JSON、HTML等。
但是注意，该技术是不能跨域访问的，除非web服务器设置了允许跨域访问策略。
另一个值得注意的地方就是：readyState的值为4，表明响应结束，但是我们也可以监听其值为3的情况，该值表明响应正在进行，此时可以获取部分响应主体。 readyState的值为0、1和2分别表示open()尚未调用、open()已调用，和接收到头信息。这些用途相对较小。
更多详情，请参见MDN中关于XMLHttpRequest的解释:链接
