面向对象的 Ajax

• 下载 CompressedVersion.zip - 1.3 KB
• 下载 UnCompressedVersionWithComments.zip - 1.9 KB

引言

我的目标是创建一个友好、易于使用、可维护的面向对象 AJAX 类。在创建过程中，我解决了多个请求中 ASYNC 和 SYNC 回调的大部分问题。此外，我还使发布数据变得容易，无需担心构建回发字符串。代码还使用了一些创造性的技术来创建类似 C# 风格类的面向对象风格的类和对象，因此外观和感觉将密切相关。由于代码紧密连接，js 文件的大小仅为 4.2 KB。但不要让大小欺骗您，有时小东西也能发挥巨大作用。好了，言归正传，让我们深入 API，看看这个“坏小子”是如何工作的。

类

标题： 连接
命名空间：System.Net.Ajax
描述：用于连接到网页或 XML 资源的主要 AJAX 连接类。
构造函数	描述	返回值
Connection()	空构造函数	连接对象
Connection(PageRequests)	用 System.Net.Ajax.PageRequests 类对象填充的构造函数。	连接对象
方法	描述	返回值
GetType()	获取类对象的类型。	类对象名称
Init()	用于构造函数初始化的内部方法。	构造对象
Create()	用于创建 ActiveX Ajax 或 XMLHttpRequest 对象的内部方法。	新 Ajax 对象
Open()	打开连接并检索网页或 XML 资源。	信息对象
属性	描述	返回值
ActiveXObject	获取当前运行的 ActiveX Ajax 或 XMLHttpRequest 对象。	Ajax 对象
PageRequests	包含所有请求对象的 PageRequests 类。	PageRequests 对象
Current	当前正在工作的请求对象。	当前请求对象

标题： PageRequests
命名空间：System.Net.Ajax
描述：PageRequests 类，用于保存请求类对象的数组集合。
构造函数	描述	返回值
PageRequests()	空构造函数	PageRequests 对象
PageRequests(Request)	用 System.Net.Ajax.Request 填充的构造函数	PageRequests 对象
方法	描述	返回值
GetType()	获取类对象的类型。	类对象名称
Init()	用于构造函数初始化的内部方法。	构造对象
AddRequest(Request)	将请求对象添加到数组集合。	无
属性	描述	返回值
请求	请求对象的数组集合。	请求数组

标题： 请求
命名空间：System.Net.Ajax
描述：请求类，用于保存请求的所有属性和参数。
构造函数	描述	返回值
Request()	空构造函数	请求对象
Request(RequestMethod)	用 System.Net.Ajax.RequestMethod 填充的构造函数。	请求对象
Request(RequestMethod, URL)	用 System.Net.Ajax.RequestMethod 和 URL 填充的构造函数。	请求对象
Request(RequestMethod, URL, Callback)	用 System.Net.Ajax.RequestMethod、URL 和回调方法填充的构造函数。	请求对象
Request(RequestMethod, URL, Callback, Async)	用 System.Net.Ajax.RequestMethod、URL 和回调方法填充的构造函数。	请求对象
Request(RequestMethod, URL, Callback, Async, UserObject)	用 System.Net.Ajax.RequestMethod、URL、回调方法、异步设置和可选的 UserObject 填充的构造函数。	请求对象
方法	描述	返回值
GetType()	获取类对象的类型。	类对象名称
Init()	用于构造函数初始化的内部方法。	构造对象
AddParam(Parameter)	将参数对象添加到请求对象参数数组集合。	无
AddParam(Name, Value)	将名称和值添加到请求对象参数数组集合。	无
属性	描述	返回值
方法	HTTP 请求方法 GET 或 POST。	字符串
URL	要检索的 URL。	字符串
Params	要随 POST 发送的参数。	参数对象数组
回调	请求加载和完成时要回调的方法。	方法引用
异步	调用应该是异步还是同步。	Bool
UserObject	一个额外的自由对象，用于随回调方法返回。	任何类型

