完成第6题后效果资料Word文件下载.docx
- 文档编号:22270019
- 上传时间:2023-02-03
- 格式:DOCX
- 页数:9
- 大小:34.89KB
完成第6题后效果资料Word文件下载.docx
《完成第6题后效果资料Word文件下载.docx》由会员分享,可在线阅读,更多相关《完成第6题后效果资料Word文件下载.docx(9页珍藏版)》请在冰豆网上搜索。
Ajax方法是WEB2.0的核心,而且围绕Ajax的技术和应用也越来越多。
鉴于Ajax方法相当新,仍然处于探索阶段,本设计旨在建立一个关于Ajax专题网站,介绍一些关于Ajax的内容及一些小实例,并在该网站上运用了Ajax技术实现简单的异步通信功能。
本系统从Ajax的基本概念,Ajax相关技术、Ajax新闻及Ajax实例等方面介绍Ajax专题网站的开发和技术手段。
技术上主要使用JavaScript和XML语言,辅以PHP语言和MySQL数据库来实现。
关键词:
Ajax;
WEB2.0;
JavaScript
ABSTRACT
Ajax’sfullnameisasynchronousjavascriptandxml.Itmeanswebpagedevelopmenttechnologythatitfoundinteractivewebpage.Itisunionwhatafewoftechnologydevelopverywellinitselffield.Ajaxmixedxhtml/css,andcomachievedynamicdisplayandtneractive.Throughxmlandsxltexchangedataprocessing.Itusejavascriptconformitythesetechnology.
AjaxiscenteredbytheWeb2.0,alsothetechnologyandtheapplicationismoreandmorerelatedwithajax.becauseajaxisverynew.itsiexploremoment.thisdesignisaboutajax’sspecialwebsite,introduceaboutajax’scontentandexamples,anditusesajaxtechnologyanditachievessimpleasynchronizationcommunication.Thissystemintroducesdevelopmentandtechnologyaboutajax’sspecialwebsitefromajaxbasicconcept.technology,newsandexamples.
Thetechnologyusesjavascriptandxmllanguage.ontheotherhanditusesPHPlanguageandMysqldatabase.
Keywords:
ajaxweb2.0javascript
第一章选题意义
第一节Web系统工作机制
Internet的基本协议是TCP/IP协议(传输控制协议和网际协议),目前广泛使用的FTP、HTTP(超文本传输协议,HypertextTransferProtocol)、ArchieGopher都是建立在TCP/IP上面的应用层协议,不同的协议对应不同的应用,而HTTP协议是Web应用所使用的主要协议HTTP协议的上述特点,通常,客户端每次需要更新信息都必须重新向服务器发起请求,客户端收到服务器返回的信息后再更新屏幕内容[1]。
第二节Web2.0的概念
一、Web1.0
Web1.0时代是一个群雄并起,逐鹿网络的时代,虽然各个网站采用的手段和方法不同,但第一代互联网有诸多共同的特征,表现在:
(一)Web1.0基本采用的是技术创新主导模式
信息技术的变革和使用对于网站的新生与发展起到了关键性的作用。
新浪的最初就是以技术平台起家,搜狐以搜索技术起家,腾讯以即时通讯技术起家,盛大以网络游戏起家,在这些网站的创始阶段,技术性的痕迹相当之重。
(二)Web1.0的盈利都基于一个共通点
即巨大的点击流量。
无论是早期融资还是后期获利,依托的都是为数众多的用户和点击率,以点击率为基础上市或开展增值服务,受众群众的基础,决定了盈利的水平和速度,充分地体现了互联网的眼球经济色彩。
二、Web2.0
Web2.0,是相对Web1.0(2003年以前的互联网模式)的新的一类互联网应用的统称,是从核心内容到外部应用的革命。
由Web1.0单纯的通过网络浏览器浏览html网页模式,向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展,已经成为互联网新的发展趋势。
第三节Ajax概念
一、Ajax的概念
Ajax混合了XHTML/CSS,由DOM(DocumentObjectModel)实现动态显示与交互,通过XML和XSLT进行数据交换及处理,使用JavaScript整合上述技术。
具体的说Ajax是能够实现不刷新浏览器窗口,而满足用户的操作,现在一些看上去很Cool的网站,很多是用这项技术实现的,其中包括:
Gmail、GoogleGroup、GoogleSuggest、GoogleMaps、A等[3]。
二、与传统的Web应用比较
传统的Web应用允许用户填写表单,当提交表单时就向Web服务器发送一个请求,服务器接收并处理传来的表单,然后返回一个新的网页。
这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML代码往往是相同的。
由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间,这导致了用户界面的响应比本地应用慢得多[4]。
与此不同的是,Ajax应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的Webservice接口,并在客户端采用JavaScript处理来自服务器的响应。
因为在服务器和浏览器之间交换的数据大量减少,用户就能看到响应更快的应用,同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了[5]。
三、Ajax的工作原理
Ajax的核心是JavaScript对象XmlHttpRequest。
该对象在InternetExplorer5中首次引入,它是一种支持异步请求的技术。
XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性[7]。
第二章Ajax技术研究
第一节Ajax理论与技术
一、XMLHttpRequest
Ajax应用的特点之一就是无需刷新页面即可向服务器传输或者读写数据(又称无刷新更新页面),这一特点主要得益于XMLHttpRequest对象。
这样就可以像桌面应用程序一样,只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作提交给服务器来做。
这样既减轻了服务器的负担又加快了响应速度、缩短了用户等候的时间。
最早应用XMLHTTP组件的是微软公司,IE(IE5以上)通过允许开发人员在Web页面内部使用XMLHTTPActiveX组件来扩展自身的功能,开发人员不用通过当前的Web页面导航而直接传输数据到服务器上或者从服务器取回数据。
这个功能是很重要的,从而提高进程的速度。
二、XML
XML即可扩展标记语言(extensibleMarkupLanguage)的缩写。
扩展标记语言XML是一种简单的数据存储语言,使用一系列简单的标记描述数据,而这些标记可以用方便的方式建立,虽然XML占用的空间比二进制数据要占用更多的空间,但XML极其简单易于掌握和使用。
XML同时也推出一种新型文档类型,使得开发者可以不必定义文档类型[2]。
第二节Ajax开发框架
一、浏览器框架
(一)Dojo
Dojo是最老的框架之一,于2004年9月开始开发。
这个项目的目标是建立充分利用XHR的DHTML工具包,并把重心放在可用性问题上。
Dojo只有几个文件,不用处理XHR的建立,只需调用bind方法,并传入想调用的URL和回调方法即可。
Dojo有一个特性使它独树一帜,这就是它支持向后和向前按钮。
(三)qooxdoo
qooxdoo是Ajax框架领域的一个新成员,它提供了一个基于JavaScript的工具包来弥补HTML的不足。
尽管还处在早期的阶段,但qooxdoo提供了一些相当引人注目的部件。
使用qooxdoo,可以模拟标准客户应用中的一些特性,如菜单条、工具提示、风格布局和拖放支持。
二、服务器端框架
(一)CPAINT
CPAINT(跨平台异步接口工具包)在服务器端实现Ajax,它向客户返回文本或DOM文档对象,以便用JavaScript处理。
CPAINT在大多数主要浏览器上都能用,而且支持远程脚本。
(二)Sajax
利用Sajax,可以直接从JavaScript调用服务器端代码。
Sajax支持Perl、Python、Ruby和ASP等语言(目前并不支持Java)。
安装Sajax相当简单,只涉及针对特定服务器语言的简单的库。
已经确认的只有IE6和Mozilla/Firefox提供Sajax支持。
第三章基于Ajax技术开发Web页面
第一节数据验证
在填写表单内容时,需要保证数据的惟一性(例如新用户注册填写的用户),因此必须对用户输入的内容进行数据验证。
数据验证通常有两种方式:
一种是直接填写,然后提交表单,这种方式需要将整个页面提交到服务器端进行验证,整个过程不仅时间长而且造成了服务器不必要的负担;
第二节按需取数据
分类树或树形结构在Web应用系统中使用得非常广泛,例如部门结构、文档的分类结构常常使用树形控件呈现。
一、主页面
当单击第一个图书封面后,会看到右边的效果图,图书的简要介绍会在图书封面的下面显示。
这个方法是在图书封面下面有一个层,当单击图书封面后,会通过发送的id,来决定在XML文件中调用哪部分的数据,然后在层中显示。
主要JavaScript代码:
<
scripttype="
text/javascript"
>
varxmlHttp;
functionhandleStateChange(){
document.getElementById("
div1"
).innerHTML='
fontsize="
2"
'
+out;
}
表3-1chat表
字段名
类型
长度
是否为空
chat_id
int
11
否
posted_on
datetime
10
user_name
varchar
255
message
text
color
char
7
二、实现Ajax建议和自动完成
自动完成功能曾是桌面应用程序的一个重要特征。
最近这个功能在Web应用中流行起来了。
这个例子可以帮助用户在中查找PHP函数和函数的官方帮助页。
在应用中可以实现以下功能:
当用户打字时匹配函数检索结果并显示在一个下拉列表中;
当前关键字是返回结果的第一个建议,并自动补上缺失的字母。
增加的部分高亮显示;
与查询关键字匹配的开头几个字母在下拉列表中用黑体显示。
如表所示
数据表:
表3-2suggest表
Name
100
如图所示:
图3-1Ajax建议和自动完成主页面
图3-2第一个字母存在界面
第四章总结与展望
第一节总结
本文从Ajax相关概念及应用、开发工具介绍到系统设计及实现介绍了制作本系统的目的,是为了让更多的人了解到这个新技术,因为它改变了传统的网站模式,更加为用户考虑,使得页面获得更好的用户体验。
在这次做毕业设计的过程中,也遇到了很多问题,例如当单击“简要”时,应该可以看到当前文件的一个概述,可是在实现的过程中,什么都没有发生,只有IE浏览器提示网页上有错误,由于在修改文件时,经常使用文本文件,所以保存时都是默认方式,但是使用XML文件,一般都是用UTF-8文本格式,后来试着在保存文本文件时,将保存格式更改为UTF-8格式之后,再运行,文件的概述可以出现了,在这个例子中,深切体会到,编程是需要很细心的,稍微不注意,很细微的东西都会影响程序的运行。
第二节展望
在本文前面的介绍中,可以看出在建立Web应用程序时使用Ajax将给用户带来如下潜在的好处:
它可以实现一个更加优秀、响应更加迅速的网站或Web应用程序;
它的流行将促进建立统一的开发模式,开发者们不需要为完成一个基本的功能建立新的模式;
它使用现有的开发技术;
使用现有的开发技巧;
Ajax完美的集成了Web浏览器提供的功能。
当然Ajax也存在一些潜在问题:
网址在整个工作过程中是不变的,因此很难将支持Ajax的网页加入到书签中;
搜索引擎可能无法为Ajax应用站点的每个部分都建立索引;
游览器的后退按钮不能完成传统Web应用程序的功能,因为所有的操作在同一个页面完成;
如果客户端禁用JavaScript,那么所有的Ajax应用程序将无法工作,所以应在站点中做出另一种备选方案。
Ajax已经改变了传统的网站模式,它的应用范围还是比较宽广的,在今后,会有更多的网站应用Ajax技术。
参考文献
[1]http:
//www.CSDN.com[EB/OL].
[2][EB/OL].
[3]金灵.Ajax基础教程[M].北京:
人民邮电出版社,2006.
[4]徐锋.Ajax高级程序设计[M].北京:
人民邮电出版社,2006.
[5]王沛.征服AjaxWeb2.0开发技术详解[M].北京:
致谢
在我制作毕业设计的这段时间里,受到很多老师和同学的帮助,取得了很大的进步。
首先,要感谢我的毕业设计指导老师——XXX老师、XXX老师。
在这段时间里一直没有放松对我的要求,无论在学术上和技术上,给了我很大的帮助。
她们认真负责的工作态度、一丝不苟的做人原则、严谨高尚的治学精神和深厚扎实的理论水平都使我受益匪浅。
我的论文也是老师的悉心指导下才完成的。
这对于我以后的工作和学习都有一种巨大的帮助,感谢老师的耐心指导!
在这次毕业设计过程中,我学到了很多东西。
通过这次做毕业设计,又自学了PHP语言和JavaScript语言,在做毕业设计的同时又学了新的知识,并且通过这次毕业设计增强了自己的动手能力。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 完成 效果 资料
![提示](https://static.bdocx.com/images/bang_tan.gif)