.NET聊天室+jQuery编程实验

最新推荐文章于 2021-08-05 14:47:59 发布

原创最新推荐文章于 2021-08-05 14:47:59 发布 · 316 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

服务化&架构专栏收录该内容

96 篇文章

订阅专栏

本文详细介绍了使用JQuery框架结合Ajax技术实现在线聊天室的全过程，包括前后端交互原理、关键代码实现，以及如何利用Ajax实现网页局部刷新，提升用户体验。

基于JQuery的Ajax编程

一、目的及要求
目的：通过编写一个简易的在线咨询聊天室Web程序，体验、练习、掌握JQuery框架的基本使用方法；理解Ajax技术的原理、作用；掌握基于JQuery的Ajax编程的基本方法。
内容及要求：
在线咨询是各类电子商务网站的基本功能之一，基于网页的在线咨询比用QQ等即时通讯工具更简便，更利于收集、保存、分析咨询内容。本题目要求编写一个简易的在线咨询聊天室，至少包括登录网页和聊天室网页，功能要求如下。
1、登录网页：能实现用户进入聊天室。
2、聊天室网页：能发送用户的聊天信息，能显示聊天室所有人的留言信息。
3、网页客户端要求使用ajax技术将客户端留言信息发送到服务端，并从服务端获取所有人的最新留言信息显示在客户端网页上。网页服务器端使用.ashx处理ajax请求。
4、聊天内容在服务端可以保存在Application对象中，也可以保存在数据库中等处。前者实现起来更简单，后者用途更广泛。
二、实验环境
VS2010、IIS、JQuery
三、关键源程序清单
在这里插入图片描述

1、聊天室网页的ajax方法代码段；

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var myVar = setInterval(function () { setColor() }, 3000);
    function setColor() {
    var x = document.body;
    x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
    var oChatmsgbox;
    oChatmsgbox = document.getElementById("chatmsgbox");
    oChatmsgbox.innerHTML += "<p>消?息¡é</p>";
    //oChatmsgbox.innerHTML += Application["Msg"].toString();
    $.ajax({
        type: "post",
        url: "Handler.ashx",       //设¦¨¨置?向¨°服¤t务?端?哪?个?程¨¬序¨°请?求¨®服¤t务?
        data: "a1=libai&a2=" + document.getElementById("say").value.toString(), 
        success: function (data) {   //请?求¨®成¨¦功|后¨®调Ì¡Â用®?的Ì?函¡¥数ºy。¡ê从ä¨®服¤t务?端?传ä?回?的Ì?数ºy据Y自Á?动¡¥赋3值¦Ì、¡é封¤a装Á¡ã给?变À?量¢?data
            oChatmsgbox.innerHTML = data;
        }

    });

}
function send() {
    var x = document.body;
    x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
    var oChatmsgbox;
    oChatmsgbox = document.getElementById("chatmsgbox");
    oChatmsgbox.innerHTML += "<p>消?息¡é</p>";
    //oChatmsgbox.innerHTML += Application["Msg"].toString();
    $.ajax({
        type: "post",
        url: "Handler.ashx",       //设¦¨¨置?向¨°服¤t务?端?哪?个?程¨¬序¨°请?求¨®服¤t务?
        data: "a1=" + document.getElementById("nameTextBox").value.toString() + "&a2=" + document.getElementById("say").value.toString(),
        success: function (data) {   //请?求¨®成¨¦功|后¨®调Ì¡Â用®?的Ì?函¡¥数ºy。¡ê从ä¨®服¤t务?端?传ä?回?的Ì?数ºy据Y自Á?动¡¥赋3值¦Ì、¡é封¤a装Á¡ã给?变À?量¢?data
            oChatmsgbox.innerHTML = data;
        }

    });

}
    
</script>

2、服务端的.ashx程序的响应方法代码段。
public void ProcessRequest (HttpContext context) {

    context.Response.ContentType = "text/plain";
        string mm = context.Request.Params["a1"];
        string mn = context.Request.Params["a2"];      
        context.Response.ContentType = "text/plain";
        if (mm != "libai")
        { context.Application.Set("Msg", context.Application["Msg"] + "<br/><span style='color:#666666;font-size=12px'>【?<span style='font-weight:bold'>" +context.Session["user"]  + "</span>】?  在¨²「?" + DateTime.Now.ToString() + "」1  对?  【?<span style='font-weight:bold'>" +mm + "</span>】? 说¦Ì：êo</span><br/><span style='text-indent:20px'>"  + mn + "</span>"); }
        context.Response.Write(context.Application["Msg"].ToString());
}

ASP.NET 应用程序文件
void Application_Start(object sender, EventArgs e)
{
//在¨²应®|用®?程¨¬序¨°启?动¡¥时º¡À运?行D的Ì?代ä¨²码?
Application[“UserName”] = “所¨´有®D人¨?”;//用®?户¡ì昵º?称?
Application[“Msg”] = string.Empty;//留¢?言?信?息¡é
Application[“Msg”] = “欢?迎®-来¤¡ä到Ì?聊¢?天¬¨¬室º¨°”;
}

void Application_End(object sender, EventArgs e)
{
//在¨²应®|用®?程¨¬序¨°关?闭À?时º¡À运?行D的Ì?代ä¨²码?

}

void Application_Error(object sender, EventArgs e)
{
//在¨²出?现?未¡ä处ä|理¤¨ª的Ì?错ä¨ª误¨®时º¡À运?行D的Ì?代ä¨²码?

}

void Session_Start(object sender, EventArgs e)
{

}

void Session_End(object sender, EventArgs e)
{
//在¨²会¨¢话¡ã结¨¢束º?时º¡À运?行D的Ì?代ä¨²码?。¡ê
// 注Á¡é意°a: 只?有®D在¨² Web.config 文?件t中D的Ì? sessionstate 模¡ê式º?设¦¨¨置?为a
// InProc 时º¡À，ê?才?会¨¢引°y发¤¡é Session_End 事º?件t。¡ê如¨?果?会¨¢话¡ã模¡ê式º?
//设¦¨¨置?为a StateServer 或¨° SQLServer，ê?则¨°不?会¨¢引°y发¤¡é该?事º?件t。¡ê
Application.Lock();
Application.Set(“Msg”, Application[“Msg”].ToString() + “
☆?” + Session[“UserName”].ToString() + “离¤?开a了¢?聊¢?天¬¨¬室º¨°☆?”);
string[] arr = Application[“UserName”].ToString().Split(new char[] { ‘/’ });//分¤?裂¢?字Á?符¤?串ä?
//Application[“UserName”]赋3初?始º?值¦Ì"所¨´有®D人¨?"
Application[“UserName”] = string.Empty;
Application[“UserName”] = arr[0].ToString();
//遍À¨¦历¤¨²数ºy组Á¨¦arr，ê?移°?除y当Ì¡À前¡ã用®?户¡ì
for (int i = 1 ; i < arr.Length; i++)
{
if (arr[i].ToString() != Session[“UserName”].ToString())
{
//重?新?记?录?在¨²线?用®?户¡ì
Application.Set(“UserName”, Application[“UserName”] + “/” + arr[i].ToString());
}
}
Application.UnLock();
}

在这里插入图片描述

使用方法介绍

在这里插入图片描述

试用

在这里插入图片描述

四、总结
通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 中所有选择器都以美元符号开头： $() 。标记：$ (“p”)，ID： $KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲Matid”)，类：$ (“.Mat”)

innerHTML 可用于在javascrip中设置界面