c#之为这个聊天应用程序使用 Ajax(可能与 Web 服务一起使用)

我想在我的聊天应用程序中使用 Ajax，而不是每秒为新消息刷新一个 Iframe。有人告诉我使用带有 ajax 的 web 服务。我应该如何处理我的代码才能使用 Ajax？

这是显示每秒调用一次的 Iframe 的代码，Iframe src 有一个显示聊天消息的 aspx 页面

<script type="text/javascript"> 
            function refreshConversatio() { 
             document.getElementById('iframeDisplayMessage').src = 'frmMessageDisplay.aspx'; 
 
            } 
     </script> 
    <body> 
    <div id="divMessageDisplayPage" style="height: 724px; "> 
          <asp:PlaceHolder ID="ContentPlaceHolderDisplayMessage" runat="server"> 
          <iframe id="iframeDisplayMessage" name="iframeDisplayMessage" width="76%" style="background-color:White;" height="95%" frameborder="0" src="frmMessageDisplay.aspx"  
    onload="document.getElementById('iframeDisplayMessage').contentWindow.scrollTo(0,document.getElementById('iframeDisplayMessage').contentWindow.document.body.scrollHeight)"> 
          </iframe> 
          </asp:PlaceHolder>  
      </div> 
 
 
    <script type="text/javascript"> 
            setInterval(function () { refreshConversatio(); }, 1000) 
 
 
        </script> 
 </body>  

这是在 Iframe 中调用的 Aspx 页面，它具有显示消息的文字

<div id="divConversation"  style="width: 100%;"> 
        <asp:Literal ID="RecepientConversation"  runat="server"/> 
</div> 

这是尚未使用过的 Ajax 代码，我不知道在上面的应用程序中在哪里以及如何使用它

<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <!-- Reference to google J-Query api. 
    You can download and add jquery javasripts files to you soln.--> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <title></title> 
</head> 
<body> 
 
    <script type="text/javascript"> 
        function callService() { 
            //url of your web service 
            $.ajax('May be url of web service to be written here', 
        { 
            beforeSend: function (xhr) { }, 
            complete: function () { }, 
            contentType: 'application/json; charset=utf-8', 
            dataType: 'json', 
            jsonp: 'callback', 
            type: 'POST', 
            error: function (xhr, ajaxOptions, thrownError) { 
 
                //Function will be called when any error occcured. 
                alet(thrownError); 
            }, 
            success: function (data) { 
                if (!data.d) { 
 
                    //Cound not find data. 
                } 
                else { 
                    if (curdata != data.d) { 
                        //result of you web method is stored in data.d object.  
 
                        //TODO : Work with you data here. 
                        alert(data.d); 
                    } 
                } 
            } 
        }); 
        } 
        callService(); 
 
    </script> 
</body> 
</html> 

回发后

 if (!Page.IsPostBack) 
{ 
} 
    if(dt.Rows.Count != 0) 
   { 
 
 
      showOnPage.Append("<div style='background-color:ALICEBLUE;float:left; width:100%; word-wrap: break-word;font-size:14px;'><pre><font color='green'><b><div style='background-color:ALICEBLUE; margin-right:410px;'>" + dt.Rows[i][2].ToString() + " Says: </b></font></pre></div><div style='background-color:ALICEBLUE;font-size:14px;float: left;width: 410px;margin-left: -410px; word-wrap: break-word;font-size:14px;'><pre><font>" + dt.Rows[i][0].ToString() + "</font></pre></div><div style='background-color:ALICEBLUE; word-wrap: break-word;'><p style='color:#8B8A8A; margin-top:0'>Sent at " + Convert.ToDateTime(dt.Rows[i][1]).ToLongTimeString() + "</p></div><div style='clear:both;'></div>"); 
}        
 
 
RecepientConversation.Text=showOnPage.ToString(); 

请您参考如下方法:

好的，那么您可以轻松地使用 Asp.net 提供的基于 Ajax 的更新面板。

javascript 代码:重复触发更新，把它放在 head 部分

<script type="text/javascript" language="javascript"> 
 
function worker() { 
    __doPostBack('<%=updateComments.ClientID %>', null); 
    setTimeout(worker, 5000); // 5000= 5 seconds i.e section will get refereshed in intervals of 5 second 
} 
 
</script> 

标记:在更新面板中包含要异步更新的部分。您还必须将脚本管理器放置在您的代码中，如下所示。

<asp:ScriptManager ID="manager" runat="server" ></asp:ScriptManager>  
 
<asp:UpdatePanel ID="updateComments" runat="server"> 
     <ContentTemplate> 
          <div id="divConversation"  style="width: 100%;"> 
              <div style='background-color: ALICEBLUE; float: left; width: 100%; word-wrap: break-word; 
    font-size: 14px;'> 
    <pre><font color='green'><b> 
        <div style='background-color: ALICEBLUE; margin-right: 410px;'> 
        <asp:Literal ID="ltrlFirst" runat="server"></asp:Literal> 
         Says: </b></font></pre> 
</div> 
<div style='background-color: ALICEBLUE; font-size: 14px; float: left; width: 410px; 
    margin-left: -410px; word-wrap: break-word; font-size: 14px;'> 
    <pre><font> 
    <asp:Literal ID="ltrlSecond" runat="server"></asp:Literal> 
    </font></pre> 
</div> 
<div style='background-color: ALICEBLUE; word-wrap: break-word;'> 
    <p style='color: #8B8A8A; margin-top: 0'> 
        Sent at  
        <asp:Literal ID="ltrlThird" runat="server"></asp:Literal> 
        </p> 
</div> 
          </div> 
     </ContentTemplate> 
</asp:UpdatePanel> 

还要确保字面量是在此之外的数据边界，即它应该是在每个回发上都有边界的数据，而不仅仅是首先。

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!Page.IsPostBack) 
    {  
 
     } 
 
     BindCommentData(); // New method which binds data. 
 
} 
 
 
Private void BindCommentData() 
{ 
    // Here you get the dt.. 
 
    if(dt.Rows.Count != 0) 
    { 
      ltrlFirst.Text = dt.Rows[i][2].ToString(); 
      ltrlSecond.Text = dt.Rows[i][0].ToString(); 
      ltrlThird.Text = Convert.ToDateTime(dt.Rows[i][1]).ToLongTimeString(); 
    } 
}