Ajax之搭建一个基本的Ajax框架（技术分析篇）

搭建基本的Ajax框架

本节将搭建一个基本的Ajax应用程序开发框架，这个基本的框架应该包括XMLHttpRequest对象的创建、提供回调函数功能以及对业务逻辑以及相关兼容的处理。

创建XMLHttpReuqest对象

我们知道，在IE浏览器中，IE6及以下浏览器的XMLHttpRequest对象是通过ActiveXObject来创建的，而在IE7及以上以及其它非IE浏览器是通过window对象的属性原生创建的。为了兼容IE6及以下浏览器和IE7及以上以及其它非IE浏览器问题，我们将创建XMLHttpRequest对象的方法进行一个封装，以解决兼容性问题。

//封装创建XMLHttpRequest对象的方法
function getTransport () {
    var versions = [
        function () {
            return new XMLHttpRequest(); //兼容IE7及以上浏览器和其它非IE浏览器方法
        },
        function () {
            return ActiveXObject("MicrosoftHTTP"); //兼容IE6及以下浏览器的方法
        }
    ];
    
    var request;
    for (var i = 0; i < versions.length; i ++) {
        var lambda = versions[i]; //得到XMLHttpRequest对象
        
        try {
            request = lambda(); //回调函数
            break;
        } catch (e) {}
    }
    return request;
}

如以上代码所示：首先用一个数组versions保存了2个匿名函数，这两个匿名函数提供了不同版本的XMLHttpRequest对象的创建方法。然后用一个for循环和try()..catch()来获取这匿名函数，并获取第一个成功执行的匿名函数，最后跳出循环，最后返回这个获取到的匿名函数。

发送请求和回调函数

在对XMLHttpRequest对象的创建进行封装后，还需要对发送请求和回调函数进行处理。

/*
 *函数名：ajaxRequest
 *功能：根据用户指定的URL、方法、参数HTTP头，以及回调函数，自动创建XMLHttpRequest对象并发送请求。
 *参数介绍：
 *    url:请求的URL地址，字符串类型
 *    option:参数，其成员可能有：
 *                             method:发送请求的方式，可以为"GET"或"POST"
 *                             headers:需要发送的HTTP头，属性名为头名称，属性值为信息的内容
 *                             parameters:需要发送的数据。
 */
 
 function ajaxRequest (url, options) {
     var request = getTransport(); //创建XMLHttpRequest对象
     if (typeof request == "undefined") { //判断浏览器是否支持XMLHttpRequest对象
         throw new Error("Your browser does not support XMLHttpRequest");
     }
     var url = url;
     var method = (options.method||"POST").toUpperCase();//获取提交方法，默认为POST，且为大写字母表示
     if (method != "GET" && method != "POST") {
         method = "POST"; // 将除POST、GET外的提交方式变成 POST提交请求方式
     }
     var parameters = options.parameters || null;//需要提交的数据，默认为null
     var headers = options.headers || {};//需要发送的HTTP头信息，是一个对象。
     var onLoadingEventHandler = options.onLoad || function () {};
     var onCompleteEventHandler = options.onComplete || function () {};
     var onSuccessEventHandler = options.onSuccess || function () {};
     var onFailureEventHandler = options.onFailure || function () {};
     if (method == "GET" && parameters != null) { //如果提交方式为GET，且提交的url不是为null，
         if (url.indexOf("?") > -1) { //将parameters的内容拼接到url中，并把parameters设置为null
             url += "&" + parameters;
         } else {
         url += "?" + parameters;
         }
         parameters = null;
     }
     
     request.open(method, url, true);
     request.setRequestHeader("contentType", "appllication/x-www-form-urlencoded");
     for (var name in headers) { //设置由用户指定的HTTP头信息
         request.setRequestHeader(name, headers[name]);
     }
     
     request.onreadystatechange = function () {
         if (request.readyState == 1) {
             onLoadingEventHandler(request);
         }
         if (request.readyState == 4) {
             onCompleteEventHandler(request);
             if (request.status && request.status >= 200) {
                 onSuccessEventHandler(request);
             } else {
                 onFailureEventHandler(request);
             }
         }
         
     };
         
     request.send(parameters);
 }

封装好的基本Ajax应用程序框架

将以上的两段代码合并到一个JavaScript文件中，并命名为ajaxRequest.js，这样就可以在以后需要运用Ajax技术时在HTML文档中引用这个框架了。

 //封装创建XMLHttpRequest对象的方法
 function getTransport () {
     var versions = [
         function () {
             return new XMLHttpRequest(); //兼容IE7及以上浏览器和其它非IE浏览器方法
         },
         function () {
             return ActiveXObject("MicrosoftHTTP"); //兼容IE6及以下浏览器的方法
         }
     ];
     
     var request;
     for (var i = 0; i < versions.length; i ++) {
         var lambda = versions[i]; //得到XMLHttpRequest对象
         
         try {
             request = lambda(); //回调函数
             break;
         } catch (e) {}
     }
     return request;
 }
 
 /*
 *函数名：ajaxRequest
 *功能：根据用户指定的URL、方法、参数HTTP头，以及回调函数，自动创建XMLHttpRequest对象并发送请求。
 *参数介绍：
 *    url:请求的URL地址，字符串类型
 *    option:参数，其成员可能有：
 *                             method:发送请求的方式，可以为"GET"或"POST"
 *                             headers:需要发送的HTTP头，属性名为头名称，属性值为信息的内容
 *                             parameters:需要发送的数据。
 */
 
 function ajaxRequest (url, options) {
     var request = getTransport(); //创建XMLHttpRequest对象
     if (typeof request == "undefined") { //判断浏览器是否支持XMLHttpRequest对象
         throw new Error("Your browser does not support XMLHttpRequest");
     }
     var url = url;
     var method = (options.method||"POST").toUpperCase();//获取提交方法，默认为POST，且为大写字母表示
     if (method != "GET" && method != "POST") {
         method = "POST"; // 将除POST、GET外的提交方式变成 POST提交请求方式
     }
     var parameters = options.parameters || null;//需要提交的数据，默认为null
     var headers = options.headers || {};//需要发送的HTTP头信息，是一个对象。
     var onLoadingEventHandler = options.onLoad || function () {};
     var onCompleteEventHandler = options.onComplete || function () {};
     var onSuccessEventHandler = options.onSuccess || function () {};
     var onFailureEventHandler = options.onFailure || function () {};
     if (method == "GET" && parameters != null) { //如果提交方式为GET，且提交的url不是为null，
         if (url.indexOf("?") > -1) { //将parameters的内容拼接到url中，并把parameters设置为null
             url += "&" + parameters;
         } else {
         url += "?" + parameters;
         }
         parameters = null;
     }
     
     request.open(method, url, true);
     request.setRequestHeader("contentType", "appllication/x-www-form-urlencoded");
     for (var name in headers) { //设置由用户指定的HTTP头信息
         request.setRequestHeader(name, headers[name]);
     }
     
     request.onreadystatechange = function () {
         if (request.readyState == 1) {
             onLoadingEventHandler(request);
         }
         if (request.readyState == 4) {
             onCompleteEventHandler(request);
             if (request.status && request.status >= 200) {
                 onSuccessEventHandler(request);
             } else {
                 onFailureEventHandler(request);
             }
         }
         
     };
         
     request.send(parameters);
 }

HTML部分代码为：

PHP部分代码：