应用实例

    我们的应用程序主要是对数据库的操作，数据库的数据通过页面的表格呈现，页面完成增加、删除、更新、查询等功能。更主要的是它是一个通用的并且实现方法极为巧妙的例子。任何页面没有刷新现象并且代码十分精巧。下面的就通过Ajax技术实现这些功能。

    ·建立工程HttpForAjax，并在您的工程中引入Ajax.dll文件。
   ·在您的Web.config中加上。

＜httpHandlers＞ 
＜add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/＞ 
＜/httpHandlers＞ 

    ·建立您的HTML页。

    1. 向工程里添加HTML页InfoClass.htm。该页面完成查询、常用工具及数据展现等功能。页面主要放了四个DIV，一个是树" divTree "。一个是查询区叫"divFindTable"的，一个是工具栏叫"divToolbar"的，一个是数据区叫"divDataGrid"的。
    2. 在 ＜HEAD＞与＜/HEAD＞间加入一些引用如下：

＜script src=js/Xml.js＞＜/script＞ 
＜link href="css/myStyle.css" type="text/css" rel="stylesheet"＞ 
＜script src="/HttpForAjax/ajax/common.ashx" type="text/javascript"＞＜/script＞ 
＜script src="/HttpForAjax/ajax/Ttyu.AjaxData,HttpForAjax.ashx" type="text/javascript"＞＜/script＞ 

    说明：Xml.js是用javascript写的一些客户端程序。

　　myStyle.css为样式风格文件。
　　common.ashx为调用Ajax的公用方法。
　　HttpForAjax.ashx为下面我们要用Ajax编写的类的引用。其中HttpForAjax为工程的命名空间。
　　Ttyu.AjaxData为自己开发的类，其中Ttyu为命名空间，AjaxData为类名。
    3. 用javascript编写脚本方法，

function Init() 
{ 
　DomTree=new dhtmlXTreeObject(document.getElementById('divTree'),"100%","100%",0); 
　DomTree.setImagePath("imgs/"); 
　DomTree.enableDragAndDrop(true) 
　DomTree.setDragHandler(myDragHandler); 
　DomTree.setOnClickHandler(SelectTreeNode); 
　var s= AjaxData.GetXmlTree().value; 
　DomTree.loadXMLString(s); 
　DomTree.openItem("R_1"); 
　SelectTreeNode("R_1"); 
　divToolbar.innerHTML=AjaxData.GetToolBarTable(TableName).value; 
　divDataGrid.innerHTML=GetTableOuterHTML(TableName); 
} 

    Init方法通过Ajax的GetXmlTree方法得到树的内容，GetToolBarTable取得工具栏的内容。通过GetTableOuterHTML方法取得物理表tInfoClass的所有数据并通过表格展现出来。 

function Find() 
{ 
　var Table=AjaxData.GetXmlFindTable("年级名称 like '%"+txtName.value +"%'"); 
　divDataGrid.innerHTML=Table.value; 
}

    查询方法Find()是通过Ajax的GetXmlFindTable方法按年级名称查询并把结果展现出来。

function OpenAddWeb() 
{ 
　var RetID =OpenAddWin('InfoClass_edit.aspx?IsAdd=true',370,300); 
　if(RetID==-1) return; 
　InsertRow(DataGrid1,RetID); 
} 

    OpenAddWeb方法打开InfoClass_edit.aspx页在该页上完成增加数据的功能。如果返回值不为-1则表示有新数据增加的并把数据插入到表格的最后一行。RetID表示最后一行的ID.

function OpenEditWeb(ThisCell) 
{ 
　var ID=ThisCell.previousSibling.previousSibling.innerText; 
　var RetID =OpenAddWin("InfoClass_edit.aspx?ID="+ID+"&IsAdd=false",370,300); 
　if(RetID==-1) return; 
　//有更新行 
　var CurrRow=ThisCell.parentElement 
　SetRowText(CurrRow); 
　// SetRowText(CurrRow,RetDataRow); 
}