<script type="text/javascript">
function btnClick() {
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象，相当于WebClient
if (!xmlHttp) {
alert("创建xmlHttp异常！");
return false;
}
xmlHttp.open("POST", "GetTime.ashx?t=" + new Date(), false); //准备向服务器的GetDate1.ashx发出POST请求
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
document.getElementById("Text1").value = xmlHttp.responseText;
}
else {
alert("AJAX返回错误！");
}
}
}
xmlHttp.send();
}
</script>
使用JQuery实现AJAX效果：
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function btnClick()
{
$.post("GetTime.ashx", function (data, status) {
$("#Text1").val(status);
});
}
</script>
<input id="Text1" type="text" value="初始值" />
<input id="Button1" type="button" value="button" onclick="btnClick()" />
不用服务端控件：
服务端控件是asp.netWebForm程序在服务端操作页面的时候使用的，不需要的时候就不使用。
<!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></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
$.post("ShowMsg.ashx", function (data, status)
{
if (status == "success")
{
var tableTop = $("<tr><td>序号序号</td><td>内容</td><td>时间</td></tr>");
$("#tableComment").append(tableTop);
var lines = data.split("$");
for (var i = 0; i < lines.length; i++)
{
var fields = lines[i].split("|");
// var comm = $("<li>" + fields[0] + " " + fields[1] + " " + fields[2] + "</li>")
var tableComm = $("<tr><tb>" + fields[0] + "</tb><tb>" + fields[1] + "</tb><tb>" + fields[2] + "</tb></tr>");
$("#tableComment").append(tableComm);
//$("#pinglun").append(comm);
}
//$("#TextArea1").val(data);
}
else
{
$("#TextArea1").val("加载失败！");
}
});
});
</script>
</head>
<body>
<textarea id="TextArea1" cols="20" rows="2"></textarea>
<!--<ul id="pinglun">
<li>序号 评论内容 时间 </li>
</ul>-->
<table id="tableComment">
<tr><td>序号序号</td><td>内容</td><td>时间</td></tr>
</table>
</body>
</html>
使用Repeater显示评论内容
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowMsg.aspx.cs" Inherits="WebApplicationAJAX.ShowMsg1" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
DeleteMethod="Delete" InsertMethod="Insert"
OldValuesParameterFormatString="original_{0}" SelectMethod="GetData"
TypeName="WebApplicationAJAX.NoRefreshTableAdapters.T_PostMsgTableAdapter"
UpdateMethod="Update">
<DeleteParameters>
<asp:Parameter Name="Original_Id" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="IpAddr" Type="String" />
<asp:Parameter Name="Msg" Type="String" />
<asp:Parameter Name="PostDate" Type="DateTime" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="IpAddr" Type="String" />
<asp:Parameter Name="Msg" Type="String" />
<asp:Parameter Name="PostDate" Type="DateTime" />
<asp:Parameter Name="Original_Id" Type="Int32" />
</UpdateParameters>
</asp:ObjectDataSource>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">
<HeaderTemplate><table><tr><td>评论内容</td><td>提交日期</td><td>用户Ip</td></tr></HeaderTemplate>
<FooterTemplate></table></FooterTemplate>
<ItemTemplate>
<tr><td><%#Eval("Msg")%></td><td><%#Eval("PostDate")%></td><td><%#Eval("IpAddr")%></td></tr>
</ItemTemplate>
</asp:Repeater>
</form>
</body>
</html>
问题：
在使用JavaScript调用一般处理程序的结果拼接table的时候，拼接的头部无法显示到最上方而是显示到了table的下方。
应该考虑研究的问题：使用JQuery+JavaScript对Html进行动态生成的时候，标签的写法以及添加标签的顺序。