全速加载中

AJAX代码示例(不使用AJAX控件)

<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+JavaScriptHtml进行动态生成的时候,标签的写法以及添加标签的顺序。

 

 

 

posted @ 2013-03-02 10:37  许鸿飞  阅读(236)  评论(0编辑  收藏  举报