标题： 参数
命名空间：System.Net.Ajax
描述：参数类，用于保存 POST 参数的名称和值。
构造函数	描述	返回值
Parameter()	空构造函数	参数对象
Parameter(Name, Value)	用名称和值填充的构造函数。	参数对象
方法	描述	返回值
GetType()	获取类对象的类型。	类对象名称
Init()	用于构造函数初始化的内部方法。	构造对象
属性	描述	返回值
名称	要 POST 的参数名称。	字符串
值	要 POST 的参数值。	字符串

标题： 命名空间
命名空间：Window.Namespace, Namespace
描述：一个自定义对象，用于处理 Javascript 中命名空间的创建。
方法	描述	返回值
Register(Name)	注册一个命名空间以在 Javascript 中使用。	无

标题： RequestMethod
命名空间：System.Net.Ajax
描述：一个用于处理 HTTP 方法的枚举。
属性	描述	返回值
Get	用于发送 Get HTTP 请求。	字符串
Post	用于发送 Post HTTP 请求。	字符串

代码示例

下面列出了以下类和对象的调用和代码用法。正如我之前所说，我创建这个 Ajax 类是为了让它更容易理解和维护，就像您期望 C# 这样的语言一样直接。

一个普遍的好经验法则是，首先声明我将要使用的内容。由于我编写了许多构造函数、属性和方法，因此使用此 AJAX 类有多种方法可以实现相同的目标。

声明

示例 1 (构造函数驱动)

var a = new System.Net.Ajax.Request("GET","default.html", Default_Callback, true);
var b = new System.Net.Ajax.PageRequests(a);
var c = new System.Net.Ajax.Connection(b);

示例 2 (属性驱动)

var a = new System.Net.Ajax.Request();
a.Method = "Get";
a.URL = "default.html";
a.Callback = Default_Callback;
a.ASync = true;
var b = new System.Net.Ajax.PageRequests();
b.AddRequest(a);
var c = new System.Net.Ajax.Connection();
c.PageRquests = b;

大多数使用我的代码的开发人员将首先创建他们的 Request 对象。您可以创建一个或多个，由您选择，因为它们是类对象。

它们也可以在 ASYNC 调用中处理，但以 SYNC 顺序处理，如果这有意义的话，所有这些都在同一个请求中。

例如

var a1 = new System.Net.Ajax.Request("GET","default1.html", Default_Callback, true);
var a2 = new System.Net.Ajax.Request("GET","default2.html", Default_Callback, true);
var b = new System.Net.Ajax.PageRequests();
b.AddRequest(a1);
b.AddRequest(a2);

关于请求对象的参数和属性的简要说明。第一个参数是 HTTP 请求方法，可以是 GET 或 POST。第二个参数是要检索的 URL。如果选择，可以向其中添加查询字符串。第三个参数是回调方法指针引用。这是您要在请求状态更改时回调的方法的名称，不带任何参数。第四个参数是一个布尔开关，用于使单个请求 SYNC 或 ASYNC。True 表示 ASYNC，false 表示 SYNC。

向 Post 请求添加参数

通过使用 Parameter 类对象，可以轻松地向您的 POST 请求添加参数。下面是添加回发值的示例。

示例 (方法 1)

var a = new System.Net.Ajax.Request("POST","default.html", Default_Callback, true);
a.AddParam("ID",1234567);
a.AddParam("Username","Adam");

示例 (方法 2)

var a = new System.Net.Ajax.Request("POST","default.html", Default_Callback, true);
var p = new System.Net.Ajax.Parameter("ID", 1234567);
a.AddParam(p);

示例 (方法 3)

var a = new System.Net.Ajax.Request("POST","default.html", Default_Callback, true);
var p = new System.Net.Ajax.Parameter();
p.Name = "ID";
p.Value = 1234567;
a.AddParam(p);

我使其易于构建参数，而无需了解后端发布字符串的工作原理。因此，在几秒钟内，您就可以创建可重用对象。

打开连接

这个类的核心和亮点是打开一个 Connection 并通过 AJAX 调用获取您需要的数据。使用我的类来完成这一点非常简单。下面我将向您展示两种方法。

