MVC实现类似QQ的网页聊天功能-Ajax（上）

说到QQ聊天，程序员首先想到的就是如何实现长连接，及时的接收并回馈信息。那么首先想到的就是Ajax，Ajax的运行机制是通过XMLHttpRequest向服务器发出异步请求，并接受数据，这样就可以实现不刷新页面，实时的接收和回馈数据。

基本Html

<div id="”p”" class="”easyui-panel”" style="”width:" auto;="" height:="" 470px;”="">
    //发送者 
   <input type="”hidden”" name="”userID”" id="”userID”" value="”@ViewBag.UserId”" /> //会话ID 
   <input type="”hidden”" name="”DialogId”" id="”DialogId”" value="”@ViewBag.DialogId”" /> //接收者 
   <input type="”hidden”" name="”ReceiveUserId”" id="”ReceiveUserId”" value="”@ViewBag.ReceiveUserId”" /> //显示框 
   <div id="”dv”"> 
    <table id="”Msge”" style="”width:" auto;="" max-width:="" 150px;”=""> 
     <tbody>
      <tr> 
       <td> 
        <ul id="”mess”" style="”width:" auto;="" max-width:="" 150px;”=""> 
        ul> td> 
      tr> 
     tbody>
    table> 
    <div id="”msg_end”" style="”height:0px;" overflow:hidden;”="">div> 
   div> //输入框和提交 
   <table style="”width:" 100%”=""> 
    <tbody>
     <tr> 
      <td> <textarea data-options="”required:true”" style="”height:" 150px;="" width:="" 100%;”="" name="”Information”" id="”Information”">textarea> td> 
     tr> 
     <tr> 
      <td style="”text-align:" right”=""> <a href="”#”" class="”easyui-linkbutton”" id="”subth”" onclick="”Submit();”" data-options="”iconCls:’icon-ok'”"> 提交a> td> 
     tr> 
    tbody>
   table> 
  div>

Css样式

Jq脚本

 

转载于:https://www.cnblogs.com/huhangfei/p/4989118.html