6.8 基于jQuery的Ajax聊天室程序
6.8 基于jQuery的Ajax聊天室程序
通过前面的介绍，相信读者已经对jQuery的Ajax有了较深的认识。下面，将讲解一个较为复杂的Ajax实例，可以帮助读者更好地掌握Ajax的精髓—一个基于Ajax无需刷新技术开发的聊天室程序，该程序允许多用户在网页上聊天，并且可以实时地更新信息。
通过前面的介绍，相信读者已经对jQuery的Ajax有了较深的认识。下面，将讲解一个较为复杂的Ajax实例，可以帮助读者更好地掌握Ajax的精髓—一个基于Ajax无需刷新技术开发的聊天室程序，该程序允许多用户在网页上聊天，并且可以实时地更新信息。
6.8.1 基本设想
首先设计聊天室的外观，如图6-15所示。
[插图]
6.8.2 设计数据库
这里使用MySql数据库来存储信息。
首先构建一个聊天信息表messages，它有4个字段，即消息编号（id）、姓名（user）、内容（msg）以及一个数字时间戳（time）。下面是创建该表的SQL代码：
[插图]
6.8.3 服务器端处理
服务器端主要用来处理用户提交的信息以及输出返回。
- 首先需要在服务器端链接数据库。
- 其次如果有用户提交新信息，则把信息插入数据库，同时删除旧的数据信息（保持数据库中只有10条信息）。
- 最后从数据库中获取新的信息并以XML格式输出返回。
这里可以先模拟服务端输出的XML代码结构，XML文档代码如下：
[插图]
在这个XML结构中，不光只有消息的实体（包括作者及其聊天信息），还增加了一个“status”标签和一个“time”标签。其中“status”标签用来表示信息请求的状态，如果值为1，则表示新信息请求成功；如果值为2，则表示请求成功但没有新信息。“time”标签用来记录信息请求的时间，可以被用来读取该时间戳后用户提交的新数据。
6.8.4 客户端处理
在客户端需要做两项工作。
- 首先提交用户聊天信息，然后处理服务器端返回的聊天信息，将信息实时呈现出来。
- 每隔一定时间发起查询数据库中聊天记录的请求，然后处理服务端返回的聊天信息，将信息实时呈现出来。
（1）提交用户聊天信息
使用POST方式向服务器发送请求，将用户填写的姓名和内容等数据传递到服务器端，在服务器端处理后返回相应的XML数据，然后使用回调函数处理服务器端返回的这些数据，并将新信息追加到客户端的消息显示区中。
（2）浏览器每隔一定时间更新数据
增加一个定时器，并且每隔一定时间调用一次。然后使用回调函数处理服务器端返回的XML数据，并将新信息追加到客户端的消息显示区中。
由于上面的两项工作都需要对XML文档进行解析，然后追加到信息显示区，因此可以将此操作进行封装，以便于重复利用。在设计该XML文档操作函数时，应注意通过状态（“status”标签）和时间戳（“time”标签）来控制获取聊天信息。
6.8.5 客户端代码
1．客户端HTML代码
首先建立一个HTML页面。从前面的外观设计可以知道页面需要一个外围<div>、一个消息段落（用来显示聊天信息）、姓名文本框、消息文本、提交按钮的表单和一个加载信息时的提示。HTML代码如下：
[插图]
当用户第1次进入聊天室的时候，显示效果如图6-16所示。
[插图]
2．客户端jQuery代码
首先，需要设置当前消息的时间戳为0，并且调用函数来加载数据库已有的聊天消息，代码如下：
[插图]
然后，为表单添加一个submit事件，代码如下：
[插图]
在submit事件函数中，可以使用jQuery的$.post()方法来发送一个POST请求，把要传递的数据都放入第2个参数中，用{ }包裹，代码如下：
[插图]
接下来，如何响应返回的XML呢？为了使代码能被重用，这里创建一个处理XML的函数并且调用该函数（在updateMsg()方法中，也要用到这个解析XML的函数）。函数如下：
[插图]
addMessages()函数里的具体内容将在后边实现。
现在就可以列出表单提交的全部代码了，代码如下：
[插图]
在表单提交事件的最后一行添加了“return false;”语句，可以用来阻止浏览器提交表单。
现在再看addMessages()函数，它是用来处理XML响应信息的。前面讲解过，jQuery遍历XML文档与遍历DOM一样。使用XML文档中的状态码，其代码如下：
[插图]
上段代码中使用$(“status”,xml)方法来通知jQuery去XML文档中寻找“status”标签。如果状态代码为2，则表示完成了请求但没有新信息需要添加到该客户端的消息显示区中，因此使用“return;”语句终止函数调用。如果状态代码不为2，则继续往下执行。
接下来需要为XML的时间戳设定新的值，用来传递给后台去查询新的数据。获取时间戳的代码如下：
[插图]
然后使用$.each()函数将XML文档里的数据遍历出来。在示例中，需要显示到客户端消息显示区的元素就是服务器端返回的每一个“message”标签的实例，每个实例代表一条要显示的消息。以下代码展示如何遍历数据：
[插图]
得到了所需的数据之后，就可以将其追加到消息显示区里。消息显示窗体的id 为“messagewindow”，因此可以使用$(“#messagewindow”)来选择到它并且使用prepend()方法来追加数据，代码如下：
[插图]
将它们整合后，addMessages(xml)函数的代码如下：
[插图]
最后，只剩下刚开始调用的函数 updateMsg()还未完成。该函数的功能是到服务器查询新信息，并且调用addMessages()函数来响应返回的XML文档，同时需要设置一个间隔时间，让聊天窗口自动更新。要开始做这些工作，只需要向服务器提交一个时间戳，引用这个$.post()调用即可，代码如下：
[插图]
在回调函数里，首先应该移除loading消息，可以在这个元素上调用remove()方法，代码如下：
[插图]
然后，在回调函数中将接受到的XML文档对象传递给addMessages()函数，代码如下：
[插图]
最后调用JavaScript的setTimeout()方法来每隔一定时间执行updateMsg()函数。
updateMsg()函数的代码如下：
[插图]
6.8.6 整合代码
[插图]
聊天界面如图6-17所示。
[插图]
正如读者所看到的，仅用了少量的jQuery代码，就实现了一个完整的基于Ajax的Web聊天室应用程序。用jQuery可以如此简单的实现一个复杂的Ajax应用，不得不令人叹服。
6.9 小结