通过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());

        }

你可能感兴趣的:(Ajax)