1

我想将 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();
4

3 回答 3

2

好的，那么您可以轻松地使用 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();
    }
}
于 2013-11-13T05:13:20.797 回答
2

您无需使用 iFrame 即可获得此功能。您可以创建一个从数据库中检索消息的 WebService。

在网络服务中

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
 [System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    public WebService () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    public List<string>GetNewMessage() {
        List<string> newMessages= ChatClass.GetNewMessages()
        return newMessages;
    }

}

您可以WebMethod使用 jQuery.ajax 函数在不回发的情况下调用它。为此，

 $.ajax({
    type: "POST",
    url: "Services/YouWebServiceName.asmx/WebServiceMethodName",
    //data: requestedData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
    var newMessages=msg.d;// newMessages is an array with all of your new messsages

    }
});

在 javaScript 函数中调用这个 ajaxsetInterval函数。看这里

于 2013-11-13T05:17:06.133 回答
2

最好将 SignalR 用于聊天应用程序。SignalR 只不过是一个异步库，可用于开发 Web 应用程序，这些应用程序提供一些异步运行的服务。换句话说，SignalR 是一个可用于创建实时应用程序的库。一般而言，我认为“实时”一词是指在特定时间实际发生在我们身上的某件事或某件事。那么，就 Web 应用程序而言，“实时”将意味着“服务器根据客户端请求发送的即时响应”。 看看这个

于 2013-11-13T05:19:21.357 回答