综合案例分析-----------调用XML实现无刷新即时聊天（jQuery调用JSON数据学习第十一，十二天）

本文链接：https://blog.csdn.net/weixin_42306620/article/details/81353065

需求分析：

（1）成功登录后获取用户的ID号，根据选择的ID号，实现用户之间即时且无刷新的聊天功能；并且在不同用户使用同一页面时，区分显示的聊天内容。

（2）所有对话数据以XML格式保存在服务器端，在页面显示内容或进行对话时，将调用服务端提供的接口，由接口负责返回或处理XML数据。

功能实现：

<script src="JScript/jquery-1.8.3.min.js" type="text/javascript"></script>
<style type="text/css">
    body{font-size:13px}
    h3{padding:0px;margin:8px 0px}
    .iframe{width:260px;border:solid 1px #666}
    .iframe .title{padding:5px;background-color:#eee}
    .iframe .title .spnId{font-weight:bold;font-family:Arial}
    .iframe .content{padding:8px;font-size:12px}
    .iframe .content .lst{height:180px;border:solid 1px #ccc;padding:3px;
    line-height:1.5em;overflow-y:scroll;}
    .iframe .content .nav{color:#006EFE}
    .iframe .content .nav .time,
    .iframe .content .msg{margin-left:5px}
    .iframe .content .txt{height:50px;width:238px;border:solid 1px #ccc}
    .btn {border:#666 1px solid;padding:2px;width:80px;
    filter:progid:DXImageTransform.Microsoft
    .Gradient(GradientType=0,StartColorStr=#ffffff,
    EndColorStr=#ECE9D8);}
</style>

<script type="text/javascript">
    $(function(){
        //设置聊天时本人和对方ID
        var $FramId = 1243242;
        var $SendId = 1234560;
        $("#spnSendId").html($SendId);
        //定时获取与对方的聊天数据
        setTimeout(showList($FromId,$SendId),3000);
        $("#btnSend").click(function(){
            $.ajax({
               url:'Chat.ashx?s=' + $SendId + '&F=' + $FromId + '&c=' + txtA.value,
               success:function(data){
                   if(data == 1){    //发送成功
                        showList($FromId,$SendId);
                        txtA.value = "";
                   }
               }
            });
        });
        //获取即时更新的聊天数据
        function showList(f,s){
            $.ajax({
                url:'Xml/Chat.xml',
                dataType:'xml',
                success:function(data){
                    var $strUser = $(data).find("message");
                    var strHTML = "";//初始化保存内容变量
                    $strUser.each(function(){
                        //过滤用户数据
                        if (($(this).sttr("fId") == f &&
                             $(this).sttr("SId") == S) ||
                           ($(this).sttr("fId") == S &&
                             $(this).sttr("SId") == f)) {
                           var strNav = $(this).attr("fId");
                           if (strNav == f) {
                           strNav = "我说";}
                           strHTML += '<div class=\"nav\">
                             <span>(' + strNav + ')<\/span>
                             <span class=\"time\">' +
                             $(this).children("dateTime").text() + '<\/span><\/div>';
                           strHTML += '<div class=\"msg\">'+
                             $(this).children("content").text() + '<\/div>';
                        }
                    });
                    //显示处理后的数据
                    $("#chatList").html(strHTML);
                }
            });
        }
    });
</script>

<div class="iframe">
    <div class="title">
        荣拓即时聊天与(<span id="spnSendId" class="spnId"></span>聊天中)
    </div>
    <div class="content">
        <div id="chatList" class="lst"></div>
    </div>
    <div class=""content>
        <textarea id="txtA" class="txt"></textarea>
        <input id="btnSend" type="button"
                value="发送" class="btn" />
    </div>
</div>

创建一个名为“Chat.ashx”的服务端程序

<%@ WebHandler Language="#C" Class="Chat"%>
using System;
using System.Web;
using System.Xml;
public class Chat : IHttpHandler {
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        //定义变量接收页面传回的参数
        string strContent = context.Request.QueryString["c"].ToString();
        string strFromId = context.Request.QueryString["f"].ToString();
        string strSendId = context.Request.QueryString["s"].ToString();
        //定义并初始化回调变量值
        int intSuccess = 0;
        //格式化当前的时间
        string strDate = DateTime.Now.ToString("HH:mm:ss");
        //定义一个XML文档变量
        XmlDocument xmlDoc = new XmlDocument();
        try
        {
            //打开指定的XML文件
            xmlDoc.Load(context.Server.MapPath("Xml/Chat.xml"));
            //查到根节点元素
            XmlNode root = xmlDoc.SelectSingleNode("chat");
            //创建一个根节点下的子节点元素
            XmlElement xmlE = xmlDoc.CreateElement("message");
            //设置该元素的两个相关属性
            XmlE.SelAttribute("fId",strFromId);
            XmlE.SelAttribute("sId",strFromId);
            //创建一个子节点下的元素
            XmlElement xmlEd = xmlDoc.CreateElement("datetime");
            //设置文本节点
            xmlEd.InnerText = strDate;
            //追加至上一级节点中
            xmlE.AppendChild(xmlEd);
            //创建一个子节点下的元素
            XmlElement xmlEc = xmlDoc.CreateElement("content");
            //设置节点文本
            xmlEc.InnerText = strContent;
            //追加至上一级节点中
            xmlE.AppendChild(xmlEc);
            //将整个节点追加至根节点中
            root.AppendChild(xmlE);
            //保存创建好的XML文件
            xmlDoc.Save(context.Server.MapPath("Xml/Chat.xml"));
            //设置操作返回值
            intSuccess = 1;
        }
        catch (Exception ex)
        {
            throw ex;
        }
        context.Response.Write(intSuccess);
    }
    public bool IsReusable {
        get{
            return false;
        }
    }
}

代码分析：

在本示例中，为了实现即时聊天的功能，有两次与服务端进行交互的操作，第一次是隔时调用聊天数据，另外一处是当用户单击发送按钮时。

第一次的隔时调用聊天数据，通过setTime()方法，每隔3秒调用showList自定义函数实现的。在该函数中，通过调用jQuery框架中的$.ajax()方法，以XML方式向服务端请求一个数据，将对返回的数据进行格式设置和内容过滤，用于区分是对方还是自己应该显示的数据，最后将获取的过滤后的数据显示在页面的相应元素中。

用户在聊天文本框中输入内容后，单击“发送”按钮时，触发了与服务端的第二次数据交互，此次数据交互，同样是通过调用jQuery框架中的$.ajax()方法将聊天时的内容发送至服务端，服务端在接受传回的内容后，向XML文件中追加相应的记录。追加成功后，向页面返回一个为1的值，页面根据返回的该值，再次调用自定义的showList()函数，用于重新获取并在页面中即时显示聊天数据。