无刷新显示数据--xmlHttp的应用

前阵子找工作面试的时候,主管问有没有做过无刷新显示数据,很尴尬的回答没有之后立刻试了一下,感觉挺简单的,麻烦的是JS操作XMLDocoment显示在页面上。
简单将代码贴出来,欢迎指导:)
-------------------------------------------------test.aspx.vb---------------------------------------------
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'在此处放置初始化页的用户代码

If Not (Me.Request("state") Is Nothing) Then '第一次进入,xmlHttp还未POST时直接跳过
Dim Ds As New DataSet
Me.Da.SelectCommand.CommandText = "select * from " + Me.Request("state").ToString
Me.Da.Fill(Ds)
Dim writer As New XmlTextWriter(Response.OutputStream, Response.ContentEncoding)
writer.Formatting = Formatting.Indented
writer.Indentation = 4
writer.IndentChar = " "
Ds.WriteXml(writer) '将DS的数据写到XML
writer.Flush()
Response.End()
writer.Close()
End If
End Sub

----------------------------------------test.aspx------------------------------------------

1@ Page Language="vb" AutoEventWireup="false" Codebehind="test.aspx.vb" Inherits="norefresh.test"
 1<html>
 2<head>
 3<title>NoRefresh</title>
 4<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"/>
 5<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE"/>
 6<meta content="JavaScript" name="vs_defaultClientScript"/>
 7<meta content=" http://schemas.microsoft.com/intellisense/ie5 " name="vs_targetSchema"/>
 8<script>   
 9function load(state){   
10var oXMLHTTP = new ActiveXObject("MSXML2.XMLHTTP");   
11var oDoc = new ActiveXObject("MSXML2.DOMDocument");   
12oXMLHTTP.open("POST", "test.aspx?state="+state, false);   
13oXMLHTTP.send("");   
14result = oXMLHTTP.responseText;   
15oDoc.loadXML(result);   
16var field = document.all("TxtField").value;   
17var field2= document.all("TxtField2").value;   
18maxNum_out = oDoc.getElementsByTagName(field).length;   
19document.all("tdtitle").innerHTML=field;   
20document.all("tdtitle2").innerHTML=field2;   
21document.all("td1").innerHTML="";   
22document.all("td2").innerHTML="";   
23  
24for(i=0;i<maxNum_out;i++) {   
25str1 =oDoc.getElementsByTagName(field).item(i).text;   
26str2 =oDoc.getElementsByTagName(field2).item(i).text;   
27document.all("td1").innerHTML+=str1+"<BR>";   
28document.all("td2").innerHTML+=str2+"<BR>";   
29}   
30}   
31</script>
32</head>
33<body ms_positioning="GridLayout">
34<form id="Form1" method="post" runat="server">
35<font face="宋体">
36<asp:textbox height="26px" id="TxtSQL" runat="server" style="Z-INDEX: 101; LEFT: 18px; POSITION: absolute; TOP: 22px" tooltip="SQL hare!" width="560px">authors</asp:textbox><input onclick="load(TxtSQL.value)" style="Z-INDEX: 102; LEFT: 472px; WIDTH: 99px; POSITION: absolute; TOP: 56px; HEIGHT: 26px" type="button" value="Go"/>
37<table border="1" cellpadding="1" cellspacing="1" id="Table1" style="Z-INDEX: 103; LEFT: 16px; WIDTH: 544px; POSITION: absolute; TOP: 104px; HEIGHT: 190px" width="544">
38<tr>
39<td id="tdtitle" style="WIDTH: 166px; HEIGHT: 33px"></td>
40<td id="tdtitle2" style="HEIGHT: 33px"></td>
41</tr>
42<tr>
43<td id="td1" style="WIDTH: 166px"></td>
44<td id="td2"></td>
45</tr>
46</table>
47<asp:textbox height="25px" id="TxtField" runat="server" style="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 56px" tooltip="Field Hare!" width="79px">city</asp:textbox><asp:textbox height="24px" id="TxtField2" runat="server" style="Z-INDEX: 106; LEFT: 104px; POSITION: absolute; TOP: 56px" width="80px">au_fname</asp:textbox></font></form>
48</body>
49</html>

