原文作者:Akash Mehta
原文链接:Easy Ajax with jQuery
译者:令狐葱
Easy Ajax with jQuery中文版[1] 示例二: 使用jQuery建造聊天程序
为了展示jQuery的强大,我们将建立一个具有ajax功能的聊天程序.它允许用户发布信息,并且可以实时的更新信息--但是没有任何的页面刷新.鉴于我们将要处理一个相对比较复杂的应用,我将更加深入的讲解jQuery的特性,向您展示她那些用起来很顺手的函数.
首先,我们来规划一下这个应用.我们不需要太多东西--一个前端,一个后端,一个jQuery的库就够了.但是,将会有一些代码处理前端和后端的结合,所以我们首先应该知道预期从系统里看到什么.
规划服务器端 此应用的后端需要处理信息的提交以及输出.把这个铭记在心,这样我们就可以为后端代码构建一个草图:
从数据库获取信息并以XML显示 正如你所看到的,它很简单并且直白.如果你需要使用另外的语言来实现后端程序,你就可以使用这个规划来指导你.
规划客户端 前端需要使用ajax处理反馈,就像我们在第一个例子中做的那样.它需要处理信息的提交,并且用最新的消息不间断的更新聊天窗体.然而,我们将要用到另一个特性--我们将使用
the current UNIX timestamp来展示那个消息被加载了,并且只是抓取这个信息,由此减少贷款使用以及服务器负载.下面就是客户端规划的草图:
- 设置当前的timestamp为0 (所有的信息都在此之后提交, 比如,所有的信息都会被获取)
- 调用函数获取消息
function(函数): 获取新消息
- 使用POST向服务其发送请求
- 调用函数处理XML响应
- 增加一个定时器并且每秒钟调用一次此函数(服务器的性能好的话可以提高此频率)
function: 转换新消息的XML
- 根据XML中的内容设定当前的timestamp
- 如果状态是 '2',则表示没有新消息,终止函数调用
- 否则,对反馈回来的每个消息进行处理, 以下面的格式加到聊天窗口的最上端:
提交信息的时候:
- 作者姓名(用户指定)
- 消息体(用户指定)
- 标识这是一个post请求
- 最后一次向服务器请求的timestamp
保持输入文本框为空,便于用户在此输入信息
调用处理XML响应的函数 (以便让信息实时呈现出来)
看上去比服务器端有点复杂了,但是庆幸有了jQuery,代码不会很长.
规划数据库
我们将使用MySql数据库来存储信息(虽然任何sql数据库都能胜任此工作,并且代码相差也不是很大). 我们需要一个表,有四个列:消息id, 消息作者名,消息体,以及一个数字时间戳(timestamp). 下面使我们创建这个表的sql代码:
CREATE TABLE `messages` (
`id` int(7) NOT NULL auto_increment,
`user` varchar(255) NOT NULL,
`msg` text NOT NULL,
`time` int(9) NOT NULL,
PRIMARY KEY (`id`)
);
由于我们不能判断到底消息有多长,我们现在就只使用一个text字段.
服务器端代码(XML)
要建立后端,我们首先应该知道我们需要后端输出什么(来决定前端和后端的接口),由此向后工作, 下面是一个简单的XML结构:
<?xml version="1.0"?>
<response>
<status>1</status>
<time>1170323512</time>
<message>
<author>John Citizen</author>
<text>Hello world!</text>
</message>
<message>
<author>John Citizen</author>
<text>Hello world again!</text>
</message>
</response>
注意我们已经增加一个标签'status', 它的值为1. 就如我上面提到的,一个状态值为1则标示新信息请求成功,2则表示请求成功但是没有新信息. 每个消息的实例都包括作者以及其信息.
服务器端代码(php)
现在,回到服务器端.我们将使用php来实现,不过由于输出的是xml,所以你可以使用你喜欢的任何语言来写后段代码,比如Perl或者asp.
我们先定义一些配置信息这样便于我们以后对其进行修改. 我们需要数据库连接的具体信息,
我们要存储的消息的数目(数据库可以处理成千上万行数据,所以这个可以适当的设大点),以及用户进到聊天室的时候消息显示的数目. 代码如下:
$dbhost = "<a href="http://www.sitepoint.com/glossary.php?q=L#term_42" title=""Localhost" is an alias for the computer system the user is working on. It's also accessible through the 127.0.0.1 address.">localhot";
$dbuser = "root";
$dbpass = "";
$dbname = "chat";
$store_num = 10;
$display_num = 10;
现在言归正传,我们继续看后端本身.数据库连接自然是必须的, 但是我们同时需要确认不让IE缓存请求数据,并且需要确认输出格式为XML.
为了能够监视所有的错误,我们设置错误汇报为"所有错误"("all errors").
为容易操作请求数据,我们为请求中的每个参数设置一个变量,每个变量将把请求中的参数值作为其自己的值. 代码如下:
error_reporting(E_ALL);
header("Content-type: text/xml");
header("Cache-Control: no-cache");
$dbconn = mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db($dbname,$dbconn);
foreach($_POST as $key => $value)
$$key = mysql_real_escape_string($value, $dbconn);
foreach语句遍历所有的POST数据,并且为每个参数创建一个变量,并且给它赋值(比如path/to/file.php?variable=value将给
$variable
赋值为"value"
).这样就简化了处理请求数据的过程,无需我们手动设定.
下面,我们将进入主要函数部分.现在我们处理消息向数据库的写入,以及根据设定的显示数目$display_num来从数据库中获取相应数目的消息.
当我们规划客户端的时候
我提到过当提交消息的时候我们需要设定一个响应状态. 我们现在需要检查这个响应--我们给蚕食'action'赋值'postmsg',表示我们正在处理这个检查并且插入新数据到数据库.处理的时候我们需要插入新的unix时间戳(
timestamp).
然而,我们仍然需要清理我们的数据库.根据你的数据库的限制,你可以设定存储数据的数量.一般而言,不赞成使用消息日志,所以我这里设定默认存储10条消
息.我们将使用一个函数来获取最新消息的id,并且决定是否删除.举例来说,如果我们增加第11个消息,我们使用11减去存储量(10)就得到一个id阈
值(现在是1),这样的话我们就可以删除小于等于这个阈值的所有消息,这个例子终究是删除第一条消息.有了sql,我们可以只写一条语句就处理这些.
下面的代码片段检查
'postmsg'响应,向数据库添加数据,以及清理数据库.
if(@$action == "postmsg")
{
mysql_query("INSERT INTO messages (`user`,`msg`,`time`)
VALUES ('$name','$message',".time().")");
mysql_query("DELETE FROM messages WHERE id <= ".
(mysql_insert_id($dbconn)-$store_num),$dbconn);
}
使用其他服务器端技术的开发者可以写出等价的代码.注意我们使用time函数来获取unix时间戳.我们可以假设在sql执行过程中这个时间不会改变(即
便是很慢的服务器,这段代码也可以每秒钟执行几百次).
所以当我们向客户端返回一个时间戳的时候,我们可以简单的再次调用time函数,这个值也是可信的.
剩下的工作就是要处理从数据库获取最新的消息并且以XML的形式输出.这里就要用到我上面写的那段xml代码了.然而,大部分代码是sql,我们使用sql的强大来处理这个工作,代码的执行时间不受影响. 下面是sql查询的要求:
- 它只是获取作者以及信息
- 它只是获取还没有被下载的信息--客户端有一个最后请求的时间戳,因此这个时间戳可以被插入到sql中
- 需要对消息进行排序一遍让最新的消息排在最后,并且允许逆序显示.
- 根据配置信息限制获取的消息数量.
任何熟悉sql的人都不会反对这很简单.剩下的就是这些代码了.先看看查询语句:
$messages = mysql_query("SELECT user,msg
FROM messages
WHERE time>$time
ORDER BY id ASC
LIMIT $display_num",$dbconn);
剩下的代码就相当基础,如果没有结果,就设置状态代码为0,否则,设置为1,输出最初的xml,每个消息的xml以及最终的xml.就是这些了,代码如下:
if(mysql_num_rows($messages) == 0) $status_code = 2;
else $status_code = 1;
echo "<?xml version="1.0"?>n";
echo "<response>n";
echo "t<status>$status_code</status>n";
echo "t<time>".time()."</time>n";
while($message = mysql_fetch_array($messages))
{
echo "t<message>n";
echo "tt<author>$message[user]</author>n";
echo "tt<text>$message[msg]</text>n";
echo "t</message>n";
}
echo "</response>";
最终的代码在压缩包里,所以不需要复制上面的代码.现在后端程序完成了,下面我们就该更有趣的工作了--使用html和jQuery!
客户端代码(html)
在使用jQuery之前,我们先处理一下html的页面.这样的话,当我们必须确定使用那些元素来获取或者更新使用jQuery返回的数据时,我们就知道
怎么做了.我们不需要很多东西:一个外围div,一个消息段落以及一个有用户名和消息文本框的form,还有一个submit按钮.最后还需要加一个加载
信息时的提示--我们可以使用jQuery轻松的移除它.下面就是代码:
<div id="wrapper">
<p id="messagewindow"><span id="loading">Loading...</span></p>
<form id="chatform">
Name: <input type="text" id="author" />
Message: <input type="text" id="msg" />
<input type="submit" value="ok" /><br />
</form>
</div>
添加评论
相关文章:
Ajax 的六个误区
如何提高页面响应速度
雅虎的“花生酱宣言”
分享到:
相关推荐
### Easy Ajax with jQuery知识点概述 #### 1. Ajax简介与应用 - **定义**: Ajax(Asynchronous JavaScript and XML)是一种创建交互式网页应用的技术。它通过在后台与服务器进行少量数据交换,使得网页可以在不...
在“Easy Ajax with jQuery”这个中文教程中,我们将深入理解Ajax和jQuery的基础知识。 **什么是Ajax?** Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许网页在不重新加载整个页面的...
- **jquery-1.4.4.min.js**:Easy-UI依赖于jQuery库,这个文件是jQuery的1.4.4版本的压缩版,用于处理DOM操作和事件处理。 - **easyloader.js**:Easy-UI的加载器,可以自动加载所需的组件,简化开发流程。 - **...
1. **jQuery**: jQuery 是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。jQuery EasyUI就是在jQuery的基础上,提供了一系列易于使用的UI组件。 2. **EasyUI组件**: - **树形控件...
easyajax jQuery插件 相依性 -jQuery的 很高兴有 该插件不是必需的,但是如果您想显示Toastr通知和Sweetalert,只需集成Toastr和Sweetalert插件,简单的Ajax会自动使用这些插件代替警报 -引导程序 -敬酒 甜美的 &...
**EasyAjax:简易Ajax开发框架** EasyAjax是一个针对ASP.NET平台设计的轻量级Ajax开发框架,由Visual Studio 2005开发完成。它强调简单易用性,仅包含一个JavaScript文件和三个类,使得开发者能快速地在项目中集成...
基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp...
《jQuery Easy UI 离线API文档详解及CSS设计技巧》 jQuery Easy UI 是一个基于jQuery的前端开发框架,它提供了丰富的UI组件,使得开发者能够快速构建出美观且功能强大的Web应用。离线API文档是开发者在无网络环境下...
`EasyUI官方API中文版.exe` 文件很可能是 EasyUI 的官方文档的中文版,通常包含详细的组件用法、示例代码和API参考,是学习和使用 EasyUI 的重要参考资料。开发者可以通过查阅该文档,了解每个组件的属性、方法、...
《jQuery 1.7.2 中文版与 jQuery 1.6 英文版详解》 jQuery 是一个广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript编程,提供了丰富的选择器、DOM操作、事件处理、动画效果以及Ajax交互等功能。本篇文章...
jQuery的核心特性包括选择器、DOM操作、事件处理、动画以及Ajax。 1. **选择器**: jQuery 提供了CSS选择器,如`$("#id")`用于选取ID为指定值的元素,`$(".class")`用于选取具有特定类名的元素,以及`$("tagname")`...
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和...基于jsp+servlet+jquery+easy-ui+ajax的学生成绩管理系统源码+项目说明.zip
**jQuery Easy UI 模板详解** jQuery Easy UI 是一个基于 jQuery 的前端开发框架,它提供了一系列的组件和样式,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个压缩包包含的 "jQuery Easy UI 学习...
**jQuery EasyTabs.js 插件详解** jQuery EasyTabs.js 是一款功能强大且易于使用的轻量级插件,专为创建响应式的Tab式布局而设计。它允许开发者通过简单的配置选项和自定义事件来实现各种Tab切换效果,为网页内容...
jQuery Easy-UI 是基于jQuery和jQuery UI的一个轻量级框架,它简化了jQuery UI的使用,提供了一套易于上手的预设样式和组件。Easy-UI的主要目标是让开发者能快速构建出美观且功能丰富的Web应用。 - **组件精简**:...
### jQuery Easy UI 知识点概览 #### 1. 基本拖放功能 在jQuery Easy UI中,拖放功能是通过`draggable()`方法实现的,它允许将HTML元素变成可拖动的对象。在给定的教程中,通过创建三个不同的`<div>`元素并使用`...
### DWR:简易 AJAX 对 JAVA 的支持 #### 一、DWR 概述 DWR(Direct Web Remoting)是一个开源库,它简化了 AJAX 在 Java Web 应用中的使用方式。通过 DWR,开发人员可以轻松地在浏览器端调用服务器端的 Java 方法...
Easy File Locker 1.2 汉化版 使用LZMA2算法压缩 请使用7-Zip解压 (WinRAR 需要 4.0版本+ 才能解压)
易阿贾克斯 Based jQuery to build easy ajax api, to simplify ajax request for:1. Dialog2. Form, and submitting3. HTTP asynchronous loading4. others先决条件 1. jQuery2. jQuery Dialog Model安装 1. Setup ...