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功能，使用时可根据需要自行扩展，适用于比较小的项目开发。