Ajax实践(三)：一个简单的Ajax框架

       开发基于Ajax的web应用需要编写大量的Javascript代码，而就目前的情况而言，Javescript的调试还缺少一个比较好的集成环境。为了减轻Ajax开发的复杂度，可以使用一些已有的Ajax开发框架，既提高了开发效率，也减少了代码出错的概率。现在市面上已经有很多框架可用，但如果只是开发比较小的项目，完全可以自己编写一个简单的框架，这样效率可能会更高。
      下面我将通过对XMLHttpRequest对象的封装，创建一个简单的Ajax框架。
      首先，需要创建一个XMLHttpRequest对象实例。 
       

function  AjaxFrameDemo()
{
    this .XmlHttp  =   this .CreatHttpObject();
}

AjaxFrameDemo.prototype.CreatHttpObject  =   function ()
{
    var  xmlhttp;
    try
   {
      xmlhttp  =   new  ActiveXObject( " Msxml2.XMLHTTP " );
   }
    catch  (e)
   {
       try
      {
         xmlhttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
      }
       catch (e)
      {
            xmlhttp  =   new  XMLHttpRequest();
      }
   }
    return  xmlhttp;
} 

      这段代码针对不同的浏览器使用了不同的创建方法，保证了程序的兼容性。

      接下来需要创建一个方法实现对web服务器的异步请求。   
     

AjaxFrameDemo.prototype.CallBack  =   function (url)
{
    if ( this .xmlhttp)
   {
       if ( this .xmlhttp.readyState == 4 || this .xmlhttp.readyState == 0 )
      {
          this .xmlhttp.open('post',url);
          this .xmlhttp.onreadystatechange = function ()
         {
             this .ReadyStateChange();
         }
          this .xmlhttp.send( null );
      }
   }
}

AjaxFrameDemo.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();
        else   if ( this .xmlhttp.status == 200   &&   this .xmlhttp.statusText == " ok " )
          this .OnComplete();
        else  
          this .OnError();           
    }
}

      这段代码中OnLoading等方法皆设定为空函数，只需给出声明，使用时可根据需要进行重写。

      由于框架使用原型创建对象，实际应用时可以重写其中的部分属性与方法来完成不同项目的需求。另外，该部分只是完成了客户端的框架设计，还需要在服务器端增加一个C#类，读取HTTP请求并返回响应，有兴趣的朋友可自行完成。

小结：
这个Ajax框架结构比较简单，只是完成了最基本的Ajax功能，使用时可根据需要自行扩展，适用于比较小的项目开发。