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 第第 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 同样也很受广大程序员的 喜欢 因为它运行时占用的系统资源小 扩展性好 支持负载平衡与邮件服务等开发 应用系统常用的功能 而且它还在不断的改进和完善中 任何一个感兴趣的程序员都 基于 jQuery 的 Ajax 聊天室应用 4 可以更改它或在其中加入新的功能 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 对象 5 out 对象 out 对象是一个输出流 用来向客户端输出数据 out 对象用于各种数 毕业设计 论文 5 据的输出 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 的优点来建立可扩展的 应用 struts 是一个不错的选择 Struts 1 框架以 ActionServlet 作为核心控制器 整个应用由客户端请求驱动 当客 基于 jQuery 的 Ajax 聊天室应用 6 户端向 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 显卡 SVAG 显示适配器 2 用户端 因为客户端主要用于浏览和操作数据 所以对客户端的硬件要求不高 不过现在 的电脑很高的性价比 因此需要的配置应该高于下面的配置 毕业设计 论文 7 处理器 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 以上 基于 jQuery 的 Ajax 聊天室应用 8 第第 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 操作都依 赖于选择器 毕业设计 论文 9 在开始了解 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 对象向服务器提交希 望提交的数据 即按需发送 基于 jQuery 的 Ajax 聊天室应用 10 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 中 url String 请求的 HTML 页的 URL 地址 data Map 可选参数 发送至服务器的 key value 数据 callback Callback 可选参数 请求完成时 不需要是 success 的 的回调函数 毕业设计 论文 11 这个方法默认使用 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 图 3 1Ajax 请求选项配置信息 基于 jQuery 的 Ajax 聊天室应用 12 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 图 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 或更早的版本不能在全局作用域中同步执行脚本 如 毕业设计 论文 13 果通过 getScript 加入脚本 请加入延时函数 这个方法可以用在例如当只有编辑器 focus 的时候才去加载编辑器需要的 JS 文件 下面看一些示例代码 加载并执行 test js jQuery 代码 getScript test js 加载并执行 AjaxEvent js 成功后显示信息 jQuery 代码 getScript AjaxEvent js function alert AjaxEvent js 加载完成 5 jQuery Ajax 事件 Ajax 请求会产生若干不同的事件 我们可以订阅这些事件并在其中处理我们的逻 辑 在 jQuery 这里有两种 Ajax 事件 局部事件和全局事件 局部事件就是在每次的 Ajax 请求时在方法内定义的 例如 ajax beforeSend function Handle the beforeSend event complete function Handle the complete event 全局事件是每次的 Ajax 请求都会触发的 它会向 DOM 中的所有元素广播 在上 面 getScript 示例中加载的脚本就是全局 Ajax 事件 全局事件可以如下定义 loading bind ajaxSend function this show bind ajaxComplete function this hide 或者 loading ajaxStart function this show 我们可以在特定的请求将全局事件禁用 只要设置下 global 选项就可以了 ajax url test html global false 禁用全局 Ajax 事件 下面是 jQuery 官方给出的完整的 Ajax 事件列表 ajaxStart Global Event 基于 jQuery 的 Ajax 聊天室应用 14 This event is broadcast if an Ajax request is started and no other Ajax requests are currently running beforeSend Local Event This event which is triggered before an Ajax request is started allows you to modify the XMLHttpRequest object setting additional headers if need be ajaxSend Global Event This global event is also triggered before the request is run success Local Event This event is only called if the request was successful no errors from the server no errors with the data ajaxSuccess Global Event This event is also only called if the request was successful error Local Event This event is only called if an error occurred with the request you can never have both an error and a success callback with a request ajaxError Global Event This global event behaves the same as the local error event complete Local Event This even