如何使用 AJAX 实现导航面板

• 下载源代码文件 - 17 Kb

引言

本文将演示如何基于 AJAX 和 ClientScriptCallBack 实现 Web 应用程序，并提供一个简单的示例。此外，本文试图指出使用 AJAX 和 ClientScriptCallBack 的关键特性。例如

• 向 Web 服务器发送参数
• 减少客户端和 Web 服务器之间的传输量
• 减少服务器中的进程开销

使用代码

应用程序的主要工作是实现一个导航面板。为此，它从 SQL Server 数据库中的两个表中读取所需信息。这些表分别名为 Nav_Master 和 Nav_Details。 Nav_Master 表用于保存主类别的信息，而 Nav_Details 表则用于保存与 Nav_Main 中存储的主类别相关的子类别信息。

创建表的 SQL 命令

--Create Master table ------------------------------


CREATE TABLE [dbo].[Nav_Master] (
    [ID] [int] IDENTITY (1, 1) NOT NULL ,
    [CatName] [nvarchar] (100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL 
) ON [PRIMARY]


--Create Detail table ------------------------------

CREATE TABLE [dbo].[Nav_Details] (
    [ID] [int] IDENTITY (1, 1) NOT NULL ,
    [ID_Father] [int] NULL ,
    [Name] [nvarchar] (100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
    [URL] [nvarchar] (255) COLLATE SQL_Latin1_General_CP1_CI_AS NULL 
) ON [PRIMARY]

在这个程序中，当用户点击任何主类别以选择其中一个时，将调用名为 GetData(Item , ID_Cat) 的 JavaScript 方法，将所选类别的 ID 和编号发送到 JS 处理器 (UseCallBack 方法)。

function GetData(Item , ID_Cat)
{
    ColapseAll(Item);
   
    if( document.getElementById("Nav_Dav_" + Item).style.display == "none"  )
    {   // Load Special Image when Click To Master 

        SetDefaultImage_Src();
        document.getElementById('Nav_IMG' + Item ).src = "Images/UP.png";
        document.getElementById("Nav_Dav_" + Item).style.display = "block";

        if (document.getElementById("Nav_Dav_" + Item).innerHTML == "" )
        {   // Goto Server And Show Loadin In The Client Side

            UseCallBack( ID_Cat , Item);
            ShowLoading(Item , "Show");
        }
    }
    else
    {   // Load Special Image - Close Image

        document.getElementById("Nav_Dav_" + Item).style.display = "none" ;
        SetDefaultImage_Src();
    }
}

之后，Web 服务器上的处理开始，RaiseCallbackEvent 方法将被调用 (RaiseCallbackEvent 与 ICallbackEventHandler 相关)。 RaiseCallbackEvent 方法将从 Nav_Detail 表中检索有关与所选主类别相关的子类别的信息，并将它们保存为 string 到 public _MasterCat 变量中，该变量用分隔符分隔以指示字段和记录。

RaiseCallbackEvent 方法定义如下

public void RaiseCallbackEvent(string eventArgument)
{
    String DBConString = 
     System.Configuration.ConfigurationManager.
            AppSettings["DBConString"].ToString();
    SqlConnection Con = new SqlConnection(DBConString);
    SqlCommand Comm = new SqlCommand("Select Name,URL From" + 
                      " Nav_Details Where ID_Father=@ID", Con);
    Comm.Parameters.AddWithValue("@ID", eventArgument);
    Con.Open();
    SqlDataReader Reader = Comm.ExecuteReader();
    while (Reader.Read())
    {
        _SearchResult += Reader[0] + "#" + Reader[1] + "@";
    }
    Con.Close();
}

GetCallbackResult 方法返回 _MasterCat 变量。GetCallbackResult 定义如下

public string GetCallbackResult()
{
    System.Threading.Thread.Sleep(500);
    return _SearchResult;
}

然后，在客户端，另一个名为 GetFromServer 的方法将通过获取 RaiseCallBack 方法发送的字符串并分隔字符串中的字段和记录，并添加 HTML 元素来显示子类别。

function GetFromServer( Server_Str , context )
{
    var Array = Server_Str.split("@");
    var Count = Array.length;
    var _String; 
    
    _String = "<table border='0' cellpadding='0' cellspacing='0' " + 
              "style='width: 400px; background-color: "+ 
              DetailBG_Color +"'>"  + Detal_Top_Botton ;
    for (var i=0 ; i< Array.length-1 ; i++)
    {
        var SmallArray = Array[i].split("#");
        _String += "<td align='right' style='width: 10px; " + 
                   "valign='middle'><img " + 
                   "src='Images/arrow1.gif' />" + 
                   "</td><td align='left' " + 
                   "class='TD_4' style='width: 390px; height: 26px; " + 
                   "background-color: " + DetailBG_Color +
                   "'valign='middle'>   " + 
                   "<a class='Link-5' href='"+ 
                   SmallArray[1] +"' >" + 
                   SmallArray[0]+" </a></td></tr>";
    }
    _String += Detal_Top_Botton  + "</table>";    
    document.getElementById("Nav_Dav_" + 
                            context).innerHTML  = _String;
    
    // Hide Loading In The Client

    ShowLoading(context , "Hide");
}

非常重要的是要注意，如果之前已经从服务器获取了关于类别的一些信息，则无需再次获取它们。

使用辅助 JavaScript 方法

在这个例子中，还使用了其他一些 JavaScript 方法，如下所示

• Showloading 方法用于在应用程序等待服务器响应时显示一个简单的加载图片。
• DefaultImageSrc 方法用于将主类别中的所有图像返回到默认状态。
• CollapseAll 方法用于折叠所有主类别，除了选定的类别。

function SetDefaultImage_Src(){
    for (var i=1 ; i<= CountRow ; i++)
    {
         document.getElementById('Nav_IMG' + i ).src = 
                                  "Images/down.jpg";
    }
}
function ShowLoading(ThisRow , State){
    var This='none' , All='none';
    if (State == "Show") {This = "block" }
    for (var i=1 ; i<= CountRow ; i++)
    { 
        if (i != ThisRow)
            document.getElementById("LoadingIMG_" + 
                                    i).style.display = All ;
        else
        {
            document.getElementById("LoadingIMG_" + 
                                    i).style.display = This ;
        }
    }
}
function ColapseAll(ThisRow){
    for (var i=1 ; i<= CountRow ; i++)
    { 
        if (i != ThisRow)
            document.getElementById("Nav_Dav_" + 
                              i).style.display = "none";
    }
}

祝您好运！