这个例子非常简单,后来尝试用JS把客户端的XMLDocument Send到服务器端,再读入DataSet,想直接绑定到DataGrid,但是失败了,代码如下,希望哪位高手指点一二

---------------------------------------test.aspx.vb------------------------------------
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'在此处放置初始化页的用户代码

If Not (Me.Request("state") Is Nothing) Then
Dim Ds As New DataSet
Me.Da.SelectCommand.CommandText = "select * from " + Me.Request("state").ToString
Me.Da.Fill(Ds)
Dim writer As New XmlTextWriter(Response.OutputStream, Response.ContentEncoding)
writer.Formatting = Formatting.Indented
writer.Indentation = 4
writer.IndentChar = " "
Ds.WriteXml(writer)
writer.Flush()
Response.End()
writer.Close()
End If
If Not (Me.Request("isxml") Is Nothing) Then
Dim ds1 As New DataSet
ds1.ReadXml(Me.Request.InputStream)
Me.DataGrid1.DataSource = ds1.Tables(0).DefaultView
Me.DataGrid1.DataBind()
End If
End Sub

----------------------------------------------test.aspx-----------------------------------

1@ Page Language="vb" AutoEventWireup="false" Codebehind="test.aspx.vb" Inherits="norefresh.test"
 1<html>
 2<head>
 3<title>NoRefresh</title>
 4<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"/>
 5<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE"/>
 6<meta content="JavaScript" name="vs_defaultClientScript"/>
 7<meta content=" http://schemas.microsoft.com/intellisense/ie5 " name="vs_targetSchema"/>
 8<script>   
 9function load(state){   
10var oXMLHTTP = new ActiveXObject("MSXML2.XMLHTTP");   
11var oDoc = new ActiveXObject("MSXML2.DOMDocument");   
12oXMLHTTP.open("POST", "test.aspx?state="+state, false);   
13oXMLHTTP.send("");   
14result = oXMLHTTP.responseText;   
15oDoc.loadXML(result);   
16  
17document.all("textxml").value=oDoc.xml;   
18var sxml=oDoc.xml;   
19var oXMLHTTP2= new ActiveXObject("MSXML2.XMLHTTP");   
20oXMLHTTP2.open("POST","test.aspx?isxml=yes",false);   
21oXMLHTTP2.send(sxml);   
22}   
23</script>
24</head>
25<body ms_positioning="GridLayout">
26<form id="Form1" method="post" runat="server">
27<font face="宋体">
28<asp:textbox height="26px" id="TxtSQL" runat="server" style="Z-INDEX: 101; LEFT: 18px; POSITION: absolute; TOP: 22px" tooltip="SQL hare!" width="560px">authors</asp:textbox><input onclick="load(TxtSQL.value)" style="Z-INDEX: 102; LEFT: 472px; WIDTH: 99px; POSITION: absolute; TOP: 56px; HEIGHT: 26px" type="button" value="Go"/>
29<table border="1" cellpadding="1" cellspacing="1" id="Table1" style="Z-INDEX: 103; LEFT: 16px; WIDTH: 544px; POSITION: absolute; TOP: 104px; HEIGHT: 190px" width="544">
30<tr>
31<td id="tdtitle" style="WIDTH: 166px; HEIGHT: 33px"></td>
32<td id="tdtitle2" style="HEIGHT: 33px"></td>
33</tr>
34<tr>
35<td id="td1" style="WIDTH: 166px"></td>
36<td id="td2"></td>
37</tr>
38</table>
39<asp:textbox height="25px" id="TxtField" runat="server" style="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 56px" tooltip="Field Hare!" width="79px">city</asp:textbox><asp:textbox height="24px" id="TxtField2" runat="server" style="Z-INDEX: 105; LEFT: 104px; POSITION: absolute; TOP: 56px" width="80px">au_fname</asp:textbox><input id="textxml" runat="server" style="Z-INDEX: 106; LEFT: 19px; POSITION: absolute; TOP: 311px" type="hidden"/>
40<asp:datagrid height="163px" id="DataGrid1" runat="server" style="Z-INDEX: 107; LEFT: 22px; POSITION: absolute; TOP: 302px" width="536px"></asp:datagrid></font></form>
41</body>
42</html>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus