完成8效果文件.docx

完成8效果文件.docx

《完成8效果文件.docx》由会员分享，可在线阅读，更多相关《完成8效果文件.docx（7页珍藏版）》请在冰点文库上搜索。

完成8效果文件

基于Ajax技术的Web页面开发

THEWEBPAGEDEVELOPMENTBASEDONAJAX

专业：

计算机科学与技术

姓名：

杨宇馥

指导教师姓名：

申请学位级别：

学士

论文提交日期：

2007年6月12日

学位授予单位：

天津科技大学

摘要

AJAX全称为“AsynchronousJavaScriptandXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

它是几种已经在各自领域成熟发展的技术的强强结合。

Ajax混合了基于XHTML/CSS，由DOM（DocumentObjectModel）实现动态显示与交互，通过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

Keywords：

AjaxWEB2.0JavaScript

目录

第一章选题意义1

第一节Web系统工作机制1

第二节Ajax概念1

第二章Ajax技术研究2

第一节Ajax理论与技术2

第二节Ajax开发框架3

第三章基于Ajax技术开发Web页面3

第一节数据验证3

第二节按需取数据3

第四章展望4

第1章选题意义

第1节Web系统工作机制

Internet的基本协议是TCP/IP协议（传输控制协议和网际协议），目前广泛使用的FTP、HTTP（超文本传输协议，HypertextTransferProtocol）、ArchieGopher都是建立在TCP/IP上面的应用层协议，不同的协议对应不同的应用，而HTTP协议是Web应用所使用的主要协议。

Web应用程序采用B/S（Browser/Server）结构即浏览器和服务器结构。

在这种结构下，当服务器收到用户的请求之后，响应客户端的请求，回送应答的数据，把存放在服务器上的消息（以HTML/XTHML/XML等方式）传回给用户，然后再由浏览器显示在屏幕上。

当客户端发出断开连接的请求后，服务器关闭连接[1]。

一、Web1.0

Web1.0时代是一个群雄并起，逐鹿网络的时代，虽然各个网站采用的手段和方法不同，但第一代互联网有诸多共同的特征，表现在：

（一）技术创新主导模式

（二）巨大的点击流量

二、Web2.0

Web2.0，是相对Web1.0（2003年以前的互联网模式）的新的一类互联网应用的统称，是从核心内容到外部应用的革命。

由Web1.0单纯的通过网络浏览器浏览html网页模式，向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展，已经成为互联网新的发展趋势。

第2节Ajax概念

一、Ajax的概念

AJAX全称为“AsynchronousJavaScriptandXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

它是几种已经在各自领域成熟发展的技术的强强结合。

具体的说Ajax是能够实现不刷新浏览器窗口，而满足用户的操作，现在一些看上去很Cool的网站，很多是用这项技术实现的，其中包括：

Gmail、GoogleGroup、GoogleSuggest、GoogleMaps、A等[3]。

典型的Ajax交互图如下：

图1-1标准Ajax交互

二、与传统的Web应用比较

传统的Web应用允许用户填写表单，当提交表单时就向Web服务器发送一个请求，服务器接收并处理传的响应时间就依赖于服务器的响应时间，这导致了用户界面的响应比本地应用慢得多[4]。

与此不同的是，Ajax应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML据大量减少，用户就能看到响应更快的应用，同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了[5]。

第2章Ajax技术研究

第1节Ajax理论与技术

一、XMLHttpRequest

Ajax应用的特点之一就是无需刷新页面即可向服务器传输或者读写数据（又称无刷新更新页面），而不用每次都刷新界面，也不用每次将数据处理的工作提交给服务器来做。

这样既减轻了服务器的负担又加快了响应速度、缩短了用户等候的时间。

最早应用XMLHTTP组件的是微软公司，IE（IE5以上）通过允许开发人员在Web页面内部使用XMLHTTPActiveX组件来扩展自身的功能，开发人员不用通过当前的Web页面导航而直接传输数据到服务器上或者从服务器取回数据。

这个功能是很重要的，从而提高进程的速度[10]。

二、XML

XML即可扩展标记语言（extensibleMarkupLanguage）的缩写。

扩展标记语言XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。

第2节Ajax开发框架

一、浏览器框架

（一）Dojo

Dojo是最老的框架之一，于2004年9月开始开发。

这个项目的目标是建立充分利用XHR的DHTML工具包，并传入想调用的URL和回调方法即可。

Dojo有一个特性使它独树一帜，这就是它支持向后和向前按钮。

（二）Rico

Rico是市场上最新的框架之一，由SabreAirlineSolutions开发，随后又成为开源实现。

它得到了广泛的浏览器支持。

Rico是针对拖放动作，数据网格和所谓的电影效果（移动部件、淡入淡出等等）而设计。

第3章基于Ajax技术开发Web页面

第1节数据验证

在填写表单内容时，需要保证数据的惟一性（例如新用户注册填写的用户），因此必须对用户输入的内容进行数据验证。

可以由XMLHttpRequest对象发出验证请求，根据返回的HTTP响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不加重服务器负担[14]。

第2节按需取数据

分类树或树形结构在Web应用系统中使用得非常广泛，例如部门结构、文档的分类结构常常使用树形控件呈现。

那么读取的数据中就会相当大的冗余，浪费了用户的资源。

特别是在分类结构复杂，数据量庞大的情况下，这种弊端就更加明显了。

一、主页面

在主页面的最新图书中利用到按需取数据，用户会在图书封面底下看到图书的简要介绍。

图3-1提取数据图

二、Ajax简介页面

在Ajax简介页面中，也用到了这个方法。

第4章展望

在本文前面的介模式，开发者们不需要为完成一个基本的功能建立新的模式；它使用现有的开发技术；使用现有的开发技巧；Ajax完美的集成了Web浏览器提供的功能。

参考文献

[1]http:

//www.CSDN.com[EB/OL]．

[2][EB/OL]．

[3]金灵．Ajax基础教程[M]．北京：

人民邮电出版社，2006．

[4]徐锋．Ajax高级程序设计[M]．北京：

人民邮电出版社，2006．

[5]王沛．征服AjaxWeb2.0开发技术详解[M]．北京：

人民邮电出版社，2006．

[6]ajaxcn.org．Ajax实战[M]．北京：

人民邮电出版社，2004．

[7]张桂元．征服AjaxWeb2.0快速入门与项目实践（.NET）．北京：

人民邮电出版社，2006．

[8]麦克劳夫林．深入浅出Ajax（英文影印版）[M]．东南大学出版社，2006．

[9]JoeFawcett．ProfessionalAjax[M]．NewYork，2006．

[10]佩里．AjaxHacks（英文影印版）[M]．东南大学出版社，2006．

致谢

在经过了前期选题准备、系统设计、具体编程实现和撰写论文等一系列的工作后，我终于完成了毕业设计所要求完成各项任务。

在这期间我得到了许多老师和同学的热情帮助，在此我表示衷心的感谢。