jQuery_Ajax聊天室_完整版.doc

毕业设计 论文 I 基于基于 jQuery 的的 Ajax 聊天室应用聊天室应用 摘摘 要要 随着网络的逐渐普及 以及网络技术的不断发展 人们通过网络进行交流的方式 变得多样化 网络聊天室便是其中之一 聊天室的即时交流方式满足了网络中多人同 时聊天交流的需要 使得较多的人在同一个聊天页面进行交流变得方便 简单 矚慫润厲 钐瘗睞枥庑赖 本设计的目的是采用 jQuery 框架开发一个网络聊天室 jQuery 是一个快速和简洁 的 JavaScript 库 它简化了 HTML 文件的文档遍历 事件处理 动画以及快速 Web 开 发应用的 Ajax 技术 本聊天室具有常用聊天室的所有功能 包括多人同时在线聊天 能 显示在线用户列表 同时 为了管理聊天室中的用户 设计了用户注册登陆功能 增加 了聊天室的操作性 聞創沟燴鐺險爱氇谴净 本文首先介绍了聊天室所使用到的一些关键技术 例如 jQuery 技术和 Ajax 技术 接着介绍了该系统的设计思路 然后是对系统的详细介绍 包括系统中创建的数据库 以及系统的具体功能介绍 聊天室在互联网上的应用非常普遍 实现的方法也是多种 多样 相比之下 采用优秀的 jQuery 框架实现的聊天室更加高效 流畅 更加富有前 景 残骛楼諍锩瀨濟溆塹籟 关键词关键词 聊天室 jQuery Ajax 基于 jQuery 的 Ajax 聊天室应用 II JQuery Ajax based Chat Room Application Abstract With the increasing popularity of the network and the development of network technology the way to communicate with others through the network becomes diverse Internet chat room is one of the way It meets the need of people that can communicate with others who are online instantly and makes people chatting on the same page becomes convenient and simple The design aims to develop a chat room based on jQuery structure jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing event handling animating and Ajax interactions for rapid web development The chat room has all common functions including more than one chatting in the same time and can display and update the list of online users instantly Meanwhile in order to manage the users the chat room has the user registration login function which increase the operability of the chat room 酽锕极額閉镇桧猪訣 锥 The paper first introduces the key technologies used such as jquery and ajax then introduced the system design and requirements analysis followed by a detailed description of the system including a database created and specific features introduced in the design The application of the chat room is very common on the Internet and the approaches of implementation are varied Compared with those traditional the chat room based on jQuery is more effective and fast and have a bright outlook Keywords Chat Room Ajax jQuery彈贸摄尔霁毙攬砖卤庑 毕业设计 论文 III 目录 引引 言言 1謀荞抟箧飆鐸怼类蒋薔 第第 1 章章 绪论绪论 2厦礴恳蹒骈時盡继價骚 1 1 系统概述 2茕桢广鳓鯡选块网羈泪 1 2 需求背景 2鹅娅尽損鹌惨歷茏鴛賴 1 3 系统开发目的与意义 2籟丛妈羥为贍偾蛏练淨 第第 2 章章 开发工具及相关技术介绍开发工具及相关技术介绍 3預頌圣鉉儐歲龈讶骅籴 2 1 开发工具 3渗釤呛俨匀谔鱉调硯錦 2 1 1 MyEclipse 介绍 3铙誅卧泻噦圣骋贶頂廡 2 1 2 MySQL 数据库介绍 3擁締凤袜备訊顎轮烂蔷 2 1 3 Tomcat 6 0 服务器 3贓熱俣阃歲匱阊邺镓騷 2 2 关键技术 4坛摶乡囂忏蒌鍥铃氈淚 2 2 1 JSP 4蜡變黲癟報伥铉锚鈰赘 2 2 2 JavaScript 4買鲷鴯譖昙膚遙闫撷凄 2 2 3 Ajax 技术 5綾镝鯛駕櫬鹕踪韦辚糴 2 2 4 jQuery 技术 5驅踬髏彦浃绥譎饴憂锦 2 2 5 Struts 技术 5猫虿驢绘燈鮒诛髅貺庑 2 3 系统环境 6锹籁饗迳琐筆襖鸥娅薔 2 3 1 开发环境 6構氽頑黉碩饨荠龈话骛 2 3 2 运行环境 6輒峄陽檉簖疖網儂號泶 第第 3 章章 JQUERY 技术技术 8尧侧閆繭絳闕绚勵蜆贅 3 1 JQUERY简介 8识饒鎂錕缢灩筧嚌俨淒 3 2 配置JQUERY环境 8凍鈹鋨劳臘锴痫婦胫籴 3 3 编写简单的JQUERY代码 8恥諤銪灭萦欢煬鞏鹜錦 3 4 JQUERY选择器 8鯊腎鑰诎褳鉀沩懼統庫 3 5 JQUERY与 AJAX的应用 9硕癘鄴颃诌攆檸攜驤蔹 第第 4 章章 系统设计系统设计 17阌擻輳嬪諫迁择楨秘騖 4 1 基于JQUERY的 AJAX聊天室功能要求 17氬嚕躑竄贸恳彈瀘颔澩 4 2 聊天室总体功能结构图 17釷鹆資贏車贖孙滅獅赘 4 3 聊天室总体架构 17怂阐譜鯪迳導嘯畫長凉 4 4 模块设计 19谚辞調担鈧谄动禪泻類 4 5 数据库设计 20嘰觐詿缧铴嗫偽純铪锩 第第 5 章章 系统实现系统实现 22熒绐譏钲鏌觶鷹緇機库 5 1 项目代码结构设计 22鶼渍螻偉阅劍鲰腎邏蘞 5 2 详细设计介绍 22纣忧蔣氳頑莶驅藥悯骛 5 2 1 登录功能设计 22颖刍莖蛺饽亿顿裊赔泷 5 2 2 注册功能设计 25濫驂膽閉驟羥闈詔寢賻 5 2 3 聊天功能设计 28銚銻縵哜鳗鸿锓謎諏涼 第第 6 章章 系统测试系统测试 38挤貼綬电麥结鈺贖哓类 6 1 单元测试 38赔荊紳谘侖驟辽輩袜錈 6 2 集成测试 39塤礙籟馐决穩賽釙冊庫 6 3 系统测试 39裊樣祕廬廂颤谚鍘羋蔺 基于 jQuery 的 Ajax 聊天室应用 IV 结论与展望结论与展望 41仓嫗盤紲嘱珑詁鍬齊驁 致致 谢谢 42绽萬璉轆娛閬蛏鬮绾瀧 参考文献参考文献 43骁顾燁鶚巯瀆蕪領鲡赙 附附 录录 44瑣钋濺暧惲锟缟馭篩凉 附录 A 外文文献及其翻译 44鎦诗涇艳损楼紲鯗餳類 附录 B 主要参考文献的题录及摘要 51栉缏歐锄棗鈕种鵑瑶锬 毕业设计 论文 V 插图清单插图清单 图 5 1 项目代码结构图 22辔烨棟剛殓攬瑤丽阄应 图 5 2 登陆页面图 23峴扬斕滾澗辐滠兴渙藺 图 5 3 登陆失败图 23詩叁撻訥烬忧毀厉鋨骜 图 5 4 注册页面图 26则鯤愜韋瘓賈晖园栋泷 图 5 5 聊天页面图 29胀鏝彈奥秘孫戶孪钇賻 图 5 6 xia 的登录页面图 31鳃躋峽祷紉诵帮废掃減 图 5 7 ss 的登录页面图 31稟虛嬪赈维哜妝扩踴粜 图 5 8 ss 的聊天页面图 32陽簍埡鲑罷規呜旧岿錟 图 5 9 xia 的聊天页面图 32沩氣嘮戇苌鑿鑿槠谔應 基于 jQuery 的 Ajax 聊天室应用 VI 表格清单表格清单 表 4 1 用户信息表 21钡嵐縣緱虜荣产涛團蔺 表 4 2 聊天信息表 21懨俠劑鈍触乐鹇烬觶騮 表 6 1 用户登录信息等价类划分 38謾饱兗争詣繚鮐癞别瀘 表 6 2 用户登录信息测试用例 39呙铉們欤谦鸪饺竞荡赚 毕业设计 论文 1 引引 言言 Internet 是目前世界上最大的计算机互联网络 它遍布全球 将世界各地各种规模 的网络连接成一个整体 作为 Internet 上一种先进的 易于被人们所接受的信息检索手 段 World Wide Web 简称 WWW 发展十分迅速 成为目前世界上最大的信息资源 宝库 如今 人们不仅可以在网上查询自己需要的资源 而且可以通过网络进行实时 的沟通 从实时性和有效性上都超过了用信件和 Email 并且在费用上要低于电话 因而各种聊天服务备受用户青睐 在这方面的开发与应用也较多 聊天服务也成为互 联网提供的重要服务之一 因此 建立一个好的在线交流聊天系统十分重要 互联网 的大多数网站都建有聊天室 并且有专业聊天网站提供聊天服务 莹谐龌蕲賞组靄绉嚴减 网上聊天系统是为人们进行交流和联系提供的一个平台 利用现代的网络资源优 势和技术优势 通过提供完善的网上聊天系统 以达到增进人们与人们之间的信息交 流和沟通的目的 麸肃鹏镟轿騍镣缚縟糶 基于 jQuery 的 Ajax 聊天室应用 2 第第 1 章章 绪论绪论 1 1 系统概述 近年来计算机技术的快速发展 特别是计算机网络的发展 越来越深刻的改变了 人们生活的方方面面 使得人们能以更低廉的价格 开发出更方便 更实用的网络工 具 各种在线服务系统 更是深刻的影响了人们的联系和交流方式 使得人们可以在 远隔千里之遥随时通讯 过去的种种陈旧的联系方式 已经不能满足现代生活的需要 网上聊天系统作为一种方便拥有共同兴趣爱好的人们之间联系的实用系统便应运而生 納畴鳗吶鄖禎銣腻鰲锬 本设计主要是实现一个能够方便人们在线交流的聊天室 能够及时显示在线人员 和聊天内容 1 2 需求背景 随着计算机网络日新月异的发展 人们的交流方式越来越多 传统的交流方式 如 信件 电报 电话等已经难以满足人们的交流要求 在互联网上即时的和好友取 得联系 已经成为当今社会人们主流的联系方式 两台计算机之间进行即时通讯 发 送文件等交流方式已经成为时代的潮流 因此出现了 QQ 等聊天工具 然而 QQ 等聊 天工具虽然方便 实用 但是 娱乐功能太多 有很多吸引人的娱乐功能 从一定程 度上来说 是一种娱乐工具 不能作为用于作为即时通讯 文件共享的专用工具 目 前 用于实现单一的即时通讯 文件共享的软件实在太少 并且 它们中大部分都是 绝对的 C S 模式 对远程服务器有非常大的依赖性 没有彻底实现点对点的交流 風撵 鲔貓铁频钙蓟纠庙 在常见的聊天室开发中 有基于 ASP 基于 SOCKET 基于 JAVA 开发的聊天室 本系统采用基于 JSP 采用 jQuery 和 Ajax 技术进行开发 JSP 将网页逻辑与网页设计和 显示分离 支持可重用的基于组件的设计 使基于 Web 的应用程序的开发变得迅速和 容易 因此 采用 JSP 开发在线聊天系统可以提高开发效率和系统性能 灭嗳骇諗鋅猎輛觏 馊藹 网上聊天系统是常见的 也是比较有代表性的 Internet 应用系统之一 其实现的 难点是聊天怎样保存聊天内容以及怎么样将聊天的信息及时快捷地在服务器和用户之 间进行传递和共享 目前常见的聊天内容保存方式有三种 一是利用数据库直接保存 聊天内容 二是利用文本文件保存聊天内容三是利用 Application 对象保存聊天内容 这三种聊天内容保存方法的基本过程和开发的难易程度相似 本系统采用第二种方式 将聊天信息存入数据库中 管理起来较方便 铹鸝饷飾镡閌赀诨癱骝 1 3 系统开发目的与意义 网络聊天系统是为人与人之间进行交流和联系提供的一个平台 通过提供完善的 聊天服务和规范的管理 可以达到增进人与人之间的感情 促进人们之间的沟通 方 便人们联系的目的 同时本系统可以拉近人与人之间的距离 丰富人们的业余时间 毕业设计 论文 3 为人们在网络中交友提供了便捷的渠道 攙閿频嵘陣澇諗谴隴泸 基于 jQuery 的 Ajax 聊天室应用 4 第第 2 章章 开发工具及相关技术介绍开发工具及相关技术介绍 2 1 开发工具 2 1 1 MyEclipse 介绍 MyEclipse 企业级工作平台 MyEclipse Enterprise Workbench 简称 MyEclipse 是 对 EclipseIDE 的扩展 利用它我们可以在数据库和 JavaEE 的开发 发布以及应用程序 服务器的整合方面极大的提高工作效率 它是功能丰富的 JavaEE 集成开发环境 包括 了完备的编码 调试 测试和发布功能 完整支持 HTML Struts JSP CSS JavaScript Spring SQL Hibernate 趕輾雏纨颗锊讨跃满賺 2 1 2 MySQL 数据库介绍 MySQL 是一个小型关系型数据库管理系统 开发者为瑞典 MySQLAB 公司 MySQL 是一种关联数据库管理系统 关联数据库将数据保存在不同的表中 而不是将 所有数据放在一个大仓库内 这样就增加了速度并提高了灵活性 MySQL 的 SQL 结 构化查询语言 SQL 是用于访问数据库的最常用标准化语言 MySQL 软件采用了 GPL GNU 通用公共许可证 由于其体积小 速度快 总体拥有成本低 尤其是开 放源码这一特点 许多中小型网站为了降低网站总体拥有成本而选择了 MySQL 作为网 站数据库 夹覡闾辁駁档驀迁锬減 MySQL 是一个快速 多线程 多用户的 SQL 数据库服务器 它支持正规的 SQL 查询语言和采用多种数据类型 能对数据进行各种详细的查询等 视絀镘鸸鲚鐘脑钧欖粝 MySQL 数据库的主要特征有 1 MySQL 的核心程序采用完全的多线程编程 线程是轻量级的进程 它可以灵活地为用户提供服务 而不过多的系统资源 用多线 程和 C 语言实现的 MySql 能很容易充分利用 CPU 2 MySQL 可运行在不同的操作 系统下 3 MySQL 有一个非常灵活而且安全的权限和口令系统 当客户与 MySQL 服务器连接时 他们之间所有的口令传送被加密 而且 MySQL 支持主机认证 4 MySQL 支持 ODBC for Windows 5 MySQL 支持大型的数据库 MySQL 可以方便 地支持上千万条记录的数据库 作为一个开放源代码的数据库 MySQL 可以针对不同 的应用进行相应的修改 6 MySQL 拥有一个非常快速而且稳定的基于线程的内存分 配系统 可以持续使用面不必担心其稳定性 事实上 MySQL 的稳定性足以应付一个 超大规模的数据库 7 强大的查询功能 MySQL 支持查询的 SELECT 和 WHERE 语 句的全部运算符和函数 并且可以在同一查询中混用来自不同数据库的表 从而使得 查询变得快捷和方便 10 偽澀锟攢鴛擋緬铹鈞錠 2 1 3 Tomcat 6 0 服务器 Tomcat 是 Apache 软件基金会 Apache Software Foundation 的 Jakarta 项目中的 一个核心项目 由 Apache Sun 和其他一些公司及个人共同开发而成 因为 Tomcat 技术先进 性能稳定 而且免费 因而深受 Java 爱好者的喜爱并得到了部分软件开发 商的认可 成为目前比较流行的 Web 应用服务器 Tomcat 同样也很受广大程序员的 喜欢 因为它运行时占用的系统资源小 扩展性好 支持负载平衡与邮件服务等开发 应用系统常用的功能 而且它还在不断的改进和完善中 任何一个感兴趣的程序员都 毕业设计 论文 5 可以更改它或在其中加入新的功能 緦徑铫膾龋轿级镗挢廟 Tomcat 是一个轻量级应用服务器 在中小型系统和并发访问用户不是很多的场合 下被普遍使用 是开发和调试 JSP 程序的首选 当配置正确时 Apache 为 HTML 页面 服务 而 Tomcat 实际上运行 JSP 页面和 Servlet 另外 Tomcat 和 IIS Apache 等 Web 服务器一样 具有处理 HTML 页面的功能 另外它还是一个 Servlet 和 JSP 容器 独立的 Servlet 容器是 Tomcat 的默认模式 不过 Tomcat 处理静态 HTML 的能力不如 Apache 服务器 目前 Tomcat 最新版本为 7 0 27 Released 本系统采用 Tomcat 6 0 版本 騅憑钶銘侥张礫阵轸蔼 2 2 关键技术 2 2 1 JSP JSP Java Server Pages 是由 Sun Microsystems 公司倡导 许多公司参与一起建立 的一种动态网页技术标准 JSP 技术有点类似 ASP 技术 它是在传统的网页 HTML 文 件 htm html 中插入 Java 程序段 Scriptlet 和 JSP 标记 tag 从而形成 JSP 文 件 jsp 用 JSP 开发的 Web 应用是跨平台的 既能在 Linux 下运行 也能在其他 操作系统上运行 疠骐錾农剎貯狱颢幗騮 JSP 页面由 HTML 代码和嵌入其中的 Java 代码所组成 服务器在页面被客户端请 求以后对这些 Java 代码进行处理 然后将生成的 HTML 页面返回给客户端的浏览器 Java Servlet 是 JSP 的技术基础 而且大型的 Web 应用程序的开发需要 Java Servlet 和 JSP 配合才能完成 JSP 具备了 Java 技术的简单易用 完全的面向对象 具有平台无关 性且安全可靠 主要面向因特网的所有特点 镞锊过润启婭澗骆讕瀘 JSP 是一种编译性程序 当一个 JSP 应用程序被首次访问时 JSP 所在的服务器首 先将 JSP 程序转变成为 java 程序 然后编译成 class 类文件 最后加载到服务器内存中 为客户端请求提供服务 客户请求结束后 依然驻留内存 等待第二次请求到达 所 以 JSP 网页在执行上通常是首次执行比较慢 但以后的执行速度要快很多 这是 ASP 程序锁不具备的 9 榿贰轲誊壟该槛鲻垲赛 JSP 有五种内置对象 1 request 对象 该对象封装了用户提交的信息 通过调用该对象相应的方法可以 获取封装的信息 即使用该对象可以获取用户提交信息 它是 HttpServletRequest 的实 例 邁茑赚陉宾呗擷鹪讼凑 2 response 对象 对客户的请求做出动态的响应 向客户端发送数据 嵝硖贪塒廩袞悯 倉華糲 3 Session 对象 session 对象是一个 JSP 内置对象 它在第一个 JSP 页面被装载时 自动创建 完成会话期管理 从一个客户打开浏览器并连接到服务器开始 到客户关 闭浏览器离开这个服务器结束 被称为一个会话 当一个客户访问一个服务器时 可 能会在这个服务器的几个页面之间反复连接 反复刷新一个页面 服务器应当通过某 种办法知道这是同一个客户 这就需要 session 对象 该栎谖碼戆沖巋鳧薩锭 4 application 对象 服务器启动后就产生了这个 application 对象 当客户在所访问 的网站的各个页面之间浏览时 这个 application 对象都是同一个 直到服务器关闭 但是与 session 不同的是 所有客户的 application 对象都是同一个 即所有客户共享这 个内置的 application 对象 劇妆诨貰攖苹埘呂仑庙 基于 jQuery 的 Ajax 聊天室应用 6 5 out 对象 out 对象是一个输出流 用来向客户端输出数据 out 对象用于各种数 据的输出 2 2 2 JavaScript JavaScript 是 Netscape 公司开发的一种脚本语言 JavaScript 的出现使得网页和用 户之间实现了一种实时的 动态的和交互的关系 使网页包含更多的活跃的元素和更 加精彩的内容 JavaScript 自身存在 3 个弊端 即复杂的文档对象模型 DOM 不一 致的浏览器实现和缺乏便捷的开发 调试工具 臠龍讹驄桠业變墊罗蘄 正当 JavaScript 从开发者的视线中渐渐隐去时 一种新型的基于 JavaScript 的 Web 技术 Ajax Asynchronous JavaScript And XML 异步的 JavaScript 和 XML 诞生了 而使人们真正认识到 Ajax 技术的强大的导火索是 Google 公司推出的一系列新型 Web 应用 例如 Gmail Google Suggest 和 Google Map 等 互联网中基于 JavaScript 的应用 越来越多 使 JavaScript 不再是一种仅仅用于制作 Web 页面的简单脚本 3 鰻順褛悦漚縫冁 屜鸭骞 2 2 3 Ajax 技术 Ajax 即 Asynchronous JavaScript and XML 异步 JavaScript 和 XML Ajax 不 是一种新的编程语言 而是一种用于创建更好更快以及交互性更强的 Web 应用程序的 技术 通过 Ajax JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务 器进行通信 4 通过这个对象 JavaScript 可在不重载页面的情况与 Web 服务器交换数据 Ajax 在浏览器与 Web 服务器之间使用异步数据传输 HTTP 请求 这样就可使网页 从服务器请求少量的信息 而不是整个页面 Ajax 可使因特网应用程序更小 更快 更友好 Ajax 是一种独立于 Web 服务器软件的浏览器技术 2 穑釓虚绺滟鳗絲懷紓泺 2 2 4 jQuery 技术 jQuery 是继 prototype 之后又一个优秀的 JavaScript 框架 它是轻量级的 js 库 压缩 后只有 21k 它兼容 CSS3 还兼容各种浏览器 IE 6 0 FF 1 5 Safari 2 0 Opera 9 0 jQuery 使用户能更方便地处理 HTML documents events 实现动 画效果 并且方便地为网站提供 Ajax 交互 jQuery 还有一个比较大的优势是 它的文 档说明很全 而且各种应用也说得很详细 同时还有许多成熟的插件可供选择 jQuery 能够使用户的 HTML 页保持代码和 HTML 内容分离 也就是说 不用再在 HTML 里 面插入一堆 js 来调用命令了 只需定义 id 即可 jQuery 凭借简洁的语法和跨平台的兼 容性 极大地简化了 JavaScript 开发人员遍历 HTML 文档 操作 DOM 处理事件 执 行动画和开发 Ajax 的操作 其独特而又优雅的代码风格改变了 JavaScript 程序员的设 计思路和编写程序的方式 总之 无论是网页设计师 后台开发者 业余爱好者还是 项目管理者 都很有必要去学习 jQuery jQuery 强调的理念是写得少 做得多 jQuery 独特的选择器 链式操作 事件处理机制和封装完善的 Ajax 都是其他 JavaScript 库望尘莫及的 1 隶誆荧鉴獫纲鴣攣駘賽 2 2 5 Struts 技术 Struts 是开源软件 使用 Struts 的目的是为了帮助我们减少在运用 MVC 设计模型 来开发 Web 应用的时间 如果我们想混合使用 Servlets 和 JSP 的优点来建立可扩展的 毕业设计 论文 7 应用 struts 是一个不错的选择 浹繢腻叢着駕骠構砀湊 Struts 1 框架以 ActionServlet 作为核心控制器 整个应用由客户端请求驱动 当客 户端向 Web 应用发送请求时 请求将被 Struts 1 的核心控制器 ActionServlet 拦截 ActionServlet 根据请求决定是否需要调用业务逻辑控制器处理用户请求 实际上 业 务逻辑控制器还是控制器 它只是负责调用模型来处理用户请求 当用户请求处理完 成后 其处理结果通过 JSP 呈现给用户 鈀燭罚櫝箋礱颼畢韫粝 对于整个 Struts 1 框架而言 控制器就是它的核心 Struts 1 的控制器由两个部分 组成 核心控制器和业务逻辑控制器 其中核心控制器就是 ActionServlet 由 Struts 1 框架提供 业务逻辑控制就是用户自定义的 Action 由应用开发者提供 惬執缉蘿绅颀阳灣 熗鍵 对于大部分用户请求而言 都需要得到服务器的处理 当用户发送一个需要得到 服务器处理的请求时 该请求被 ActionServlet 拦截到 ActionServlet 将该请求转发给 对应的业务逻辑控制器 业务逻辑控制器调用模型来处理用户请求 如果用户请求只 是希望得到某个 URL 资源 则由 ActionServlet 将被请求的资源转发给用户 贞廈给鏌綞牵 鎮獵鎦龐 Struts 2 与 Struts 1 相比 确实有很多革命性的改进 但它并不是新发布的新框架 而是在另一个赫赫有名的框架 WebWork 基础上发展起来的 从某种程度上来讲 Strut2 没有继承 Struts 1 的血统 而是继承了 WebWork 的血统 或者说 WebWork 衍 生出了 Struts 2 而不是 Struts 1 衍生了 Struts 2 因为 Struts 2 是 WebWork 的升级 而 不是一个全新的框架 因此稳定性 性能等各方面都有很好的保证 而且吸收了 Struts 1 和 WebWork 两者的优势 因此 是一个非常值得期待的框架 15 嚌鲭级厨胀鑲铟礦毁蕲 2 3 系统环境 2 3 1 开发环境 开发模式系统基于 Browser Server 模式进行设计 开发工具 myeclipse8 6 JDK6 0 开发语言 JAVA JSP HTML JavaScript 后台数据库 MySQL Server 5 1 服务器 采用 Tomcat 6 0 服务器 2 3 2 运行环境 硬件环境 1 服务器端 服务器端的最低配置是由建立站点所需的软件来决定的 在最低配置的情况下 服务器的往往不尽如人意 现在的硬件性能已经相当出色 而且价格也很便宜 因此 通常应给服务器端配置高性能的硬件 薊镔竖牍熒浹醬籬铃騫 本网络系统服务器端的配置如下 处理器 Inter Pentium4 1 6GHz 或更高 内存 512MB 硬盘空间 80GB 光驱 CD ROM 48X 基于 jQuery 的 Ajax 聊天室应用 8 显卡 SVAG 显示适配器 2 用户端 因为客户端主要用于浏览和操作数据 所以对客户端的硬件要求不高 不过现在 的电脑很高的性价比 因此需要的配置应该高于下面的配置 齡践砚语蜗铸转絹攤濼 处理器 Inter Pentium 1 0GHz 或更高 内存 256MB 硬盘空间 40GB 光驱 CD ROM 48X 显卡 SVAG 显示适配器 软件环境 1 服务器端 操作系统 Windows 2000 Server 网络协议 TCP IP web 服务器 Tomcat6 0 数据库 MySQL Server 5 1 浏览器 Internet Explorer 6 0 以上 2 用户端 操作系统 Windows 98 2000 XP 网络协议 TCP IP 数据库 MySQL Server 5 1 浏览器 Internet Explorer 6 0 以上 毕业设计 论文 9 第第 3 章章 jQuery 技术技术 3 1 jQuery 简介 jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 是一个由 John Resig 创建 于 2006 年 1 月的开源项目 现在的 jQuery 团队主要包括核心库 UI 和插件等开发人 员以及推广和网站涉及维护人员 jQuery 凭借简洁的语法和跨平台的兼容性 极大地 简化了 JavaScript 开发人员遍历 HTML 文档 操作 DOM 处理事件 执行动画和开发 Ajax 的操作 其独特而又优雅的代码风格改变了 JavaScript 程序员的设计思路和编写 程序的方式 1 绅薮疮颧訝标販繯轅赛 3 2 配置 jQuery 环境 为了能顺利的应用 jQuery 技术 首先必须要进入 jQuery 的官方网站 jQuery 库文件 jQuery 库的类型分为两种 分别是 jQuery1 3 1 18KB Minified and Gripped 和 jQuery1 3 1 114KB Uncompressed 两者的区别在于前者是完整无压缩版 主要用于学习 测试和开发 后者是经过 JSMin 等工具压缩后的版本 主要用于产品和项目 饪箩狞屬诺釙诬苧径凛 jQuery 不需要安装 把下载的 jquery 1 3 1 js 放到网站上的一个公共位置 想要在 某个页面上使用 jQuery 时 只需要在相关的 HTML 文档中引入该库文件的位置即可 1 烴毙潜籬賢擔視蠶贲粵 3 3 编写简单的 jQuery 代码 在开始编写 jQuery 程序之前 首先应该明确一点 在 jQuery 库中 就是 jQuery 的一个简写形式 例如 foo 和 jQuery foo 是等价的 ajax 和 jQuery ajax 是等 价的 下面展示一个简单的 jQuery 程序 鋝岂涛軌跃轮莳講嫗键 撷伪氢鱧轍幂聹諛詼庞 document ready function alert Hello World 这段代码的作用类似于传统 JavaScript 中得 window onload 方法 3 4 jQuery 选择器 选择器是 jQuery 的根基 在 jQuery 中 对事件处理 遍历 DOM 和 Ajax 操作都依 赖于选择器 基于 jQuery 的 Ajax 聊天室应用 10 在开始了解 jQuery 选择器之前 有必要了解一下 CSS 技术 CSS 是一项出色的技 术 它使得网页的结构和表现样式完全分离 利用 CSS 选择器能轻松地对某个元素添 加样式而不改动 HTML 结构 只需通过添加不同的 CSS 规则 就可以得到各种不同样 式的网页 踪飯梦掺钓貞绫賁发蘄 常用的 CSS 选择器 1 标签选择器 语法 E CSS 规则 以文档元素为选择符 2 ID 选择器 语法 ID CSS 规则 以文档元素的唯一标识符 ID 作为选择符 3 类选择器 语法 E class CSS 规则 以文档元素的 class 作为选择符 4 群组选择器 语法 E1 E2 E3 CSS 规则 多个选择符应用同样的样式规则 5 后代选择器 语法 E F CSS 规则 元素 E 的任意后代元素 F 6 通配选择器 语法 CSS 规则 以文档的所有元素作为选择符 8 jQuery 中的选择器完全继承了 CSS 的风格 利用 jQuery 选择器 可以非常便捷和 快速地找出特定的 DOM 元素 然后为他们添加相应的行为 而无需担心浏览器是否 支持这一选择器 婭鑠机职銦夾簣軒蚀骞 jQuery 选择器的优势 1 简洁的写法 函数在很多 JavaScript 类库中都被作为一个选择器函数来使用 在 jQuery 中 也不例外 其中 ID 用来代替 document getElementById 函数 即通过 ID 获取元素 tagName 用来代替 document getElementByTagName 函数 即通过标签名获取 HTML 元素 譽諶掺铒锭试监鄺儕泻 2 支持 CSS1 到 CSS3 选择器 3 完善的处理机制 使用 jQuery 获取网页中不存在的元素也不会报错 7 3 5 jQuery 与 Ajax 的应用 Ajax 全称为 Asynchronous JavaScirpt and XML 异步 JavaScript 和 XML 它并 不是指一种单一的技术 而是有机地利用了一系列交互式网页应用相关的技术所形成 的结合体 它的出现 揭开了无刷新更新页面的新时代 并有代替传统的 Web 方式和 通过隐藏的框架来进行异步提交的趋势 是 Web 开发应用的一个里程碑 7 俦聹执償閏号燴 鈿膽賾 Ajax 的优势 1 不需要插件支持 Ajax 不需要任何浏览器插件 就可以被大多数主流浏览器所支持 用户只需要 允许 JavaScript 在浏览器上执行即可 缜電怅淺靓蠐浅錒鵬凜 2 优秀的用户体验 这是 Ajax 技术的最大优点 能在不刷新整个页面的前提下更新数据 这使得 Web 应用程序能更为迅速地回应用户的操作 骥擯帜褸饜兗椏長绛粤 3 提高 Web 程序的性能 与传统模式相比 Ajax 模式在性能上的最大区别就在于传输数据的方式 在传 统模式中 数据提交是通过表单来实现的 而数据获取是靠全页面刷新来重新 获取整页的内容 而 Ajax 模式只是通过 XMLHttpRequest 对象向服务器提交希 毕业设计 论文 11 望提交的数据 即按需发送 癱噴导閽骋艳捣靨骢鍵 4 减轻服务器和宽带的负担 Ajax 的工作原理相当于在用户和服务器之间加了一个中间层 使用户操作与服 务器响应异步化 它在客户端创建 Ajax 引擎 把传统方式下的一些服务器负担 的工作转移到客户端 便于客户端资源来水处理 减轻服务器和宽带的负担 鑣鸽夺圆鯢齙慫餞離龐 Ajax 的不足 1 浏览器对 XMLHttpRequest 对象的支持度不足 Ajax 的不足之一首先来自于浏览器 Internet Explorer 在 5 0 及以后的版本后才 支持 XMLHttpRequest 对象 Mozilla Netscape 等浏览器更在其后 为了使得 Ajax 应用能在各个浏览器中正常运行 程序员必须花费大量的精力编码以兼顾 各个浏览器之间的差别 来让 Ajax 应用能够很好地兼容各个浏览器 这使得 Ajax 开发的难度比普通的 Web 开发高出很多 许多程序员因此对 Ajax 望而生 畏 榄阈团皱鹏緦寿驏頦蕴 2 破坏浏览器前进 后退按钮的正常功能 在传统的网页中 用户经常会习惯性的使用浏览器自带的 前进 和 后退 按钮 然而 Ajax 改变了此 Web 浏览习惯 在 Ajax 中 前进 和 后退 按钮 的功能会失效 但相对于传统的方式却麻烦了许多 对于大多数程序员宁可放 弃前进 后退功能 也不愿意在繁琐的逻辑中去处理该问题 然而 对于用户 来说 他们经常会碰到这种情况 当单机一个按钮触发了一个 Ajax 交互后又觉 得不想这样做 接着会习惯性地单击 后退 按钮 结果发生了最不愿意看到 的结果 浏览器后退到了先前的一个页面 通过 Ajax 交互得到的内容完全消失 了 逊输吴贝义鲽國鳩犹騸 3 对搜索引擎的支持的不足 对于搜索引擎的支持也是 Ajax 的一项缺憾 通过搜索引擎都是通过爬虫程序 来对互联网上的数以亿计的海量数据来进行搜索整理的 然而爬虫程序现在还 不能理解那些奇怪的 JavaScript 代码和因此引起的页面内容的变化 这使得应 用 Ajax 的站点在网络推广上相对于传统站点明显处于劣势 幘觇匮骇儺红卤齡镰瀉 4 开发和调试工具的缺乏 JavaScript 是 Ajax 的重要组成部分 在目前 由于缺少很好的 JavaScript 开发和 调试工具 使很多 Web 开发者对 JavaScript 望而生畏 这对于编写 Ajax 代码就 更加困难了 同时 目前许多 Web 开发者已经习惯使用可视化的工具 对亲自 动手编写代码有畏惧感 这也在一定程度上影响了大家对 Ajax 的应用 誦终决懷 区馱倆侧澩赜 jQuery 中的 Ajax Ajax 的核心是 XMLHttpRequest 对象 它是 Ajax 实现的关键 发送异步请求 接收响应及执行回调都是通过它来完成的 医涤侣綃噲睞齒办銩凛 我们先来看一些简单的方法 这些方法都是对 jQuery ajax 进行封装以方便我们使 用的方法 当然 如果要处理复杂的逻辑 还是需要用到 jQuery ajax 的 这个后面会 说到 舻当为遙头韪鳍哕晕糞 1 load url data callback 载入远程 HTML 文件代码并插入至 DOM 中 鸪凑鸛齏 嶇烛罵奖选锯 基于 jQuery 的 Ajax 聊天室应用 12 url String 请求的 HTML 页的 URL 地址 data Map 可选参数 发送至服务器的 key value 数据 callback Callback 可选参数 请求完成时 不需要是 success 的 的回调函数 这个方法默认使用 GET 方式来传递的 如果 data 参数有传递数据进去 就会自动 转换为 POST 方式的 jQuery 1 2 中 可以指定选择符 来筛选载入的 HTML 文档 DOM 中将仅插入筛选出的 HTML 代码 语法形如 url some selector 筧驪鴨栌怀鏇颐 嵘悅废 这个方法可以很方便的动态加载一些 HTML 文件 例如表单 示例代码 ajax load load ml post function responseText textStatus XMLHttpRequest 韋鋯鯖荣擬滄閡悬贖蘊 this 在这里 this 指向的是当前的 DOM 对象 即 ajax load 0 alert responseText 请求返回的内容 alert textStatus 请求状态 success error alert XMLHttpRequest XMLHttpRequest 对象 2 jQuery get url data callback 使用 GET 方式来进行异步请求涛貶騸锬晋铩锩揿宪骟 参数 url String 发送请求的 URL 地址 data Map 可选 要发送给服务器的数据 以 Key value 的键值对形式 表示 会做为 QueryString 附加到请求 URL 中 callback Function 可选 载入成功时回调函数 只有当 Response 的返 回状态是 success 才是调用该方法 钿蘇饌華檻杩鐵样说泻 这是一个简单的 GET 请求功能以取代复杂 ajax 请求成功时可调用回调函数 如果需要在出错时执行函数 请使用 ajax 示例代码 戧礱風熗浇鄖适泞嚀贗 get Ajax aspx Action get Name lulu function data textStatus 購櫛頁詩燦戶踐 澜襯鳳 返回的 data 可以是 xmlDoc jsonObj html text 等等 this 在这里 this 指向的是 Ajax 请求的选项配置信息 请参考下图 alert data alert textStatus 请求状态 success error 等等 当然这里捕捉不到 error 因为 error 的时候根本不会运行该回调函数嗫奐闃頜瑷踯谫瓒兽 粪 alert this jQuery get 回调函数里面的 this 指向的是 Ajax 请求的选项配置信息 图 3 1 毕业设计 论文 13 图 3 1Ajax 请求选项配置信息 3 jQuery post url data callback type 使用 POST 方式来进行异步请求虚龉鐮宠確 嵝誄祷舻鋸 参数 url String 发送请求的 URL 地址 data Map 可选 要发送给服务器的数据 以 Key value 的键值对形式表示 callback Function 可选 载入成功时回调函数 只有当 Response 的返回状态是 success 才是调用该方法 與顶鍔笋类謾蝾纪黾廢 type String 可选 官方的说明是 Type of data to be sent 其实应该为客户端请 求的类型 JSONX ML 等等 結释鏈跄絞塒繭绽綹蕴 这是一个简单的 POST 请求功能以取代复杂 ajax 请求成功时可调用回调函数 如果需要在出错时执行函数 请使用 ajax 示例代码 餑诎鉈鲻缥评缯肃鮮驃 Ajax aspx Response ContentType application json Response Write result Request Name 你好 这消息来自服务器 爷缆 鉅摯騰厕綁荩笺潑 jQuery 代码 post Ajax aspx Action post Name lulu 锞炽邐繒萨蝦窦补飙赝 function data textStatus data 可以是 xmlDoc jsonObj html text 等等 this 这个 Ajax 请求的选项配置信息 请参考 jQuery get 说到的 this alert data result json 点击提交 这里设置了请求的格式为 json 查看请求报头 图 3 2 基于 jQuery 的 Ajax 聊天室应用 14 图 3 2 请求报头信息 如果你设置了请求的格式为 json 此时你没有设置 Response 回来的 ContentType 为 Response ContentType application json 那么你将无法捕捉到返回的数据 曠戗輔 鑽襉倆瘋诌琿凤 注意一下 alert data result 由于设置了 Accept 报头为 json 这里返回的 data 就 是一个对象 并不需要用 eval 来转换为对象 轉厍蹺佥诎脚濒谘閥糞 4 jQuery getScript url callback 通过 GET 方式请求载入并执行一个 JavaScript 文 件 嬷鯀賊沣謁麩溝赉涞锯 参数 url String 待载入 JS 文件地址 callback Function 可选 成功载入后回调函数 jQuery 1 2 版本之前 getScript 只能调用同域 JS 文件 1 2 中 您可以跨域调用 JavaScript 文件 注意 Safari 2 或更早的版本不能在全局作用域中同步执行脚本 如 果通过 getScript 加入脚本 请加入延时函数 讯鎬謾蝈贺綜枢辄锁廪 这个方法可以用在例如当只有编辑器 focus 的时候才去加载编辑器需要的 JS 文件 下面看一些示例代码 兒躉讀闶軒鲧擬钇標藪 加载并执行 test js jQuery 代码 getScript test js 加载并执行 AjaxEvent js 成功后显示信息 jQuery 代码 getScript AjaxEvent js f