完成7效果文件.docx
《完成7效果文件.docx》由会员分享,可在线阅读,更多相关《完成7效果文件.docx(7页珍藏版)》请在冰豆网上搜索。
完成7效果文件
基于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章选题意义
第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简介页面中,也用到了这个方法。
第一节总结
本文从Ajax相关概念及应用、开发工具介绍到系统设计及实现介绍了制作本系统的目的,是为了让更多的人了解到这个新技术,因为它改变了传统的网站模式,更加为用户考虑,使得页面获得更好的用户体验。
在本文模式,开发者们不需要为完成一个基本的功能建立新的模式;它使用现有的开发技术;使用现有的开发技巧;Ajax完美的集成了Web浏览器提供的功能。
第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.
致谢
在经过了前期选题准备、系统设计、具体编程实现和撰写论文等一系列的工作后,我终于完成了毕业设计所要求完成各项任务。
在这期间我得到了许多老师和同学的热情帮助,在此我表示衷心的感谢。