示例 1 (Get 请求方法)

var a = new System.Net.Ajax.Request("GET","default.html", Default_Callback, true);
var b = new System.Net.Ajax.PageRequests(a);
var c = new System.Net.Ajax.Connection(b);
c.Open();

示例 2 (Post 请求方法)

var a = new System.Net.Ajax.Request("POST","default.html", Default_Callback, true);
a.AddParam("MyID","ABCDEFG");
var b = new System.Net.Ajax.PageRequests(a);
var c = new System.Net.Ajax.Connection(b);
c.Open();

哇，就这么简单！是的，就这么简单！面向对象的 JavaScript 是件美妙的事情，不是吗？

请求回调

在检索请求期间，会调用您的 Request 对象的回调方法。它将多次调用，并带有来自 Ajax 请求的状态更新。回调方法会发送一个自定义方法参数，其中包含许多对象。我将在这里列出它们。

• ReadyState - 这是一个整数值，表示请求是否已准备好以及是否可以访问 ResponseText 对象。0 = 未初始化 1 = 正在加载 2 = 已加载 3 = 交互 4 = 完成
• ResponseText - 这是请求返回的响应文本、网页或 XML 内容。
• Status - 这是 HTTP 请求的状态，200，404
• URL - 这是请求的 URL。
• UserObject - 这是一个可自由传递的自由用户对象。用于存储您想要的任何内容。
• Complete - 这是一个布尔值，告诉您 PageRequests 数组集合中的所有页面请求是否已完成。

方法回调示例

function Default_Callback(src)
{
    if(src.ReadyState==4)
     {
          if(src.Status==200)
          {
               alert(src.ResponseText);
   
               if(src.Complete)
                  {
                    alert("Finished All Page Requests");
               }
          }
     }
}

您在请求对象中声明的任何方法都将自动填充包含这些项的对象。

整合所有内容

<html>
<head>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
    
    var a = new System.Net.Ajax.Request("GET","default1.html", Testing, true);
    
    var a2 = new System.Net.Ajax.Request("POST","default2.html", Testing2, true);
    a2.AddParam("Test1","Yes");
    var b = new System.Net.Ajax.PageRequests(a);
    b.AddRequest(a2);
    var c = new System.Net.Ajax.Connection(b);
    c.Open();
    function Testing(src)
    {
         if(src.ReadyState==4)
     {
          if(src.Status==200)
          {
               alert(src.ResponseText);
          }
     }
    }
    
    function Testing2(src)
    {
         if(src.ReadyState==4)
     {
          if(src.Status==200)
          {
               alert(src.ResponseText);
   
               if(src.Complete)
                  {
                    alert("Finished All Page Requests");
               }
          }
     }
    }
</script>
</head>
</html>

此代码演示了您可以使 Connection 变得多么多样化。上面的示例以 SYNC(ASYNC) 方式同时执行 GET 和 POST 请求，到两个不同的回调方法。这就是我需要的 AJAX 类中的功能，但在其他地方找不到。所以我创建了它。我希望您喜欢我的 OO AJAX 类！

Ajax 类源代码

