完成第6题后效果

1、基于Ajax技术的Web页面开发THE WEB PAGE DEVELOPMENT BASED ON AJAX 专 业：计算机科学与技术 姓 名：杨宇馥 指导教师姓名： 申请学位级别：学 士 论文提交日期：2007年6月12日 学位授予单位：天津科技大学摘要摘 要AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。它是几种已经在各自领域成熟发展的技术的强强结合。Ajax混合了基于XHTML/CSS，由DOM（Document Object Model）实现动态显示与交互，通过XML和XSL

2、T进行数据交换及处理，使用JavaScript整合上述技术。Ajax方法是WEB2.0的核心，而且围绕Ajax的技术和应用也越来越多。鉴于Ajax方法相当新，仍然处于探索阶段，本设计旨在建立一个关于Ajax专题网站，介绍一些关于Ajax的内容及一些小实例，并在该网站上运用了Ajax技术实现简单的异步通信功能。本系统从Ajax的基本概念，Ajax相关技术、Ajax新闻及Ajax实例等方面介绍Ajax专题网站的开发和技术手段。技术上主要使用JavaScript和XML语言，辅以PHP语言和MySQL数据库来实现。关键词：Ajax； WEB2.0； JavaScriptabstractABSTRAC

3、TAjaxs full name is asynchronous javascript and xml. It means web page 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 com achieve dynamic display and tneractive. Through xml and sxlt exchan

4、ge data processing. It use javascript conformity these technology.Ajax is centered by the Web 2.0,also the technology and the application is more and more related with ajax.because ajax is very new.it si explore moment.this design is about ajaxs special website,introduce about ajaxscontent and examp

5、les,and it uses ajax technology and it achieves simple asynchronization communication.This system introduces development and technology about ajaxs special website from ajax basic concept.technology,news and examples. The technology uses javascript and xml language.on the other hand it uses PHP lang

6、uage and Mysql database.Key words：ajax web2.0 javascript 目录目录I2012届本科生毕业设计第一章 选题意义章名第一节 Web系统工作机制节名 Internet的基本协议是TCP/IP协议（传输控制协议和网际协议），目前广泛使用的FTP、HTTP（超文本传输协议，Hypertext Transfer Protocol）、Archie Gopher都是建立在TCP/IP上面的应用层协议，不同的协议对应不同的应用，而HTTP协议是Web应用所使用的主要协议HTTP协议的上述特点，通常，客户端每次需要更新信息都必须重新向服务器发起请求，客户端收

7、到服务器返回的信息后再更新屏幕内容1引用，文中所以引用请设置为上标 。第二节 Web2.0的概念节一、Web1.0Web1.0时代是一个群雄并起，逐鹿网络的时代，虽然各个网站采用的手段和方法不同，但第一代互联网有诸多共同的特征，表现在：（一）Web1.0基本采用的是技术创新主导模式信息技术的变革和使用对于网站的新生与发展起到了关键性的作用。新浪的最初就是以技术平台起家，搜狐以搜索技术起家，腾讯以即时通讯技术起家，盛大以网络游戏起家，在这些网站的创始阶段，技术性的痕迹相当之重。（二）Web1.0的盈利都基于一个共通点即巨大的点击流量。无论是早期融资还是后期获利，依托的都是为数众多的用户和点击率，

8、以点击率为基础上市或开展增值服务，受众群众的基础，决定了盈利的水平和速度，充分地体现了互联网的眼球经济色彩。二、Web2.0Web2.0，是相对Web1.0（2003年以前的互联网模式）的新的一类互联网应用的统称，是从核心内容到外部应用的革命。由Web1.0单纯的通过网络浏览器浏览html网页模式，向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展，已经成为互联网新的发展趋势。第三节 Ajax概念节一、 Ajax的概念AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。它

9、是几种已经在各自领域成熟发展的技术的强强结合。Ajax混合了XHTML/CSS，由DOM（Document Object Model）实现动态显示与交互，通过XML和XSLT进行数据交换及处理，使用JavaScript整合上述技术。具体的说Ajax是能够实现不刷新浏览器窗口，而满足用户的操作，现在一些看上去很Cool的网站，很多是用这项技术实现的，其中包括：Gmail、Google Group、Google Suggest、Google Maps、A等3引用。二、 与传统的Web应用比较传统的Web应用允许用户填写表单，当提交表单时就向Web服务器发送一个请求，服务器接收并处理传来的表单，然后

10、返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，这导致了用户界面的响应比本地应用慢得多4引用。与此不同的是，Ajax应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的Web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，用户就能看到响应更快的应用，同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了5引用。三、Ajax的工作原理Aja

11、x的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性7引用。第二章 Ajax技术研究章名第一节 Ajax理论与技术节一、XMLHttpRequestAjax应用的特点之一就是无需刷新页面即可向服务器传输或者读写数据（又称无刷新更新页面），这一特点主要得益于XMLHttpRequest对象。这样就可以像桌面应用程序一样，只同服务器进行数据层

