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

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

基本Html

<div id="”p”" class="”easyui-panel”" style="”" 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="”" auto;="" max-="" 150px;”=""> 
     <tbody>
      <tr> 
       <td> 
        <ul id="”mess”" style="”" auto;="" max-="" 150px;”=""> 
        </ul> </td> 
      </tr> 
     </tbody>
    </table> 
    <div id="”msg_end”" style="”height:0px;" overflow:hidden;”=""></div> 
   </div> //输入框和提交 
   <table style="”" 100%”=""> 
    <tbody>
     <tr> 
      <td> <textarea data-options="”required:true”" style="”height:" 150px;="" ="" 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样式

<style type=”text/css”>
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px;font-size:1px;  overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
.b2, .b3, .b4,.b5, .b6, .b7,.content{border-color:#96C2F1;}
.b1, .b8{background:#96C2F1;}
.b2,.b3, .b4, .b5, .b6,.b7,.content{background:#EFF7FF;}
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}
.b11,.b12,.b13,.b14,.b15,.b16,.b17,.b18{height:1px;font-size:1px; width:144px;    overflow:hidden; display:block;}
.b11,.b18{margin:0 5px;}
.b12,.b17{margin:0 3px; border-left:2px solid;border-right:2px solid;}
.b13,.b16{margin:0 2px; border-left:1px solid;border-right:0px solid;}
.b14,.b15{margin:0 1px; padding:0 2px; border-left:1px solid;border-right:1px solid; height:1px;}
.b12, .b13, .b14,.b15, .b16, .b17,.content1{border-color:Green;}
.b11, .b18{background:Green;}
.b12,.b13, .b14, .b15, .b16,.b17,.content1{background:#EFF7FF;}
.content1 {border-right:1px solid;border-left:1px solid;overflow:hidden;height:auto; width:150px; line-height:20px;}
.itmes1{max-width:150px;width:auto; margin-left:345px;  list-style-type:none;font-size:12px;height:auto;}
.itmes{max-width:150px;width:auto;  list-style-type:none;font-size:12px;height:auto;}
#dv{height: 280px; overflow: auto; scrollbar-face-color: #c3c3c3; scrollbar-shadow-color: #D2E5F4;
scrollbar-highlight-color: #D2E5F4; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D2E5F4}
</style>

Jq脚本

<script type=”text/javascript”>
var ajaxData;
var coun = 0;

function longPolling() {
    ajaxData = $.ajax({
        url: “ / Dialogue / GetData”,
        data: {
            receiveUserId: $(‘# ReceiveUserId’).val(),
            dialogId: $(‘# DialogId’).val(),
            “timed”: new Date().getTime()
        },
        dataType: “text”,
        type: “post”,
        timeout: 5000,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            if (textStatus == “timeout”) {
                longPolling();
            } else {
                longPolling();
            }
        },
        success: function(data, textStatus) {
            var str = “”;
            var json = eval(‘ (‘ + data + ‘)’);
            $.each(json.list, function(i) {
                var message = json.list[i]["Content"];
                var SendId = json.list[i]["SendId"];
                var CreateDate = json.list[i]["CreatDate"];
                var SendName = json.list[i]["SendName"];
                document.getElementById(‘DialogId’).value = json.list[0]["DialogId"];
                str += GetMesage(message, SendId, SendName, CreateDate);
            });
            $(“# mess”).html(str);
            if (coun == 0) {
                msg_end.scrollIntoView();
            }
            coun++;
            if (textStatus == “success”) {
                longPolling();
            }
        }
    });
}
$(function() {
    longPolling();
});
var editor;
KindEditor.ready(function(K) {
    editor = K.create(‘textarea[name = "Information", id = "Information"]‘, {
        allowFileManager: false,
        allowUpload: false,
        afterBlur: function() {
            editor.sync();
        }
    });
    prettyPrint();
});

function Submit() {
    if (!$(‘# ff’).form(‘validate’)) {
        $.messager.alert(‘提示’, ‘请通过所有验证项目！’);
    } else {
        $(‘# ff’).form(‘submit’, {
            url: ‘ / Dialogue / SaveSend’,
            success: function(data) {
                var json = eval(‘ (‘ + data + ‘)’);
                if (json.state) {
                    editor.html(“”);
                    document.getElementById(‘DialogId’).value = json.dialogId;
                } else {
                    $.messager.alert(‘提示’, json.message);
                }
            },
            error: function(data) {
                $.messager.alert(‘提示’, ‘请求失败请重试！’);
            }
        });
    }
}

function GetMesage(mes, SendId, SendName, CreateDate) {
    var str = “”;
    var userId = $(“# userID”).val();
    if (SendId != userId) {
        str += “ < li class = ’itmes’ > < b class = ’b1′ > < /b><b class=’b2′></b > < b class = ’b3′ > < /b><b class=’b4′></b > < div class = ’content’ > ”;
        str += “ < span > ” + SendName + “ & nbsp; & nbsp; & nbsp; & nbsp;” + CreateDate + “ < /span><br/ > < span style = ’max -  150px;
        word -
        break :break -all;’ > ” + mes + “ < /span></div > < b class = ’b5′ > < /b><b class=’b6′></b > < b class = ’b7′ > < /b><b class=’b8′></b > < div style = ’height: 5px;’ > < /div></li > ”;
    } else {
        str += “ < li class = ’itmes1′ > < b class = ’b11′ > < /b><b class=’b12′></b > < b class = ’b13′ > < /b><b class=’b14′></b > < div class = ’content1′ > ”;
        str += “ < span > 我 & nbsp; & nbsp; & nbsp; & nbsp;” + CreateDate + “ < /span><br/ > < span style = ’max -  150px;
        word -
        break :break -all;’ > ” + mes + “ < /span></div > < b class = ’b15′ > < /b><b class=’b16′></b > < b class = ’b17′ > < /b><b class=’b18′></b > < div style = ’height: 5px;’ > < /div></li > ”;
    }
    return str;
} </script>