Xmlhttprequest类设计

 

在web项目中少不了用ajax，这是很不错的一种技术，但是如果没有把xmlhttprequest这一个对象给好好的包装一下的话，那就对整个项目的影响是很大的。在公司的项目中我用了这样一个类，我认为包装的很好。因为这一个类是开源的，所以可以放到这里来分享一下.

首先要确保此类可以在不同的浏览器下面运行。

关于xmlhttprequest的创建

createXMLHttpRequest : function ()

{

var xhr = null;

        /* 如果是ie浏览器，就执行如下的创建对象的方法，因为ie对xmlhttprequest

  对象实现的方法是以插件方式来实现的.

 */

    if (window.ActiveXObject)

    {

      var versions = ['Microsoft.XMLHTTP', 'MSXML6.XMLHTTP', 'MSXML5.XMLHTTP', 'MSXML4.XMLHTTP', 'MSXML3.XMLHTTP', 'MSXML2.XMLHTTP', 'MSXML.XMLHTTP'];

 

      for (var i = 0; i < versions.length; i ++ )

      {

        try

        {

          xhr = new ActiveXObject(versions[i]);

          break;

        }

        catch (ex)

        {

          continue;

        }

      }

    }

    else

{

   /* 如果是非ie浏览器，就用如下方法来实现*/

      xhr = new XMLHttpRequest();

    }

 

    return xhr;

}

刚创建了对象是没有任何意义的，人何人之间对想交流，客户端也最想和服务器进行交流，但是交流就得传递参数，但是在传递参数前要对参数进行加工，不要传递一此服务器无法理解的参数

 

parseParams : function (params)

  {

    var legalParams = "";

    params = params ? params : "";

  /* 参数的类型进行确认 */        

if (typeof(params) === "string")

    {

      legalParams = params;  /* 是string就直接进行传递*/

    }

    else if (typeof(params) === "object")

    {

      try

      {

          /* 我用jquery的插件来把对象转变成json */

        legalParams = "JSON=" + $.toJSON(params); /* 如果是对象类型就转变成json进行传递 */

      }

      catch (ex)

      {

        alert("Can't stringify JSON!");

        return false;

      }

    }

    else

    {

      alert("Invalid parameters!");

      return false;

    }

        return legalParams;

  },

要传递的参数也准备好了，下一步就是把这些参数用前面的对象传递的服务器。

/* *

  * 调用此方法发送HTTP请求。

  *

  * @public

  * @param   {string}    url             请求的URL地址

  * @param   {mix}       params          发送参数

  * @param   {Function}  callback        回调函数

  * @param   {string}    ransferMode     请求的方式，有"GET"和"POST"两种

  * @param   {string}    responseType    响应类型，有"JSON"、"XML"和"TEXT"三种

  * @param   {boolean}   asyn            是否异步请求的方式

  * @param   {boolean}   quiet           是否安静模式请求

  */

run : function (url, params, callback, transferMode, responseType, asyn, quiet)

{

    /*先把参数整理一下 */

params = this.parseParams(params);

/* 用什么方法对数据进行传送，默认的就是GET */

    transferMode = typeof(transferMode) === "string"

    && transferMode.toUpperCase() === "GET"

    ? "GET"

    : "POST";

 

    if (transferMode === "GET")

    {

      var d = new Date();

       /* 把参数加载到url后面 */

      url += params ? (url.indexOf("?") === - 1 ? "?" : "&") + params : "";

      url = encodeURI(url) + (url.indexOf("?") === - 1 ? "?" : "&") + d.getTime() + d.getMilliseconds();

      params = null;

    }

     /* 确定返回类型的数据 */

responseType = typeof(responseType) === "string" && ((responseType = responseType.toUpperCase()) === "JSON" || responseType === "XML") ? responseType : "TEXT";

/* 默认是异步传送 */

    asyn = asyn === false ? false : true;

 

    /* 创建xmlhttprequest对象 */

    var xhr = this.createXMLHttpRequest();

 

    try

    {

      var self = this;

 

      if (typeof(self.onRunning) === "function" && !quiet)

      {

        self.onRunning();

      }

      

      /* 打开连接*/

      xhr.open(transferMode, url, asyn);

      /* 如果是以POST方式来传输 */

      if (transferMode === "POST")

      {

          /* 设置提交类型 */

        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      }

     /* 如果是异步提交 */

      if (asyn)

      {

        xhr.onreadystatechange = function ()

        {

          if (xhr.readyState == 4)

          {

            switch ( xhr.status )

            {

              case 0:

              case 200: // OK!

                /*

                 * If the request was to create a new resource

                 * (such as post an item to the database)

                 * You could instead return a status code of '201 Created'

                 */

 

                if (typeof(self.onComplete) === "function")

                {

                  self.onComplete();

                }

 

                if (typeof(callback) === "function")

                {

                  callback.call(self, self.parseResult(responseType, xhr), xhr.responseText);

                }

              break;

 

              case 304: // Not Modified

                /*

                 * This would be used when your Ajax widget is

                 * checking for updated content,

                 * such as the Twitter interface.

                 */

              break;

 

              case 400: // Bad Request

                /*

                 * A bit like a safety net for requests by your JS interface

                 * that aren't supported on the server.

                 * "Your browser made a request that the server cannot understand"

                 */

                 alert("XmlHttpRequest status: [400] Bad Request");

              break;

 

              case 404: // Not Found

                alert("XmlHttpRequest status: [404] /nThe requested URL "+url+" was not found on this server.");

              break;

 

              case 409: // Conflict

                /*

                 * Perhaps your JavaScript request attempted to

                 * update a Database record

                 * but failed due to a conflict

                 * (eg: a field that must be unique)

                 */

              break;

 

              case 503: // Service Unavailable

                /*

                 * A resource that this request relies upon

                 * is currently unavailable

                 * (eg: a file is locked by another process)

                 */

                 alert("XmlHttpRequest status: [503] Service Unavailable");

              break;

 

              default:

                alert("XmlHttpRequest status: [" + xhr.status + "] Unknow status.");

            }

 

            xhr = null;

          }

        }

        if (xhr != null) xhr.send(params);

      }

      else

      {

        if (typeof(self.onRunning) === "function")

        {

          self.onRunning();

        }