没有合适的资源?快使用搜索试试~ 我知道了~
java Ajax技术文档pdfwenjian
资源推荐
资源详情
资源评论
第七章 基于 AJAX 的程序开发(未完稿)
本章要点
本章介绍了 AJAX 的发展历史,讲解了 AJAX 的运行机制。通过案例给出了编写 AJAX
应用程序应该注意的要点。最后介绍了著名的 Javascript 开源类库 Prototype 的基本用法。
7.1 AJAX 的历史由来
从 2005 年开始,互联网又进入到沸腾的时代。虽然这一次风险投资商们比上一次互
联网热潮的时候要谨慎得多,整个世界上仍然出现了很多超过亿元美金的大手笔收购事
件。如默多克集团收购 myspace.com,Google 收购 youtube.com 等等。这些收购事件刺激
了人们在互联网技术上的创新。“用户体验”被提高到了前所未有的高度,所有的互联网
开发人员都在思考着如何简化用户操作流程,如何加快用户请求的响应速度。而这一切都
使得 AJAX 技术空前的发展。从本质上讲,AJAX 技术并不是什么新生事务,它只不过是
对旧有的技术的一些新的应用而已。
AJAX 的概念是由 Adaptive Path 公司的 Jesse James Garrett 于 2005 年 2 月在他的一
篇 “Ajax : A New Approach to Web Applications ”中提出的。在文章中 Garrett 把综合运用
Javascript、XHTML、CSS、DOM、XMLHttpRequest、XML 和 XSLT 等技术来改善 B/S
结构客户端用户体验效果的方法称为 AJAX(Asynchronous Javascript And Xml)。
背景:
AJAX 如果被翻译成中文应称作“异步的 Javascript 和 XML ”这显然
不太容易记得住。于是中国的开发人员在提起 AJAX 技术的时候就直接
读其为 “阿贾克斯”。由于这个名字与某个著名的足球队的名字很像,读
起来也琅琅上口,因此 AJAX 技术在人们的好奇心驱动下迅速流行,成
为近两年最热门的技术话题。看来对于新生事物的流行与否,名字总会
起到非常关键的作用。
其实,Garrett 并不是 AJAX 技术的发明者,在 Garrett 的文章发表之前,AJAX 技术早
已经在一些内部的 Web 系统中得到了应用。就连大名鼎鼎的 Google 也已将 AJAX 技术应
用到了 Google Maps、Google Gmail 等多个产品中。只是这时候这些技术的综合应用还没
有一个名字。Garrett 一语定乾坤,对这些技术做了一个精辟的总结,其中的异步性
(Asynchronous)是这个技术的关键。之后“AJAX”这个缩写短语就像“XML”、“SOA”
一样开始风靡世界。
7.2 B/S 结构的用户体验问题
随着网络时代的来临,传统的应用程序开发从 Client/Server 结构开始向 Browser/Server
结构过渡。B/S 结构由于使用了通用的瘦客户端——浏览器,可以在任何地方进行操作而
不需要安装专门的软件,也不再需要为每次系统应用的升级而修改客户端。然而 B/S 结构
也有着一些固有的局限性,例如:B/S 结构的浏览器无法向 C/S 结构一样发挥客户端 PC
的处理能力,在客户端处理多个步骤之后再将最终结果传递到服务器端,而是每次要进行
一个动作就要把请求发送到服务器端,再由服务器端返回结果,之后才能进行下一个请求,
这样,其响应速度比 C/S 结构要慢很多。从用户体验的角度来讲,B/S 结构不如 C/S 结构。
我们从一个现实的例子开始讨论 AJAX 的运行机制。假如我们是一个互联网公司的开
发人员,我们公司要开发一款邮件系统以便和某公司进行竞争。我们先不去观察竞争对手
正在做些什么,至少我们应该知道,这个邮件系统中最重要的部分是邮件的使用,而最先
开始的部分应该是用户的产生,即用户注册功能。下面是传统的用户注册流程:用户在表
单中输入了自己的用户名、密码以及一些个人信息,点击提交按钮,经客户端 Javascript
验证没有问题,数据被传送到服务器端。服务器端程序检查后发现这个用户名是可以使用
的,就会在服务器端的数据库中产生一条用户信息记录,之后用户就可以使用邮件服务了;
如果服务器端程序发现这个用户提交的用户名已经被占用,则返回出错信息让用户重新修
改申请的用户名并要求其重复提交过程。这样,在简单的注册过程中,用户就有可能多次
重复提交注册申请才能最终找到可用的用户名,而越是人气旺的网站系统,这种用户名注
册冲突的现象发生的概率就越大。试想一下,如果某位用户想使用我们网站的服务,重复
注册提交了好多次,每一次返回的结果都是“该用户名已经被占用了,请重新选择用户名”,
当然会感到沮丧,甚至放弃使用我们的网站服务。因此,如何提高用户体验就成了互联网
开发人员要思考的重要课题。
案例 1 为上图的简单模拟,由一个 html 文件和一个 jsp 文件组成。为了简化操作,案
例去掉了数据库查询部分,不使用 Struts 任何 Web 架构,而仅仅给出最简单的处理逻辑:
如果注册的用户名是 scott 就会显示该用户名已经被占用了。这种简化问题的方法,我们
在以前的学习过程中也经常使用。
源文件:case1/register.html
<body>
<H1>Demo 邮件系统 - 用户注册</H1>
<form name="regForm" id="regForm" action="DoRegister.jsp"
method="post">
注册用户名:
<input type="text" name="userName" id="userName">
<br />
注册密码:
<input type="password" name="password" id="password">
<br />
确认密码:
<input type="password" name="password2" id="password2">
<br />
<input type="submit" value="提交">
</form>
</body>
这个文件是简单的用户注册页面,我们省略了其他的个人信息,只保留了用户名和密
码等关键信息。同时,由于案例展示的目的是说明 AJAX 应用的方便之处,我们去掉了干
扰代码,如 Javascript 的文本验证等。
注意:
在这个 html 文件中我们对 input、form 等元素同时使用了 name 属
性和 id 属性。在 html 4.0 规范中,id 和 name 的作用是不一样的。由于
推荐使用 css 进行对页面元素的样式布局,利用 id 来操纵页面元素是标
准的做法。在一个 html 页面中,元素的 id 是不可以重复的。而 name
属性更重要的作用是完成页面元素向服务器端提交数据。
在服务器端,为了快速阐明原理,我们设计仅由一个 jsp 文件来完成业务逻辑并返回
结果。
源文件:case1/DoRegister.jsp
<%
/*为了使结构简单明了,我们简化了许多
非关键步骤的操作,例如数据库操作*/
String userName = request.getParameter("userName");
//下面是处理逻辑的简化版本
if("scott".equals(userName)){
out.println("用户名"+userName
+"已经被占用了,请重新选择用户名!");
}
else{
//...数据库等系列操作...
out.println("恭喜您"+userName+",注册成功!");
}
%>
当用户运行这个程序时,页面表现如下。
剩余18页未读,继续阅读
资源评论
mahmut5295
- 粉丝: 1
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 课程设计-python爬虫-爬取日报,爬取日报文章后存储到本地,附带源代码+课程设计报告
- 软件和信息技术服务行业投资与前景预测.pptx
- 课程设计-基于SpringBoot + Mybatis+python爬虫NBA球员数据爬取可视化+源代码+文档+sql+效果图
- 软件品质管理系列二项目策划规范.doc
- 基于TensorFlow+PyQt+GUI的酒店评论情感分析,支持分析本地数据文件和网络爬取数据分析+源代码+文档说明+安装教程
- 软件定义无线电中的模拟电路测试技术.pptx
- 软件开发协议(作为技术开发合同附件).doc
- 软件开发和咨询行业技术趋势分析.pptx
- 软件测试题详解及答案.doc
- 软件漏洞生命周期管理策略.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功