通过Ajax技术实现无刷新的更新数据表格

HTML代码(WebForm1.aspx)
<HTML>
    
<HEAD>
        
<title>WebForm2</title>
        
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        
<meta content="C#" name="CODE_LANGUAGE">
        
<meta content="JavaScript" name="vs_defaultClientScript">
        
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        
<script language="javascript">
             
var xmlHttp;
             
function getdata()
             {
                 
                xmlHttp
=new ActiveXObject("MSXML2.XMLHTTP");                              
                xmlHttp.onreadystatechange
=getread;
                xmlHttp.Open(
"GET","AjaxProcess.aspx",true);
                xmlHttp.Send();
                                 
             }
             
function getread()
             {
                 
if (xmlHttp.readyState==4)
                 {
                     
if (xmlHttp.status==200)
                     {
                         
                         
var xmlReturn=xmlHttp.responseXML;                                                                                                 
                         
var node=xmlReturn.selectSingleNode("//NewDataSet").childNodes;                         
                         
var tbody=document.createElement("tbody");                         
                         
for (var i=0;i<node.length;i++)
                         {                         
                             
var cnode=node[i].childNodes;
                             
var tmpTr= document.createElement("tr");
                             
for(var j=0;j<cnode.length;j++)
                             {
                                
if ((cnode[j].nodeName=="c_id"|| (cnode[j].nodeName=="c_name"))
                                {
                                    
var tmpTd= document.createElement("td");
                                    tmpTd.setAttribute(
"style.WIDTH","50px");
                                    tmpTd.innerText
=cnode[j].text
                                    tmpTr.appendChild(tmpTd);                                
                                }                                                                
                                
                             }
                             tbody.appendChild(tmpTr);                             
                             
                         }
                         document.getElementById(
"DataGrid2").appendChild(tbody);
                         
                     }
                     
else
                     {
                         alert(
"xmlHttp.status="+xmlHttp.status);
                     }
                 }
             }
        
</script>
    
</HEAD>
    
<body MS_POSITIONING="GridLayout">
        
<form id="Form1" method="post" runat="server">
            
<INPUT style="Z-INDEX: 101; LEFT: 32px; POSITION: absolute; TOP: 40px" onclick="getdata()"
                type
="button" value="Button">
            
<table id="DataGrid2" style="Z-INDEX: 102; LEFT: 32px; WIDTH: 344px; POSITION: absolute; TOP: 72px; HEIGHT: 24px">
                
<TR>
                    
<TD style="WIDTH: 122px">机构号</TD>
                    
<TD style="WIDTH: 50px">机构名</TD>
                
</TR>
            
</table>
        
</form>
    
</body>
</HTML>

服务端代码(另外一个aspx.cs文件WebForm2.aspx)
        private void Page_Load(object sender, System.EventArgs e)
        {
            
// 在此处放置用户代码以初始化页面
            SqlConnection sqlconn=new SqlConnection("Initial Catalog=myDataBase;Data Source=192.168.0.166;UID=sa;PWD=123");
            SqlCommand sqlcomm
=new SqlCommand("select * from tb_table",sqlconn);
            System.Data.SqlClient.SqlDataAdapter adapter
=new SqlDataAdapter();
            adapter.SelectCommand
=sqlcomm;
            DataSet ds
=new DataSet();
            sqlconn.Open();
            adapter.Fill(ds);
            Response.ContentType
="text/xml";
            Response.Write(ds.GetXml());

        }

posted on 2006-03-20 18:06  DoNet鸟  阅读(1373)  评论(1编辑  收藏  举报

导航