完成第6题后效果资料.docx
《完成第6题后效果资料.docx》由会员分享，可在线阅读，更多相关《完成第6题后效果资料.docx（9页珍藏版）》请在冰豆网上搜索。
完成第6题后效果资料
基于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
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全称为“AsynchronousJavaScriptandXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
它是几种已经在各自领域成熟发展的技术的强强结合。
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代码：
varxmlHttp;
functionhandleStateChange（）{
document.getElementById（"div1"）.innerHTML=''+out;
}
表3-1chat表
字段名
类型
长度
是否为空
chat_id
int
11
否
posted_on
datetime
10
否
user_name
varchar
255
否
message
text
255
否
color
char
7
否
二、实现Ajax建议和自动完成
自动完成功能曾是桌面应用程序的一个重要特征。
最近这个功能在Web应用中流行起来了。
这个例子可以帮助用户在中查找PHP函数和函数的官方帮助页。
在应用中可以实现以下功能：
当用户打字时匹配函数检索结果并显示在一个下拉列表中；当前关键字是返回结果的第一个建议，并自动补上缺失的字母。
增加的部分高亮显示；与查询关键字匹配的开头几个字母在下拉列表中用黑体显示。
如表所示
数据表：
表3-2suggest表
字段名
类型
长度
是否为空
Name
varchar
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]．北京：
人民邮电出版社，2006．
致谢
在我制作毕业设计的这段时间里，受到很多老师和同学的帮助，取得了很大的进步。
首先，要感谢我的毕业设计指导老师——XXX老师、XXX老师。
在这段时间里一直没有放松对我的要求，无论在学术上和技术上，给了我很大的帮助。
她们认真负责的工作态度、一丝不苟的做人原则、严谨高尚的治学精神和深厚扎实的理论水平都使我受益匪浅。
我的论文也是老师的悉心指导下才完成的。
这对于我以后的工作和学习都有一种巨大的帮助，感谢老师的耐心指导！
在这次毕业设计过程中，我学到了很多东西。
通过这次做毕业设计，又自学了PHP语言和JavaScript语言，在做毕业设计的同时又学了新的知识，并且通过这次毕业设计增强了自己的动手能力。
升级会员 