C# 将Ajax（可能与web服务一起）用于此聊天应用程序_C#_Asp.net_Ajax_Asp.net Ajax_Chat

C# 将Ajax（可能与web服务一起）用于此聊天应用程序

c# asp.net ajax

C# 将Ajax（可能与web服务一起）用于此聊天应用程序,c#,asp.net,ajax,asp.net-ajax,chat,C#,Asp.net,Ajax,Asp.net Ajax,Chat,我想在聊天应用程序中使用Ajax，而不是每秒刷新一个Iframe以获取新消息。有人告诉我将webservices与ajax结合使用。我应该如何使用我的代码来使用Ajax 下面是显示每秒调用一次的Iframe的代码，Iframe src有一个显示聊天消息的aspx页面 <script type="text/javascript"> function refreshConversatio() { document.getElementBy

我想在聊天应用程序中使用Ajax，而不是每秒刷新一个Iframe以获取新消息。有人告诉我将webservices与ajax结合使用。我应该如何使用我的代码来使用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>


函数refreshConversatio（）{
document.getElementById（'iframeDisplayMessage'）.src='frmMessageDisplay.aspx'；
}
setInterval（函数（）{refreshConversatio（）；}，1000）

这是在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>


函数callService（）{
//您的web服务的url
$.ajax（'可能是要在此处写入的web服务的url'，
{
beforeSend:function（xhr）{}，
完成：函数（）{}，
contentType:'application/json；charset=utf-8'，
数据类型：“json”，
jsonp:“回调”，
键入：“POST”，
错误：函数（xhr、ajaxOptions、thrownError）{
//函数将在发生任何错误时调用。
alet（thrownError）；
},
成功：功能（数据）{
如果（！data.d）{
//找不到数据。
}
否则{
if（curdata！=data.d）{
//web方法的结果存储在data.d对象中。
//TODO:在这里使用您的数据。
警报（数据d）；
}
}
}
});
}
callService（）；

回邮后

 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();

if（！Page.IsPostBack）
{
}
如果（dt.Rows.Count！=0）
{
showOnPage.Append（“+dt.Rows[i][2].ToString（）+”表示：“+dt.Rows[i][0].ToString（）+”在“+Convert.ToDateTime（dt.Rows[i][1]）.ToLongTimeString（）+””；
}       
RecepientConversation.Text=showOnPage.ToString（）；

好的，然后您可以轻松使用Asp.net提供的基于Ajax的更新面板

javascript代码：反复触发更新，将此放在头部部分内

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();
    }
}

好的，然后您可以轻松使用Asp.net提供的基于Ajax的更新面板

javascript代码：反复触发更新，将此放在头部部分内

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();
    }
}

您不需要使用iFrame来获得此功能。您可以创建从数据库检索消息的Web服务

在Web服务中

在javaScript

setInterval

函数中调用此ajax函数。请参见

您无需使用iFrame即可获得此功能。您可以创建从数据库检索消息的Web服务

在Web服务中

在javaScript

setInterval

函数中调用此ajax函数。请参见

聊天应用程序最好使用信号器。 SignalR只是一个异步库，可用于开发web应用程序，这些应用程序提供一些异步运行的服务。换句话说，SignalR是一个库，可用于创建实时应用程序。总的来说，我觉得“实时”这个词是指在某个特定时间发生的事情或事件。那么，就web应用程序而言，“实时”意味着“服务器根据客户机的请求立即发送响应”。

聊天应用最好使用信号器。 SignalR只是一个异步库，可用于开发web应用程序，这些应用程序提供一些异步运行的服务。换句话说，SignalR是一个库，可用于创建实时应用程序。总的来说，我觉得“实时”这个词是指在某个特定时间发生的事情或事件。那么，就web应用程序而言，“实时”意味着“服务器根据客户机的请求立即发送响应”。

您需要使用iframe吗？您可以通过ajax轻松刷新聊天对话，而无需重复任何回发Lyno，这不是我的必要性如何使用ajax刷新文字？如果我不使用Iframe，那么它就在同一个页面中。提供的解决方案有帮助吗？为什么要从后面注入所有html。我建议您将所有html保存在更新面板中，并使用文本控件来控制数据来自服务器的位置。然后简单地将这些文本绑定到页面加载中调用的方法中。删除最近的对话内容。你能做到吗？RecepientConversation是文本的ID，消息必须添加并显示在屏幕上，我将每条消息保存在一个div中。使用iframe是你的必要条件吗？您可以通过ajax轻松刷新聊天对话，而无需重复任何回发Lyno，这不是我的必要性如何使用ajax刷新文字？如果我不使用Iframe，那么它就在同一个页面中。提供的解决方案有帮助吗？为什么要从后面注入所有html。我建议您将所有html保存在更新面板中，并使用文本控件来控制数据来自服务器的位置。然后简单地将这些文本绑定到页面加载中调用的方法中。删除最近的对话内容。你能做到吗？RecepientConversation是文本的ID，必须在其中添加消息并将其显示在屏幕上，我已将每条消息保存在一个div中。在何处放置此函数worker（）.In head由于..而导致其给定服务器错误，因此我将其保留在body中..但它不起作用将其放置在脚本标记内aspx页面的head部分中请参见

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();
    }
}

[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;
    }

}

 $.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

    }
});