jim97net 阅读(712) 评论(2)

一、 导言(http://www.webjx.com/htmldata/2006-04-24/1145839632.html)

  我们知道,ASP.net应用程序事实是在服务器上运行的,用户的请求要不断地送往远程的服务器,服务器执行完本地的程序后把重新装载页面再发送客户端。所以就出现了不断刷新的问题,页面不断闪烁。用户不厌其烦,运行效率也大大4降低,服务器的负荷加重。事实,客户端的请求在某一时刻只是通过向 Web 服务器提交新的请求来检索对用户输入所做的响应。这种情况下,开发人员可以使用 JavaScript 在客户端上加载所有响应,从而提供更好的用户体验。遗憾的是,在很多情况下,不必将所有响应都返回或加载到 JavaScript 要更好,只返回所要的结果,执行过程仍然在服务器上运行。AJAX 提供了一种新的中间选择,能够在维持及时响应和灵活性的同时利用基于服务器的应用程序。

  AJAX依靠服务器作为中介来分发和处理请求。为了完成这项工作,.net封装类依赖于客户端的请求对象,而xmlHttpRequest对象被大部分的浏览器支持,因此使用这个对象是一个不错的解决方案。

  因此,为了实现不刷新的页面,我们的客户端页面做成静态页面。静态页面通过Ajax.net调用.net类的方法。这是一种最简洁又高效的解决方案。

  
二、 如何应用Ajax.net

  1.在工程中引入Ajax.dll文件。

  Ajax.dll是微软开发的应用在asp.net上的一个类库文件。该类库封装了XmlHttpRequest请求服务器的实现细节,是Ajax知识应用在asp.net平台上的解决技术。在.net项目中,添加上对其的引用,然后就可以开始使用ajax.dll封装进行开发了。

  2.在web.config中设置HttpHandle

  为了使其可以工作,第一步必须做的是在web.config中安装设置封装包的HttpHandle,不去详细解释HttpHandle是如何工作的,我们只需要了解他们可以用来处理asp.net请求。例如,所有的目的为*.aspx的请求可以通过System.Web.UI.PageHandlerFactory类发送到控制句柄,简单的说,我们把任何向ajax/*.ashx的请求发送到Ajax.PageHandlerFactory的请求处理句柄。

  3.编写服务端函数

  现在我们编写服务器端函数,他们可以被客户端异步的调用。尽管现在还不能支持全部的返回类型,我们仍坚持服务器端添加功能。在codebehind文件的页面类里,添加下面的方法:

[Ajax.AjaxMethod()]
public int ServerSideAdd(int firstNumber, int secondNumber)
{
 return firstNumber + secondNumber;
}


  注意,这个函数有Ajax.AjaxMethod()定制属性,属性服务会告知ajax封装类为此方法创建一个javascript代理,这样才能被客户端调用。

  三、 应用实例(点击下载源码)

  我们的应用程序主要是对数据库的操作,数据库的数据通过页面的表格呈现,页面完成增加、删除、更新、查询等功能。更主要的是它是一个通用的并且实现方法极为巧妙的例子。任何页面没有刷新现象并且代码十分精巧。下面的就通过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="http://www.okbase.net/file/link?u=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);
}


  OpenEditWeb方法是当用户点击的单元格后打开InfoClass_edit.aspx页在该页上完成编辑该行数据的功能。如有更新行则把当前行的内容更换..


  ·建立Ajax类。(见文件AjaxData.cs)命名空间为Ttyu,类名为AjaxData。

  1. 定义静态变量mDt。mDt是读取到物理表的数据并保存在内存中的数据表对象。我们的主要操作都是靠它完成。定义为静态的是我们不希望反复访问数据库。我们一次性读取,永久使用。

static public DataTable mDt;


  2.定义我们的主要方法。在每个方法的上行加上[Ajax.AjaxMethod()]。

//得到表TableName的所得数据,以XML字符串返回
[Ajax.AjaxMethod()]
public string GetTableOuterHTML(string TableName)
{
 DataTable dt=db.DB.GetDataTable(TableName);
 mDt=dt;
 return db.GetTableOuterHTML(dt.DefaultView);
}


  GetTableOuterHTML方法是由物理表名读取到内存中并通过其视图得到以XML格式的Table。这里我们读取后保存在mDt中。用数据表的视图是我们的查询也通过该方法呈现数据。

//得到表TableName的所得数据,以XML字符串返回
[Ajax.AjaxMethod()]
public string GetXmlFindTable(string RowFilter)
{
 DataTable Dt=mDt;
 DataView dv=Dt.DefaultView;
 dv.RowFilter=RowFilter;
 return db.GetTableOuterHTML(dv);
}


  GetXmlFindTable是按查询条件从mDt中查询到数据并返回给客户端。

//删除行
[Ajax.AjaxMethod()]
public bool DeleteRow(string TableName,int ID)
{
 string SQL = "delete from " + TableName + " where ID=" + ID;
 bool isSuccess= db.DB.ExecuteSQL(SQL);
 if(isSuccess)
 {
  DataRow dr=mDt.Select("ID="+ID)[0];
  mDt.Rows.Remove(dr);
 }
 return isSuccess;
}


  DeleteRow是删除物理表的一行,并在mDt中也同步地删除。

//把数据行转化为数组返回
[Ajax.AjaxMethod()]
public object GetDataRow(int iID)
{
 DataRow dr=mDt.Select("ID="+iID)[0];
 return dr.ItemArray;//数字类型不能为空
}
GetDataRow是从内存表mDt得到ID号为iID的一行,通过数组方式返回给客户端。
[Ajax.AjaxMethod()]
public string GetToolBarTable(string TableName)
{
 return db.GetToolBarTable(TableName);
}


  GetToolBarTable是组织成工具栏的内容返回给客户端。

  ·建立业务数据类ttyuPKData。(见文件ttyuPKData.cs)命名空间为Ttyu,类名为ttyuPKData。

  该类中有些常用的方法。

  public bool InsertDataRow(DataRow dr,int BeginColumnIndex)为向物理表中把数据行dr插入,BeginColumnIndex表示从开始的列插入。

  public bool UpdateDataRow(DataRow dr,int BeginColumnIndex,string Filter) 为向物理表中把数据行dr的数据更新,BeginColumnIndex表示开始更新的列。Filter表示所要更新的行。是一筛选条件。

  public string GetTableOuterHTML(DataView dv)是个通用的把数据视图展现为Table的方法。并通过class定义样式。

//由一个数据视图得到该表的表头及所有数据,以XML格式的表字符串返回
public string GetTableOuterHTML(DataView dv)
{
StringBuilder ret = new StringBuilder();
ret.Append("<table class='DataGrid' id='DataGrid1' cellspacing=1 cellpadding=4>" );
ret.Append("<tr class='DataGridHeaderStyle'>");
ret.Append("<td width='5'> <input type='checkbox' onclick='SelectAll(this)'></td> ");
//标题
foreach(System.Data.DataColumn dc in dv.Table.Columns )
{
if(dc.Ordinal==0) //该列隐藏
ret.Append("<td class='IDColumn'>"+dc.ColumnName+"</td>");
else
ret.Append("<td>"+dc.ColumnName+"</td>");
}
ret.Append("</tr>");
//这时是视图中筛选后的数据
foreach(DataRowView drv in dv)
{
DataRow dr=drv.Row;//dv.Table.Rows[i];
ret.Append(GetRowOuterHTML(dr));
}
ret.Append("</table>");
return ret.ToString ();
}


  ·建立页面数据编辑类(见文件PageEdit.cs)命名空间为Ttyu.Web,类名为PageEdit。

  该类是个通用的通过继承的技巧实现了所有编辑页(包括增加、修改数据)功能的统一处理。页中不需要一行代码。

  结论

  Ajax技术可以给客户端提供丰富的客户体验,而ajax.net为您容易的实现这样强大的功能提供了可能。静态页面是不出现刷新问题的。我们的静态页面通过Ajax完全可与asp.net结合起来。通过.net进行后台的管理。前台通过javascript调用。这样完美的结合是解决问题的最佳方法。

作者:黎宇  来源:天极开发 

评论列表
木子的blog
re: 静态页中利用AJAX.NET实现无刷新页面

引用: http://dev.csdn.net/author/deamonchan/1e2f40ae931f4b4bb9f9648031a4aacf.html


<!--注册模块-->default.asp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax - Sample1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> //请一定要将此页的编码设为UTF-8,否则将出现乱码
<meta name="author" content="tonyhl[at]126.com" />
<meta http-equiv="pragma" content="no-cache"/>
<script language="javascript" type="text/javascript" src="reg.js"></script>
<link rel="stylesheet" href="css.css" type="text/css" media="all"/>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 409px;
top: 88px;
}
-->
</style>
</head>
<body>
<h2>Ajax应用实例: 注册模块</h2>
<div id="Layer1">
<div id="msg"></div>
</div>
ID: <input type="text" id="regid" />
Password: <input type="password" id="regpassword" />
<input name="f" type="file" />
<input type="submit" id="regsubmit" value="注册" onclick="Check()" />
<h2>当注册ID为 tony的用户时,后台验证该ID已存在,返回提示信息<br />
为突出显示无刷新效果,服务器端程序将自动进行百万加法运算
</h2>
</body>
</html>

<!----表单数据提交脚本--->REG.JS

function GE(a){return document.getElementById(a);}
function Check(){
if(GE('regid').value==''){GE('msg').innerHTML='ID不能为空';return false}
if(GE('regpassword').value==''){GE('msg').innerHTML='password 不能为空';return false}
var X=new ActiveXObject("Msxml2.XMLHTTP");
if(X){
GE('regsubmit').disabled=true;
X.onreadystatechange=function(){
if(X.readyState==4){
if(X.status==200){
eval(X.responseText)
}
else{GE('msg').innerHTML=X.statusText}
}
else{GE('msg').innerHTML="正在提交数据..."}
};
X.open('POST','reg.asp',true);
X.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var SendData = 'regid='+GE('regid').value+'&regpassword='+GE('regpassword').value+'&file='+GE('f').value
X.send(SendData)
}
else{
GE('msg').innerHTML='你的浏览器不支持XMLHttpRequest'
}
}




<!---程序处理--->reg.asp

<%@ LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>//CODEPAGE必须为650001,否则也出现乱码,如果有HTML文字,一定设为UTF-8编码,否则将出现乱码.
<%
Dim regid, regpassword, str
regid=Request.Form("regid")
regpassword=Request.Form("regpassword")
f=Request.Form("file")
Dim i, ii
ii = 0
For i = 0 To 1000000
ii = ii + i
Next
If regid="" or regpassword="" then
str = "ID和PASSWORD必须填写"
Else
If regid <> "tony" Then
str = "注册成功,ID为" & regid & " , 密码为" & regpassword&f
Else
str = "注册失败,ID已经存在"
End If
End if
Response.Write "GE('msg').innerHTML='" & str & "';GE('regsubmit').disabled=false"
Response.End
%>


fgfg
re: 静态页中利用AJAX.NET实现无刷新页面
http://zhanglimei120.spaces.live.com/

发表评论
切换编辑模式