/* Copyright 2007 Codevendor.com */
// For registering namespaces
var Namespace = {
    
    Register : function(_Name)
    {
        var o = window;
        var x = false;
        for (var a = _Name.split("."); a.length > 0;)
        {
            var s = a.shift();
            if(a.length==0){ if(o[s]){x=true;} }
            if(!o[s]){o[s]={};}
            o = o[s];
        }
        
        if(x){ return 1; }
    }
}
//Create Namespaces----------------------------------------
Namespace.Register("System.Net.Ajax");
//---------------------------------------------------------
//Enumeration-----------------
System.Net.Ajax.RequestMethod = { Get:"GET", Post:"POST" };
//----------------------------
//Handles page requests in a collection----------------
System.Net.Ajax.PageRequests = function(){ return {
    Requests : null,
    
    //Gets the type of object---------------------------------------------
    GetType : function(){ return "System.Net.Ajax.PageRequests"; },
    //--------------------------------------------------------------------
    
    //Initializer---------------------------------------------------------
    Init : function()
    {
        this.Requests = new Array();
        if(arguments[0].length==1){ this.Requests.push(arguments[0][0]); }
        return this; 
    },
    //--------------------------------------------------------------------
    
    //Adds Requests to the collection
    AddRequest : function()
    {
        if(arguments.length==0 || arguments[0].GetType()!=
"System.Net.Ajax.Request"){ return; }
        this.Requests.push(arguments[0]);            
    }
    
}.Init(arguments);}
//Single Page Request
System.Net.Ajax.Request = function(){ return {
    Method : null,
    URL : null,
    Params : null,
    Callback : null,
    Async : false,
    UserObject : null,
    
    //Gets the type of object---------------------------------------------
    GetType : function(){ return "System.Net.Ajax.Request"; },
    //--------------------------------------------------------------------
    
    //Initializer---------------------------------------------------------
    Init : function()
    {
        switch(arguments[0].length)
        {
            case 1 : this.Method = arguments[0][0]; 
                     break;
            case 2 : this.Method = arguments[0][0]; 
                     this.URL = arguments[0][1]; 
                     break;
            case 3 : this.Method = arguments[0][0]; 
                     this.URL = arguments[0][1]; 
                     this.Callback = arguments[0][2]; 
                     break;
            case 4 : this.Method = arguments[0][0]; 
                     this.URL = arguments[0][1]; 
                     this.Callback = arguments[0][2]; 
                     this.Async = arguments[0][3]; 
                     break;
            case 5 : this.Method = arguments[0][0]; 
                     this.URL = arguments[0][1]; 
                     this.Callback = arguments[0][2]; 
                     this.Async = arguments[0][3]; 
                     this.UserObject = arguments[0][4]; 
                     break;
        }
        
        this.Params = new Array();
        return this; 
    },
    //--------------------------------------------------------------------
    
    //Adds Parameters to the parameter array collection
    AddParam : function()
    {
        switch(arguments.length)
        {
            case 1 : this.Params.push(arguments[0]); break;
            case 2 : this.Params.push(new 
              System.Net.Ajax.Parameter(arguments[0], arguments[1])); break;
        }
    }
    
}.Init(arguments);}
//Page Request Parameter Object
System.Net.Ajax.Parameter = function(){ return {
    Name : null,
    Value : null,
    //Gets the type of object---------------------------------------------
    GetType : function(){ return "System.Net.Ajax.Parameter"; },
    //--------------------------------------------------------------------
    
    //Initializer---------------------------------------------------------
    Init : function()
    { 
        if(arguments[0].length==2){ this.Name = arguments[0][0]; 
                                    this.Value = arguments[0][1]; }
        return this; 
    }
    //--------------------------------------------------------------------
}.Init(arguments);}
System.Net.Ajax.ActiveObject = 0; //For knowing what type of active X object.
//For handling ajax connections
System.Net.Ajax.Connection = function(){ return {
    
    ActiveXObject : null,
    PageRequests : null,
    Current : null,
    
    //Gets the type of object---------------------------------------------
    GetType : function(){ return "System.Net.Ajax.Connection"; },
    //--------------------------------------------------------------------
    
    //Initializer---------------------------------------------------------
    Init : function()
    { 
        if(arguments[0].length==1){ this.PageRequests = arguments[0][0]; }
        return this; 
    },
    //--------------------------------------------------------------------
    
    //Creates the active x object for use
    Create : function()
    {
        switch(System.Net.Ajax.ActiveObject)
        {
            case 0:
                if(window.ActiveXObject)
                {
                    try 
                    { 
                        System.Net.Ajax.ActiveObject = 2;
                        return new ActiveXObject("Msxml2.XMLHTTP");        
                    } 
                    catch(e) 
                    {  
                        System.Net.Ajax.ActiveObject = 3;
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    }
                }
                else
                {
                    if(window.XMLHttpRequest)
                    {
                        System.Net.Ajax.ActiveObject = 1;
                        return new XMLHttpRequest();
                    }
                }
            
            case 1: return new XMLHttpRequest();           
            case 2: return new ActiveXObject("Msxml2.XMLHTTP");           
            case 3: return new ActiveXObject("Microsoft.XMLHTTP");
            default: break;
        }
        
        //No Ajax Object Found-----------
        System.Net.Ajax.ActiveObject = -1;
        throw "Missing a required ajax object.";
        return false;
        //-------------------------------
    },
    
    Open : function()
    {
        //Check if page requests has something------
        if(this.PageRequests==null){ return; }
        //------------------------------------------
        
        //Create Variables--------------------------
        var obj = this;
        var Data = "";
        //------------------------------------------
        
        //Create ActiveX----------------------------
        this.ActiveXObject = this.Create();
        //------------------------------------------
        
        //Get Request-------------------------------
        this.Current = this.PageRequests.Requests.shift();
        //------------------------------------------
        
        //Open Connection---------------------------
        this.ActiveXObject.open(this.Current.Method, this.Current.URL, 
                                this.Current.Async);
        //------------------------------------------
        
        //Create ActiveX Callback-------------------
        this.ActiveXObject.onreadystatechange = function() 
        {obj.OnReadyStateChange();}
        //------------------------------------------
        
        //Open Ajax Request---------------------------------------------------
        if(this.Current.Method=="POST")
        {
            this.ActiveXObject.setRequestHeader("Content-type", 
                                         "application/x-www-form-urlencoded");
               
            if(this.Current.Params!=null && this.Current.Params.length!=0)
            {
                for(var Param in this.Current.Params) 
                {
                    Data += (Data=="") ? this.Current.Params[Param].Name +
                         "=" + this.Current.Params[Param].Value : "&" +
                         this.Current.Params[Param].Name + "=" +
                         this.Current.Params[Param].Value;
                }
            }
            this.ActiveXObject.send(encodeURI(Data));
        }
        else
        {
            this.ActiveXObject.send(null);
        }
        //--------------------------------------------------------------------
    },
    
    //ActiveXObject callback
    OnReadyStateChange : function()
    {
        //Get Ajax objects for return-----------------
        var r = {};
        r.ReadyState = this.ActiveXObject.readyState;
        r.ResponseText = (this.ActiveXObject.readyState==4)?
                                      this.ActiveXObject.responseText:null;
        r.Status = (this.ActiveXObject.readyState==4)?
                                      this.ActiveXObject.status:null;
        r.URL = this.Current.URL;
        r.UserObject = this.Current.UserObject;
        r.Complete = (this.ActiveXObject.readyState==4 && 
                       this.PageRequests.Requests.length==0) ? true : false;
        //--------------------------------------------
        
        //Call Callback Method---------------
        if(this.Current.Callback!=null){this.Current.Callback(r);}
        //-----------------------------------
        
        //Loop For Many URLS
        if(this.ActiveXObject.readyState==4)
        { 
            if(r.Complete){ this.PageRequests=null; this.ActiveXObject.abort();
                            this.Current=null; }
            else{ this.Open();}
        }
    }
      
}.Init(arguments);}

未来的增强

1. 一个用于请求头支持的新类。- 已完成
2. 一个用于查询字符串支持的新类。- 已完成
3. ResponseXML 和 ResponseTEXT 分离. - 已完成
4. JSON / AJAX 对象传递。
5. 错误处理和完整的空支持。- 已完成
6. .NET 与回调集成。

当前版本

2007 年 10 月 1 日 - 版本 1.0.1

2007 年 9 月 10 日 - 版本 1.0

使用、复制、分发和修改的条款和条件

本代码由版权所有者和贡献者“按原样”提供，不提供任何明示或暗示的保证，包括但不限于适销性和特定用途适用性的暗示保证。在任何情况下，版权所有者贡献者均不对任何直接、间接、偶然、特殊、惩戒性或后果性损害（包括但不限于采购替代商品或服务；使用、数据或利润损失；或业务中断）承担责任，无论其成因以及基于何种责任理论，无论是合同、严格责任还是侵权（包括疏忽或其他），即使已被告知发生此类损害的可能性。