封装Ajax-CSDN博客

本文链接：https://blog.csdn.net/dotnet90/article/details/2450016

/*----------------------------------------------------------------------------------------------------------*/
| Subject:       Web Match Class                                                                                       |
| Version:       1.0                                                                                                                 |
| Author:        【曹明旭】                                                                                                   |
| FileName:      XmlHttpFinally.js                                                                                      |
| Created:       2008-5-15                                                                                                     |
| LastModified: 2008-5-15                                                                                                 |
|                                                                                                                                                |
|                 You may use this code on your item                                                              |
|                 this entire copyright notice appears unchanged                                         |
|                 and you clearly display a link to http://www.jingjiba.com/                           |
|                 坚持自主创新才是唯一出路,国富才能民强,我为地震捐赠200RMB             |
|------------------------------------------------------------------------------------------------------------|
| MSN: risingsunlinux@hotmail.com   QQ: 181131433   http://www.jingjiba.com |
/*---------------------------------------------------------------------------------------------------------*/

// 虽然XmlHttp.js很好用了,但是因为如果一个页面中存在多个调用的时候,总是会出现冲突的情况,本js就是为了解决这个问题而出现的,
// 这里添加了XmlHttp对象的对象池很好的解决了这个问题
// 调用规则:调用的脚本要放在赋值对象的后面否则会出现对象为null的错误
function $() {
   var elements = new Array();
   for ( var i = 0 ; i < arguments.length; i ++ ) {
     var element = arguments[i];
     if ( typeof element == ' string ' )
      element = document.getElementById(element);
     if (arguments.length == 1 )
       return element;
    elements.push(element);
  }
   return elements;
}
// -------------------------------------------------------

// 封装XMLHTTP的Request类的代码
var Request = new Object();
// 定义一个XMLHTTP的数组
Request.reqList = [];
function CallBackObject()
{
   this .XmlHttp = this .GetHttpObject();
}

CallBackObject.prototype.GetHttpObject = function ()
{
   var xmlhttp;
   /* @cc_on
  @if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
  @else
  xmlhttp = false;
  @end @ */
   if ( ! xmlhttp && typeof XMLHttpRequest != ' undefined ' ) {
     try {
      xmlhttp = new XMLHttpRequest();
    } catch (e) {
      xmlhttp = false ;
    }
  }
   return xmlhttp;
}
// 封装XMLHTTP向服务器发送请求的操作
// url:向服务器请求的路径；method：请求的方法，即是GET还是POST；callback：当服务器成功返回结果时，调用的函数
// data：向服务器请求时附带的数据；urlencoded：url是否编码；callback2;当服务器返回错误时调用的函数
Request.Send = function ( url, method, CallBackFun, Args, urlencoded, ErrCallBackFun,LoadingCallBackFun)
{
     var Cbo = new CallBackObject();
    Cbo.DoCallBack( url, method, CallBackFun, Args, urlencoded, ErrCallBackFun,LoadingCallBackFun)
}
// 全部清除XMLHTTP数组元素，释放资源
Request.clearReqList = function ()
{
     var ln = Request.reqList.length;
     for ( var i = 0 ; i < ln; i ++ ) {
         var req = Request.reqList[i];
         if (req)
        {
             try
            {
                 delete req;
            } catch (e) {}
        }
    }
    Request.reqList = [];
}
// 进一步封装XMLHTTP以POST方式发送请求时的代码
// clear：是否清除XMLHTTP数组的所有元素；其他参数的意义参见Request.send
Request.sendPOST = function (url, data, CallBackFun, clear, ErrCallBackFun,LoadingCallBackFun)
{
     if (clear)
        Request.clearReqList();
    Request.Send(url, " POST " , CallBackFun, data, true , ErrCallBackFun,LoadingCallBackFun);
}
// 进一步封装XMLHTTP以GET方式发送请求时的代码
Request.sendGET = function (url, args, CallBackFun, clear, ErrCallBackFun,LoadingCallBackFun)
{
     if (clear)
        Request.clearReqList();
     return Request.Send(url, " GET " , CallBackFun, args, false , ErrCallBackFun,LoadingCallBackFun);
}

CallBackObject.prototype.DoCallBack = function ( url, method, CallBackFun, Args, urlencoded, ErrCallBackFun,LoadingCallBackFun)
{
     var oThis = this ;
     // 如果以POST方式回发服务器
     if (method == " POST " )
     {
         this .XmlHttp.open( " POST " , url, true );
         this .XmlHttp.onreadystatechange = function (){ oThis.ReadyStateChange(CallBackFun,Args,ErrCallBackFun,LoadingCallBackFun); };
         // 请求需要编码
         if (urlencoded)
             this .XmlHttp.setRequestHeader( ' Content-Type ' , ' application/x-www-form-urlencoded ' );
         this .XmlHttp.send(data);
        Request.reqList.push( this .XmlHttp);
    }
     // 以GET方式请求
     else
    {
         this .XmlHttp.open( " GET " , url, true );
         this .XmlHttp.onreadystatechange = function (){ oThis.ReadyStateChange(CallBackFun,Args,ErrCallBackFun,LoadingCallBackFun); };
         this .XmlHttp.send( null );
        Request.reqList.push( this .XmlHttp);
    }
}
CallBackObject.prototype.AbortCallBack = function ()
{
   if ( this .XmlHttp )
     this .XmlHttp.abort();
}

CallBackObject.prototype.OnLoading = function (LoadingCallBackFun)
{
   // Loading
   if (LoadingCallBackFun)LoadingCallBackFun();
}

CallBackObject.prototype.OnLoaded = function ()
{
   // Loaded
}

CallBackObject.prototype.OnInteractive = function ()
{
   // Interactive
}

CallBackObject.prototype.OnComplete = function (responseText, responseXml,CallBackFun,Args)
{
   // Complete
  CallBackFun(responseText,responseXml,Args);
}

CallBackObject.prototype.OnAbort = function ()
{
   // Abort
   // alert("Error");
}

CallBackObject.prototype.OnError = function (status, statusText,ErrCallBackFun)
{
   // Error
   if (ErrCallBackFun)ErrCallBackFun(status, statusText);
}

CallBackObject.prototype.ReadyStateChange = function (CallBackFun,Args,ErrCallBackFun,LoadingCallBackFun)
{
   if ( this .XmlHttp.readyState == 1 )
  {
     this .OnLoading(LoadingCallBackFun);
  }
   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( this .XmlHttp.responseText, this .XmlHttp.responseXML,CallBackFun,Args);
     else
       this .OnError( this .XmlHttp.status, this .XmlHttp.statusText,ErrCallBackFun);
  }
}

原来的Ajax: