AJAX技术学习

AJAX也就是基于XML的异步JavaScript，是当前WEB开发中一个重要的技术模式，最近才开始学习AJAX的相关知识，呵呵，比较晚：），偶最近在学习江苏移动营业厅的网页实现时，觉得其网站的AJAX实现比较巧妙，也比较小巧简单。所以摘下他的JS来学习下，

建立一个net类，用net.ContentLoader方法进行调用，我在他实现的类中稍微做了一点点的修改就是加入了来准备阶段执行的函数。代码如下：

var net = new Object();

net.READY_STATE_UNINITIALIZED= 0;    /*未初始化*/
net.READY_STATE_LOADING      = 1;    /*正在装载*/
net.READY_STATE_LOADED       = 2;    /*装载完毕*/
net.READY_STATE_INTERACTIVE  = 3;    /*交互中*/
net.READY_STATE_COMPLETE     = 4;    /*完成*/

net.ContentLoader = function( component, url, method, requestParams ) {
   this.component     = component;
   this.url           = url;
   this.requestParams = requestParams;
   this.method        = method;
}

net.ContentLoader.prototype = {
    /* 取得浏览器的类型 */
   getOsType : function () {
   	   var OsObject = "";
	   if(navigator.userAgent.indexOf("MSIE")>0) {
	        return "MSIE";
	   }
	   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
	        return "Firefox";
	   }
	   if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
	        return "Safari";
	   } 
	   if(isCamino=navigator.userAgent.indexOf("Camino")>0){
	        return "Camino";
	   }
	   if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
	        return "Gecko";
	   }
   },
   
   getTransport: function() {
      var transport;
      if ( window.XMLHttpRequest )
         transport = new XMLHttpRequest();
      else if ( window.ActiveXObject ) {
         try {
            transport = new ActiveXObject('Msxml2.XMLHTTP');
         }
         catch(err) {
            transport = new ActiveXObject('Microsoft.XMLHTTP');
         }
      }
      return transport;
   },

   sendRequest: function() {
	  if (this.getOsType() != "Firefox") {
	  	if ( window.netscape && window.netscape.security.PrivilegeManager.enablePrivilege)
         netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
	  }

      var requestParams = []
      for ( var i = 0 ; i < arguments.length ;  i++ )
         requestParams.push(arguments[i]);
      /*发送建立中*/
      this.component.updateCreate();
      /*开始发送*/
      var oThis = this;
      var request = this.getTransport();
      request.open( this.method, this.url, true );
      request.setRequestHeader(&apos;Content-Type&apos;, &apos;application/x-www-form-urlencoded&apos;);
      request.setRequestHeader(&apos;Connection&apos;, &apos;Close&apos;);
      /*建立返回状态改变时执行参数*/
      request.onreadystatechange = function() { oThis.handleAjaxResponse(request) };
      request.send( this.queryString(requestParams) );
  },
  /* 传送参数组装 */
  queryString: function(args) {
     var requestParams = [];
     for ( var i = 0 ; i < this.requestParams.length ; i++ )
        requestParams.push(this.requestParams[i]);
     for ( var j = 0 ; j < args.length ; j++ )
        requestParams.push(args[j]);

     var queryString = "";
     if ( requestParams && requestParams.length > 0 ) {
        for ( var i = 0 ; i < requestParams.length ; i++ )
           queryString += requestParams[i] + &apos;&&apos;;
        queryString = queryString.substring(0, queryString.length-1);
     }

     return queryString;
  },

  handleAjaxResponse: function(request) {
     if ( request.readyState == net.READY_STATE_COMPLETE ) {
        if ( this.isSuccess(request) )
           this.component.ajaxUpdate(request);
        else
           this.component.handleError(request);
     }
  },

  isSuccess: function(request) {
    return  request.status == 0 
        || (request.status >= 200 && request.status < 300);
  }

};


/*Ajax获取数据回调的通用组件*/
CommonAjaxComponent = function (onCreate,callBack, handleError) 
{
	/* 准备中执行函数 */
	this.updateCreate = onCreate;
	
	/* 处理取回的数据 */
	this.updateCallBack = callBack;
	
	/* 处理请求异常 */
	this.handleError = handleError;
};

CommonAjaxComponent.prototype = {
	ajaxUpdate : function (request)
	{
		this.updateCallBack(request.responseText);
	}
};

其调用方法如下：

 

/* 取得成功后执行函数 */
function getDataSuccess(result){
    try{
        //返回的字符串用 eval() 转换为JS对象
        var dataInfo = eval("(" + result + ")");
        //更新公告栏信息
        alert(dataInfo.result);
    }
    catch(exception){}
}
//数据取得失败
function getDataFail(result){
    try{
        alert("失败");
    }
    catch(exception){}
}
function queryBulletinInfos(){
    //传送参数建立
    var data = [];
    data.push("parentId=" + parentId);
    var ajaxReq = new net.ContentLoader(new CommonAjaxComponent(function(){},
                                                                getDataSuccess,
                                                                getDataFail),
                                        "/yytBulletin.do?method=getBulletinInfos&count=5",
                                        "post",
                                        []);
        ajaxReq.sendRequest();
}