js框架开发剖析--AJAX

XMLHttpRequest

XMLHttpRequest的功能是在后台跟服务器实现交互，结合DOM的操作，可以实现页面的局部刷新。

通体XMLHttpRequest的请求要求都是同源的，对于跨域的操作可以使用动态插入script标签等形式来实现。

历史

XMLHttpRequest也是浏览器技术战争的产物。最早提出这个概念的是微软，他在1999年发布的IE5中，使用了ActiveX实现了这一功能。直到2006年XMLHttpRequest才进入了W3C的工作草案。

请求对象

像jQuery这样的框架让Ajax看上去如此的简单，但是幕后却有非常复杂的工作：

1.处理微软和W3C实现上的差异
2.为不同的请求数据和方法设置不同的头部信息
3.通过回调函数处理请求状态的变化
4.处理不同浏览器之间的差异

创建一个请求对象如下：

// W3C compliant
new XMLHttpRequest();
// Microsoft
new ActiveXObject("Msxml2.XMLHTTP.6.0");
new ActiveXObject("Msxml2.XMLHTTP.3.0");
new ActiveXObject('Msxml2.XMLHTTP');

IE浏览器有不同的MSXML版本，关于版本的不同和选择参考文章 Using the right version of MSXML in Internet Explorer
jQuery的实现方法如下：

xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject) ?
  function() {
    return new window.XMLHttpRequest();
  } :
  function() {
    try {
      return new window.ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {}
  },

其中也阻止了IE7使用XMLHttpRequest，因为它不能加载本地文件。

发送请求

发送一个请求主要有下面几个部分

1.给onreadystatechange设置回调函数
2.调用请求对象的open方法
3.设置请求头信息
4.调用请求对象的send方法

onreadystatechange可以监听请求状态的变化，主要有一下状态：

0: Uninitialized: 没有调用open方法前
1: Loading: 没有调用send方法前
2: Loaded: 调用了send方法，获取了响应的头信息
3: Interactive: 下载responseText数据
4: Completed: 请求结束

open方法用来初始化HTTP方法，设置URL，确定是否使用异步请求。使用request.setRequestHeader(header, value)方法可以设置请求的头。使用send(postBody)方法可以发送post的数据内容。
下面的代码是基于之前定义的xhr对Ajax的简单实现：

function ajax(url, options) {
  function successfulRequest(request) {
    return (request.status >= 200 && request.status < 300) ||
        request.status == 304 ||
                (request.status == 0 && request.responseText);
  }

  function respondToReadyState(readyState) {
    if (request.readyState == 4 ) {
      if (successfulRequest(request)) {
        if (options.success) {
          options.success(request);
        }
      } else {
        if (options.failure) {
          options.failure();
        }
      }
    }
  }

  function setHeaders() {
    var headers = {
      'Accept': 'text/javascript, text/html, application/xml, text/xml, */*'
    };

    for (var name in headers) {
      request.setRequestHeader(name, headers[name]);
    }
  }

  var request = xhr();
  if (typeof options === 'undefined') {
    options = {};
  }

  options.method = options.method ? options.method.toLowerCase() : 'get';
  options.asynchronous = options.asynchronous || true;
  options.postBody = options.postBody || '';

  request.onreadystatechange = respondToReadyState;
  request.open(options.method, url, options.asynchronous);
  setHeaders();
  request.send(options.postBody);
}

接口

我们将要设计的接口提供了get，post和ajax方法，如下：

turing.net.get('/example', { success: function(r) { alert(r.responseText); } });

查看代码的详情请点击turing.net.js

预告

下一篇我将继续讲述ajax的原理，并且演示如何实现一个跨域的请求。