三、jQuery--jQuery基础--jQuery基础课程--第12章 jQuery在线聊天室

在线聊天室案例

一、功能简介：

　　1.用户需要登录后才能进入聊天室交流

　　2.已无刷新的方式，动态展示交流后的内容和在线人员的基本信息

　　3.登录后的用户可以提交文字和表情图标

　　技术重点：利用ajax的无刷新技术请求并展示数据

二、实现界面

　　1.登录页面（验证用户信息）

　　功能描述：

　　a.为了显示当前的在线人员的信息，进入聊天室时，必须先登录，保存登录用户的基本信息；

　　b.用户在登录聊天室时，调用jQuery中Ajax的全局函数$.ajax()，将获取的用户名与密码数据向数据器发送请求，并使用全局的ajaxStart()与ajaxStop()事件，绑定提示信息元素，使用户在登录时显示“正在登录”的字样，优化用户体验；

　   c.当用户在登录时，向服务器发送登录数据请求后，服务器端的程序将接收所请求的数据，检验密码是否为“123456”，如果为假，则弹出“用户名或密码错误”的对话框，否则，进入聊天室的主窗口页面。

　　2.聊天主页面

　　功能描述：

　　a.首次登录聊天主页面时，左边的聊天内容区中，如果没有聊天数据，则显示“目前还没有找到聊天记录”的字样，右边即时动态显示登录时的用户名；

　　b.在底部，可以在文本框中输入聊天内容，点击发送按钮后，将通过jQuery中Ajax的全局方法$.ajax()，获取聊天内容，并向服务器提交请求，同时，服务器响应数据请求，写入完成后，将数据返回至主窗口页面，显示在内容区中；

　　c.聊天室主要的功能是实现多人在线聊天，在发送内容时，还可以发送表情图标，以丰富发送内容，当发送表情时，仅仅是传递表情图标的名称，并不发送图片，当服务器接收后，返回相应的名称，再将名称对应的图标显示在页面中；

　　d.当聊天的信息发送成功后，服务器发送成功标志，客户端接收这一信息后，清空发送的文本框，并再次刷新对话框列表，以及时获取最新的聊天数据。

三、案例流程