无刷新显示数据－－xmlHttp的应用
作者：- 来源：qixiao-Blog 添加时间：2006-5-21 9:51:56 前阵子找工作面试的时候，主管问有没有做过无刷新显示数据，很尴尬的回答没有之后立刻试了一下，感觉挺简单的，麻烦的是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------------------------------------------
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="test.aspx.vb" Inherits="norefresh.test"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>NoRefresh</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script>
function load(state){
var oXMLHTTP = new ActiveXObject("MSXML2.XMLHTTP");
var oDoc = new ActiveXObject("MSXML2.DOMDocument");
oXMLHTTP.open("POST", "test.aspx?state="+state, false);
oXMLHTTP.send("");
result = oXMLHTTP.responseText;
oDoc.loadXML(result);
var field = document.all("TxtField").value;
var field2= document.all("TxtField2").value;
maxNum_out = oDoc.getElementsByTagName(field).length;
document.all("tdtitle").innerHTML=field;
document.all("tdtitle2").innerHTML=field2;
document.all("td1").innerHTML="";
document.all("td2").innerHTML="";
for(i=0;i<maxNum_out;i++) {
str1 =oDoc.getElementsByTagName(field).item(i).text;
str2 =oDoc.getElementsByTagName(field2).item(i).text;
document.all("td1").innerHTML+=str1+"<BR>";
document.all("td2").innerHTML+=str2+"<BR>";
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<FONT face="宋体">
<asp:textbox id="TxtSQL" style="Z-INDEX: 101; LEFT: 18px; POSITION: absolute; TOP: 22px" runat="server"
ToolTip="SQL hare!" Height="26px" Width="560px">authors</asp:textbox><INPUT style="Z-INDEX: 102; LEFT: 472px; WIDTH: 99px; POSITION: absolute; TOP: 56px; HEIGHT: 26px"
onclick="load(TxtSQL.value)" type="button" value="Go">
<TABLE id="Table1" style="Z-INDEX: 103; LEFT: 16px; WIDTH: 544px; POSITION: absolute; TOP: 104px; HEIGHT: 190px"
cellSpacing="1" cellPadding="1" width="544" border="1">
<TR>
<TD id="tdtitle" style="WIDTH: 166px; HEIGHT: 33px"></TD>
<TD id="tdtitle2" style="HEIGHT: 33px"></TD>
</TR>
<TR>
<TD id="td1" style="WIDTH: 166px"></TD>
<TD id="td2"></TD>
</TR>
</TABLE>
<asp:textbox id="TxtField" style="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 56px" runat="server"
ToolTip="Field Hare!" Height="25px" Width="79px">city</asp:textbox><asp:textbox id="TxtField2" style="Z-INDEX: 106; LEFT: 104px; POSITION: absolute; TOP: 56px"
runat="server" Height="24px" Width="80px">au_fname</asp:textbox></FONT></form>
</body>
</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-----------------------------------
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="test.aspx.vb" Inherits="norefresh.test"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>NoRefresh</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script>
function load(state){
var oXMLHTTP = new ActiveXObject("MSXML2.XMLHTTP");
var oDoc = new ActiveXObject("MSXML2.DOMDocument");
oXMLHTTP.open("POST", "test.aspx?state="+state, false);
oXMLHTTP.send("");
result = oXMLHTTP.responseText;
oDoc.loadXML(result);
document.all("textxml").value=oDoc.xml;
var sxml=oDoc.xml;
var oXMLHTTP2= new ActiveXObject("MSXML2.XMLHTTP");
oXMLHTTP2.open("POST","test.aspx?isxml=yes",false);
oXMLHTTP2.send(sxml);
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<FONT face="宋体">
<asp:textbox id="TxtSQL" style="Z-INDEX: 101; LEFT: 18px; POSITION: absolute; TOP: 22px" runat="server"
ToolTip="SQL hare!" Height="26px" Width="560px">authors</asp:textbox><INPUT style="Z-INDEX: 102; LEFT: 472px; WIDTH: 99px; POSITION: absolute; TOP: 56px; HEIGHT: 26px"
onclick="load(TxtSQL.value)" type="button" value="Go">
<TABLE id="Table1" style="Z-INDEX: 103; LEFT: 16px; WIDTH: 544px; POSITION: absolute; TOP: 104px; HEIGHT: 190px"
cellSpacing="1" cellPadding="1" width="544" border="1">
<TR>
<TD id="tdtitle" style="WIDTH: 166px; HEIGHT: 33px"></TD>
<TD id="tdtitle2" style="HEIGHT: 33px"></TD>
</TR>
<TR>
<TD id="td1" style="WIDTH: 166px"></TD>
<TD id="td2"></TD>
</TR>
</TABLE>
<asp:textbox id="TxtField" style="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 56px" runat="server"
ToolTip="Field Hare!" Height="25px" Width="79px">city</asp:textbox><asp:textbox id="TxtField2" style="Z-INDEX: 105; LEFT: 104px; POSITION: absolute; TOP: 56px"
runat="server" Height="24px" Width="80px">au_fname</asp:textbox><input type="hidden" id="textxml" runat="server" style="Z-INDEX: 106; LEFT: 19px; POSITION: absolute; TOP: 311px">
<asp:DataGrid id="DataGrid1" style="Z-INDEX: 107; LEFT: 22px; POSITION: absolute; TOP: 302px"
runat="server" Width="536px" Height="163px"></asp:DataGrid></FONT></form>
</body>
</HTML>