简易Ajax框架解释【原创】

//GetHttpObject方法的作用是初始化XMLHttpRequest对象

function CallBackObject()
{
  this.XmlHttp = this.GetHttpObject();
}

/*名词解释:
  修饰符: (原型)prototype
  解  释: 使用原型对象的属性来创建继承属性和共享方法.
              原型属性和方法将采用引用的方式复制给类中的每个对象，他们都具有相同的值，
              可以在一个对象中, 更改原型属性的值,新的值将覆盖默认值
*/

 

//函数名:GetHttpObject();
//作 用 1 : 创建XmlHttpRequest对象
//作 用 2 : 判断浏览器类型

CallBackObject.prototype.GetHttpObject = function()
{
    var xmlhttp;

    if (window.ActiveXObject)
    {

            try 
        {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }  
        catch (e) 
        {
            try 
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (E) 
            {
                xmlhttp = false;
            }
        }
    }
    else
    {
        alert("不能创建XmlHttpRequest对象!浏览器不支持");
        return xmlhttp;
    }

    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') 
    {
        try 
     {
            xmlhttp = new XMLHttpRequest();
        } 
        catch (e) 
        {
            xmlhttp = false;
        }
    }
        return xmlhttp;
}

//函 数 名:DoCallBack();
//作 用 1 :向指定的URL发送请求,
//作 用 2 :并且委托ReadyStateChange()函数去处理XmlHttpRequest对象状态变化

CallBackObject.prototype.DoCallBack = function(URL)
{ 
    if( this.XmlHttp )
    {
        if( this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 )
        {
            var oThis = this;
            this.XmlHttp.open('POST', URL);
            this.XmlHttp.onreadystatechange = function() { oThis.ReadyStateChange(); };
            this.XmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            this.XmlHttp.send(null);
        }
    }
}

//函 数 名:AbortCallBack();
//作    用:停止当前的请求

CallBackObject.prototype.AbortCallBack = function()
 {
    if( this.XmlHttp )
    {
        this.XmlHttp.abort();
    }
}

创建一个显示Loading的Div层

 var   div; 

//函 数 名:OnLoading();
//作    用:XmlHttpRequest对象的状态为1(正在加载)

CallBackObject.prototype.OnLoading = function()
{
      div  =   document.createElement("DIV");   
      div.id   =   "div_TiShi";   
      div.innerHTML   =   '正在加载,请稍后.....';   
      div.onmousedown=function() {moveit(this)};
      div.style.backgroundColor="yellow";  
      document.body.appendChild(div);
}

//函 数 名:OnLoading();
//作    用:XmlHttpRequest对象的状态为2(已加载) 

CallBackObject.prototype.OnLoaded = function()
{
    div.style.display="none";
    //window.alert('XmlHttpRequest对象已经加载...');
}

//函 数 名:OnInteractive();
//作    用:XmlHttpRequest对象的状态为3(交互中) 

CallBackObject.prototype.OnInteractive = function()
{
    //window.alert('交互中...');
}

//函 数 名:OnComplete();
//作    用:XmlHttpRequest对象的状态为4(已经完成)

CallBackObject.prototype.OnComplete = function(responseText, responseXml)
{
    
}

//函 数 名:OnAbort();
//作    用:停止当前的请求

CallBackObject.prototype.OnError = function(status, statusText)
{
    // Error
    window.alert('错误的XmlHttpRequest对象状态!');
}

//函 数 名:ReadyStateChange()
//作    用: 用于判断XmlHttpRequest对象的状态码,分别进行处理

CallBackObject.prototype.ReadyStateChange = function()
{
    if( this.XmlHttp.readyState == 1 )
    {
        this.OnLoading();
    }
    else if( this.XmlHttp.readyState == 2 )
    {
        this.OnLoaded();
    }
    else if( this.XmlHttp.readyState == 3 )
    {
        this.OnInteractive();
    }
    else if( this.XmlHttp.readyState == 4 )
    {
        
        
        if( this.XmlHttp.status == 0 )
        {
            this.OnAbort();
            alert('XmlHttpRequest对象尚未初始化!');
        }
        else if( this.XmlHttp.status == 200 && this.XmlHttp.statusText == "OK" )
        {
            this.OnComplete(this.XmlHttp.responseText, this.XmlHttp.responseXML);
         }
        else
        {
             this.OnError(this.XmlHttp.status, this.XmlHttp.statusText, this.XmlHttp.responseText);   
        }
    }
}

根据不同的请求,和具体的异步交互,再对应的作修改.
下一次将用这个框架实现一个"加减乘除的简单计算",代码整理中......