12、面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作提交给服务器来做。这样既减轻了服务器的负担又加快了响应速度、缩短了用户等候的时间。最早应用XMLHTTP组件的是微软公司，IE（IE5以上）通过允许开发人员在Web页面内部使用XMLHTTP ActiveX组件来扩展自身的功能，开发人员不用通过当前的Web页面导航而直接传输数据到服务器上或者从服务器取回数据。这个功能是很重要的，从而提高进程的速度。二、XMLXML即可扩展标记语言（extensible Markup Language）的缩写。扩展标记语言XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的

13、方式建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。XML同时也推出一种新型文档类型，使得开发者可以不必定义文档类型2引用。第二节 Ajax开发框架节一、浏览器框架（一）DojoDojo是最老的框架之一，于2004年9月开始开发。这个项目的目标是建立充分利用XHR的DHTML工具包，并把重心放在可用性问题上。Dojo只有几个文件，不用处理XHR的建立，只需调用bind方法，并传入想调用的URL和回调方法即可。Dojo有一个特性使它独树一帜，这就是它支持向后和向前按钮。（三）qooxdooqooxdoo是Ajax框架领域的一个新成员，它提供了一个基于Jav

14、aScript的工具包来弥补HTML的不足。尽管还处在早期的阶段，但qooxdoo提供了一些相当引人注目的部件。使用qooxdoo，可以模拟标准客户应用中的一些特性，如菜单条、工具提示、风格布局和拖放支持。二、服务器端框架（一）CPAINTCPAINT（跨平台异步接口工具包）在服务器端实现Ajax，它向客户返回文本或DOM文档对象，以便用JavaScript处理。CPAINT在大多数主要浏览器上都能用，而且支持远程脚本。（二）Sajax利用Sajax，可以直接从JavaScript调用服务器端代码。Sajax支持Perl、Python、Ruby和ASP等语言（目前并不支持Java）。安装Saj

15、ax相当简单，只涉及针对特定服务器语言的简单的库。已经确认的只有IE6和Mozilla/Firefox提供Sajax支持。第三章 基于Ajax技术开发Web页面章第一节 数据验证节在填写表单内容时，需要保证数据的惟一性（例如新用户注册填写的用户），因此必须对用户输入的内容进行数据验证。数据验证通常有两种方式：一种是直接填写，然后提交表单，这种方式需要将整个页面提交到服务器端进行验证，整个过程不仅时间长而且造成了服务器不必要的负担； 第二节 按需取数据节分类树或树形结构在Web应用系统中使用得非常广泛，例如部门结构、文档的分类结构常常使用树形控件呈现。 一、主页面当单击第一个图书封面后，会看到右

16、边的效果图，图书的简要介绍会在图书封面的下面显示。这个方法是在图书封面下面有一个层，当单击图书封面后，会通过发送的id，来决定在XML文件中调用哪部分的数据，然后在层中显示。主要JavaScript代码：<script type="text/javascript">var xmlHttp;function handleStateChange() document.getElementById("div1").innerHTML='<font size="2">'+out;表3-1 chat表字段

17、名类型长度是否为空chat_idint11否posted_ondatetime10否user_namevarchar255否messagetext255否colorchar7否二、实现Ajax建议和自动完成自动完成功能曾是桌面应用程序的一个重要特征。最近这个功能在Web应用中流行起来了。这个例子可以帮助用户在中查找PHP函数和函数的官方帮助页。在应用中可以实现以下功能：当用户打字时匹配函数检索结果并显示在一个下拉列表中；当前关键字是返回结果的第一个建议，并自动补上缺失的字母。增加的部分高亮显示；与查询关键字匹配的开头几个字母在下拉列表中用黑体显示。如表所示数据表：表3-2 suggest表字段

18、名类型长度是否为空Namevarchar100否如图所示：图3-1 Ajax建议和自动完成主页面图3-2 第一个字母存在界面第四章 总结与展望章第一节 总结节本文从Ajax相关概念及应用、开发工具介绍到系统设计及实现介绍了制作本系统的目的，是为了让更多的人了解到这个新技术，因为它改变了传统的网站模式，更加为用户考虑，使得页面获得更好的用户体验。在这次做毕业设计的过程中，也遇到了很多问题，例如当单击“简要”时，应该可以看到当前文件的一个概述，可是在实现的过程中，什么都没有发生 ，只有IE浏览器提示网页上有错误，由于在修改文件时，经常使用文本文件，所以保存时都是默认方式 ，但是使用XML文件，一般

19、都是用UTF-8文本格式，后来试着在保存文本文件时，将保存格式更改为UTF-8格式之后，再运行，文件的概述可以出现了，在这个例子中，深切体会到，编程是需要很细心的，稍微不注意，很细微的东西都会影响程序的运行。第二节 展望节在本文前面的介绍中，可以看出在建立Web应用程序时使用Ajax将给用户带来如下潜在的好处：它可以实现一个更加优秀、响应更加迅速的网站或Web应用程序；它的流行将促进建立统一的开发模式，开发者们不需要为完成一个基本的功能建立新的模式；它使用现有的开发技术；使用现有的开发技巧；Ajax完美的集成了Web浏览器提供的功能。当然Ajax也存在一些潜在问题：网址在整个工作过程中是不变的，