基于Ajax技术的Web页面开毕业论文排版

基于Ajax技术的Web页面开发 THE WEB PAGE DEVELOPMENT BASED ONAJAX 专业：计算机科学与技术 姓名：杨宇馥 指导教师姓名： 申请学位级别：学士 论文提交日期：2007 年 6 月 12 日 学位授予单位：天津科技大学 摘要 摘要 AJAX 全 称 为 “ Asynchronous JavaScript and XML ” ( 异 步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页 开发技术。 它是几种已经在各自领域成熟发展的技术的强强 结合。 Ajax 混合了基于 XHTML/CSS， 由 DOM （Document Object Model）实现动态显示与交互，通过 XML 和 XSLT 进行数据交 换及处理，使用 JavaScript 整合上述技术。 Ajax 方法是 WEB2.0 的核心，而且围绕 Ajax 的技术和应用也越 来越多。鉴于 Ajax 方法相当新，仍然处于探索阶段，本设 计旨在建立一个关于 Ajax 专题网站， 介绍一些关于 Ajax 的 内容及一些小实例，并在该网站上运用了 Ajax 技术实现简 单的异步通信功能。本系统从 Ajax 的基本概念，Ajax 相关 技术、Ajax 新闻及 Ajax 实例等方面介绍 Ajax 专题网站的 开发和技术手段。 技术上主要使用 JavaScript 和 XML 语言， 辅以 PHP 语言和 MySQL 数据库来实现。 关键词：Ajax； WEB2.0； JavaScript ABSTRACT ABSTRACT AjaxsfullnameisAsynchronousJavaScriptandXML (asynchronousJavaScriptandXML),itmeanswebpage development technology that it found interactive web page. It is union what a few of technology develop very well in itself field. Ajax mixed XHTML/CSS, and DOM (Document Object Model) achieve dynamic display and interactive, through XML and XSLT exchange data processing, it use JavaScript conformity these technology. Ajax is centered by the WEB2.0, also the technology and the application is more and more related with Ajax. Because Ajax is very new, it is explore moment. This design is about Ajaxs special website, introduce about Ajaxs content and examples, anditusesAjaxtechnologyanditachievessimple asynchronizationcommunication.Thissystemintroduces development and technology about Ajaxs special website from Ajaxs basic concept, technology, news and examples. The technology uses JavaScript and XML language, on the other hand it uses PHP language and MySQL database. Key words：AjaxWEB2.0JavaScript 目录 I 目目录录 2013 届本科毕业生设计 1 第一章第一章 选题意义选题意义 第一节第一节 Web 系统工作机制系统工作机制 Internet 的基本协议是 TCP/IP 协议 （传输控制协议和网际协议） ， 目前广泛使用的 FTP、 HTTP （超文本传输协议，Hypertext Transfer Protocol） 、Archie Gopher 都是建立在 TCP/IP 上面的 应用层协议，不同的协议对应不同的应用，而 HTTP 协议是 Web 应用所使用的主要协议。 Web 应用程序采用 B/S（Browser/Server）结构即浏览器和服务器结构。在这种结构下，当 服务器收到用户的请求之后，响应客户端的请求，回送应答的数据，把存放在服务器上的消 息（以 HTML/XTHML/XML 等方式）传回给用户，然后再由浏览器显示在屏幕上。当客户 端发出断开连接的请求后，服务器关闭连接1。 第二节第二节 Web2.0 的概念的概念 一、Web1.0 Web1.0 时代是一个群雄并起，逐鹿网络的时代，虽然各个网站采用的手段和方法不同，但 第一代互联网有诸多共同的特征，表现在： （一）技术创新主导模式 （二）巨大的点击流量 二、Web2.0 Web2.0，是相对 Web1.0（2003 年以前的互联网模式）的新的一类互联网应用的统称，是从 核心内容到外部应用的革命。由 Web1.0 单纯的通过网络浏览器浏览 html 网页模式，向内容 更丰富、联系性更强、工具性更强的 Web2.0 互联网模式的发展，已经成为互联网新的发展 趋势。 第三节第三节 Ajax 概念概念 一、 Ajax 的概念 AJAX 全称为“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML)，是指一种创建 交互式网页应用的网页开发技术。它是几种已经在各自领域成熟发展的技术的强强结合。 具体的说 Ajax 是能够实现不刷新浏览器窗口，而满足用户的操作，现在一些看上去很 Cool 的网站， 很多是用这项技术实现的， 其中包括： Gmail、 Google Group、 Google Suggest、 Google Maps、A 等3。 典型的 Ajax 交互图如下： 2013 届本科毕业生设计 2 图 1-1 标准 Ajax 交互 二、 与传统的 Web 应用比较 传统的 Web 应用允许用户填写表单，当提交表单时就向 Web 服务器发送一个请求，服务器 接收并处理传的响应时间就依赖于服务器的响应时间， 这导致了用户界面的响应比本地应用 慢得多4。 与此不同的是，Ajax 应用可以仅向服务器发送并取回必需的数据，它使用 SOAP 或其它一 些基于 XML 据大量减少，用户就能看到响应更快的应用，同时很多的处理工作可以在发出 请求的客户端机器上完成，所以 Web 服务器的处理时间也减少了5。 第二章第二章 Ajax 技术研究技术研究 第一节第一节 Ajax 理论与技术理论与技术 一、XML HttpRequest Ajax 应用的特点之一就是无需刷新页面即可向服务器传输或者读写数据（又称无刷新更新 页面） ，而不用每次都刷新界面，也不用每次将数据处理的工作提交给服务器来做。这样既 减轻了服务器的负担又加快了响应速度、缩短了用户等候的时间。 最早应用 XMLHTTP 组件的是微软公司，IE（IE5 以上）通过允许开发人员在 Web 页面内 部使用 XMLHTTPActiveX 组件来扩展自身的功能， 开发人员不用通过当前的 Web 页面导航 而直接传输数据到服务器上或者从服务器取回数据。 这个功能是很重要的，从而提高进程的 速度10。 二、XML XML 即可扩展标记语言（extensible Markup Language）的缩写。扩展标记语言 XML 是一种 简单的数据存储语言， 使用一系列简单的标记描述数据， 而这些标记可以用方便的方式建立， 虽然 XML 占用的空间比二进制数据要占用更多的空间， 但 XML 极其简单易于掌握和使用。 第二节第二节 Ajax 开发框架开发框架 一、浏览器框架 （一）Dojo 2013 届本科毕业生设计 2 Dojo 是最老的框架之一，于 2004 年 9 月开始开发。这个项目的目标是建立充分利用 XHR 的 DHTML 工具包， 并传入想调用的 URL 和回调方法即可。 Dojo 有一个特性使它独树一帜， 这就是它支持向后和向前按钮。 （二）Rico Rico 是市场上最新的框架之一，由 Sabre Airline Solutions 开发，随后又成为开源实现。它得 到了广泛的浏览器支持。Rico 是针对拖放动作，数据网格和所谓的电影效果（移动部件、 淡入淡出等等）而设计。 第三章第三章 基于基于 Ajax 技术开发技术开发 Web 页面页面 第一节第一节 数据验证数据验证 在填写表单内容时，需要保证数据的惟一性（例如新用户注册填写的用户） ，因此必须对用 户输入的内容进行数据验证。 可以由 XMLHttpRequest 对象发出验证请求， 根据返回的 HTTP 响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器， 快速而又不加重服务器负担14。 第二节第二节 按需取数据按需取数据 分类树或树形结构在 Web 应用系统中使用得非常广泛，例如部门结构、文档的分类结构常 常使用树形控件呈现。那么读取的数据中就会相当大的冗余，浪费了用户的资源。特别是在 分类结构复杂，数据量庞大的情况下，这种弊端就更加明显了。 一、主页面 在主页面的最新图书中利用到按需取数据，用户会在图书封面底下看到图书的简要介绍。 图 3-1 提取数据图 二、Ajax 简介页面 在 Ajax 简介页面中，也用到了这个方法。 2013 届本科毕业生设计 3 第四章第四章 总结与展望总结与展望 第一节第一节 总结总结 本文从 Ajax 相关概念及应用、开发工具介绍到系统设计及实现介绍了制作本系统的目的， 是为了让更多的人了解到这个新技术，因为它改变了传统的网站模式，更加为用户考虑，使 得页面获得更好的用户体验。 在本文模式， 开发者们不需要为完成一个基本的功能建立新的模式； 它使用现有的开发技术； 使用现有的开发技巧；Ajax 完美的集成了 Web 浏览器提供的功能。 第二节第二节 展望展望 在本文前面的介模式， 开发者们不需要为完成一个基本的功能建立新的模式； 它使用现有的 开发技术；使用现有的开发技巧；Ajax 完美的集成了 Web 浏览器提供的功能。 参考文献 5 参考文献 1 http:/www.CSDN.comEB/OL 2 EB/OL 3 金灵Ajax 基础教程M北京：人民邮电出版社，2006 4徐锋Ajax 高级程序设计M北京：人民邮电出版社，2006 5 王沛征服 Ajax Web 2.0 开发技术详解M北京：人民邮电出版社，2006 6 Ajax 实战M北京：人民邮电出版社，2004 7 张桂元征服 Ajax Web 2.0 快速入门与