几种Ajax技术

今天我来谈谈Ajax技术。

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的解释:连接

结束