十:使用Ajax改进用户体验
asynchronous :异步的
synchronous :同步的
focus :焦点
direct :直接
remote :远程
initial :初始化
目标
10.1:Web 2.0
10.1.1:互联网前世今生
10.1.2:Web2.0的特点
10.2:Ajax
10.2.1:为什么使用Ajax
10.2.2:什么是Ajax
10.2.2:怎样使用Ajax
10.3:Ajax框架
小结:
目标
10.1:Web 2.0
10.1.1:互联网前世今生
黑暗年代:数据和信息不通过电子途径传播和共享的年代。
静态网页时代:互联网提供静态网页给人们浏览。
动态网页时代:动态网页技术的发展史人们可以在互联网上发布信息,数据库技术的发展使互联网开始指导人们的事务。
Web 2.0时代:更佳的用户体验和更高的参与程度(如果说互联网的出现是一次革命,那Web2.0的登场时另外一次革命)。
10.1.2:Web2.0的特点
1),用户贡献内容;2),内容聚合:RSS;3),更丰富的“用户体验”,新的交互方式。(RSS是将信息规范化的一个标准,最主要的应用在Blog[部落格]中)
用户体验的七个目标:有价值,实用,好用,悦人,可信,易寻找,可获取。用户体验:使用软件(或浏览网站)是,很容易地找到想要找的东西,轻松完成想完成的事,视觉效果很舒服,用完后心情好。
应用:Web2.0站点普遍使用了Ajax等技术,出现了Tag等很多新的交互方式,让用户使用软件的过程连贯,方便,自然。举例:Google页面输入框的自动补全功能;可以在自己页面中添加Tab页和“小窗口”通过RSS聚合内容;小窗口可以关闭,最下化和进行个性化设置......
10.2:Ajax
10.2.1:为什么使用Ajax
Ajax技术:通过JavaScript发送请求到服务器,并得到返回结果而只是刷新局部页面(做到“无刷新”)。
无刷新技术:只刷新页面的一小部分,而不用整个页面都刷新。优点:1,避免重复加载,浪费网络资源;2,提供连续的用户体验,不被页面刷新中断。例如:Chinaren首页上的登录功能,tudou网上单击其他按钮并不影响视屏的连续播放,Google地图提供的拖动,放大,缩小等类似桌面程序的用户体验.....
10.2.2:什么是Ajax
Ajax——Asynchronous(异步的),JavaScript And Xml.Ajax只是整合了几种现有的技术:JavaScript,XML和CSS。
解释:主要是JavaScript:通过Javascript的XMLHttpRequest对象完成发送请求道服务器并获得返回结果的任务,然后使用Javascript更新局部的网页。
异步指的是:Javascript发送请求后并不是一直等着服务器的响应,而是发送请求后继续做别的事,请求响应是异步完成的。
XML一般用于请求数据和响应数据的封装,CSS用于美化页面样式。
10.2.2:怎样使用Ajax
编写Ajax代码前先开发好服务器端程序。然后,使用Javascript的XMLHttpRequest发送请求得到结果。
创建XMLHttpRequest对象实例的代码:
function createXmlHttpRequest(){
if(window.ActiveXObject){//如果是IE浏览器
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){//非IE浏览器
return new XMLHttpRequest();
}
}
使用XmlHttpRequest对象分四个步骤:
代码:
var xmlHttpRequest;
function checkUserExists(OCt1){
var uname=oCt1.value;
if(!uname){//??
alert("用户名不能为空");
oCt1.focus();
return ;
}
//发送请求道服务器,判断用户名是否存在
//请求字符串
var url="?operate=doCheckUserExists&uname="+uname;
//1,创建XMLHttpRequest组件
xmlHttpRequest=createXmlHttpRequest();
//2,设置回调函数
xmlHttpRequest.onreadystatechange=haolejiaowo;
//3,初始化XMLHttpRequest组件
xmlHttpRequest.open("GET","url",true);
//4,发送请求
xmlHttpRequest.send(null);
}
function haolejiaowo(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
var b=xmlHttpRequest.responseText;
if(b=="true"){
alert("用户名已存在");
}else{
alert("用户名可以使用");
}
}
}
//
//
解释:
第2句代码:onreadystatechange是xmlHttpRequest对象的一个事件,haolejiaowo是一个JavaScript方法名。含义:在xmlHttpRequest对象的状态发生改变时调用haolejiaowo这个函数。
第3句代码:xmlHttpRequest对象的open方法用于初始化xmlHttpRequest对象,参数(请求发送的方式,请求的url,请求同异步否);true表示是异步的(在调用send方法发送请求后不用等请求响应继续执行后面的代码)。
每次xmlHttpRequest对象状态改变都会调用这个方法。
xmlHttpRequest对象有5种状态:0,未初始化;1,已初始化;2,发送请求;3,开始接受结果;4,接受结果完毕。故而,我们只处理状态readyState为4的情况。
xmlHttpRequest.status表示服务器响应的状态码:200,正常;404,not found(没找到资源);500,服务器出错。
只处理正常响应的情况,即xmlHttpRequest.status为200的情况。当xmlHttpRequest的readyState为4和status为200同时满足时,就可以从xmlHttpRequest.responseText中得到服务器响应的字符串了。
10.3:Ajax框架
Ajax框架简化编码,若使用DWR框架(http://getahead.org/dwr)需要先将Jar包导入项目,在web.xml中配置,并在/WEB-INF/下创建dwr.xml配置文件。
在web.xml中的配置:
<servlet>
<servlet-name>dwr</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
这样,不用在UserAction中添加方法,DWR可以将普通的类发布成Javascript可以调用的脚本对象。(直接创建UserManager类,提供check方法,用于检查用户名是否已存在)
配置dwr.xml:
主要是配置<create>节点,<create>节点有两个属性,creator属性设为new,表示通过new创建对象示例;javascript属性表示页面引用时的脚本对象名;子节点<param>,定义要发布的类别,name属性设为class,value属性设为要发布的类别名;子节点<include>定义暴露的方法。
<dw>
<allow>
<create creator="new" javascript="JUserChecker">
<param name="class" value="com.aptech.jb.biz.UserManager"/>
<include method="check"/>
</create>
</allow>
</dw>
启动服务器,浏览http://localhost:8080/zf10/dwr/,可以看到通过DWR发布的类的列表,单击链接可以打开对应的实例页面,查看并查看实例代码,
<script src='dwr/interface/JUserCheck.js'></script>
<script src='dwr/engine.js'></script>
<script src='dwr/util.js'></script>
function checkUserExists(oCt1){
var name=oCt1.value;
//发送请求到服务器,判断用户名是否存在
JUserchecker.check(uname,haolejiaowo);
}
function haolejiaowo(isExist){
......//同未用DWR框架时代码相同
}
解释:导入定义了JUserChecker脚本对象的dwr/interface/JUserChecker.js和dwr/engine.js,导入包括一些工具方法的dwr/util.js.
通过JUserChecker直接调用check方法,参数(对应原方法的参数,处理响应数据的的函数的函数名),而对于要调用的函数需要的参数,DWR会将Java类check方法执行的返回值传给它。
小结:
通过Ajax技术可以通过JavaScript发送请求到服务器,只需要更新局部页面而不需要刷新整个页面。
Ajax并不是全新技术,而是整合了Javascript,XML和CSS新的应用方式。
Ajax技术的核心组件是XMLHttpRequest,可以向服务器发送异步请求并获得响应文本。
使用DWR框架可以简化Ajax开发,通过在dwr.xml配置可以暴露Java类给JavaScript脚本。
通过http://appserver:8080/app/dwr/可以浏览并查看已经通过DWR发布的Java类列表以及页面实例代码。参考这些代码对编写我们自己的程序很有帮助。
asynchronous :异步的
synchronous :同步的
focus :焦点
direct :直接
remote :远程
initial :初始化
目标
10.1:Web 2.0
10.1.1:互联网前世今生
10.1.2:Web2.0的特点
10.2:Ajax
10.2.1:为什么使用Ajax
10.2.2:什么是Ajax
10.2.2:怎样使用Ajax
10.3:Ajax框架
小结:
目标
10.1:Web 2.0
10.1.1:互联网前世今生
黑暗年代:数据和信息不通过电子途径传播和共享的年代。
静态网页时代:互联网提供静态网页给人们浏览。
动态网页时代:动态网页技术的发展史人们可以在互联网上发布信息,数据库技术的发展使互联网开始指导人们的事务。
Web 2.0时代:更佳的用户体验和更高的参与程度(如果说互联网的出现是一次革命,那Web2.0的登场时另外一次革命)。
10.1.2:Web2.0的特点
1),用户贡献内容;2),内容聚合:RSS;3),更丰富的“用户体验”,新的交互方式。(RSS是将信息规范化的一个标准,最主要的应用在Blog[部落格]中)
用户体验的七个目标:有价值,实用,好用,悦人,可信,易寻找,可获取。用户体验:使用软件(或浏览网站)是,很容易地找到想要找的东西,轻松完成想完成的事,视觉效果很舒服,用完后心情好。
应用:Web2.0站点普遍使用了Ajax等技术,出现了Tag等很多新的交互方式,让用户使用软件的过程连贯,方便,自然。举例:Google页面输入框的自动补全功能;可以在自己页面中添加Tab页和“小窗口”通过RSS聚合内容;小窗口可以关闭,最下化和进行个性化设置......
10.2:Ajax
10.2.1:为什么使用Ajax
Ajax技术:通过JavaScript发送请求到服务器,并得到返回结果而只是刷新局部页面(做到“无刷新”)。
无刷新技术:只刷新页面的一小部分,而不用整个页面都刷新。优点:1,避免重复加载,浪费网络资源;2,提供连续的用户体验,不被页面刷新中断。例如:Chinaren首页上的登录功能,tudou网上单击其他按钮并不影响视屏的连续播放,Google地图提供的拖动,放大,缩小等类似桌面程序的用户体验.....
10.2.2:什么是Ajax
Ajax——Asynchronous(异步的),JavaScript And Xml.Ajax只是整合了几种现有的技术:JavaScript,XML和CSS。
解释:主要是JavaScript:通过Javascript的XMLHttpRequest对象完成发送请求道服务器并获得返回结果的任务,然后使用Javascript更新局部的网页。
异步指的是:Javascript发送请求后并不是一直等着服务器的响应,而是发送请求后继续做别的事,请求响应是异步完成的。
XML一般用于请求数据和响应数据的封装,CSS用于美化页面样式。
10.2.2:怎样使用Ajax
编写Ajax代码前先开发好服务器端程序。然后,使用Javascript的XMLHttpRequest发送请求得到结果。
创建XMLHttpRequest对象实例的代码:
function createXmlHttpRequest(){
if(window.ActiveXObject){//如果是IE浏览器
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){//非IE浏览器
return new XMLHttpRequest();
}
}
使用XmlHttpRequest对象分四个步骤:
代码:
var xmlHttpRequest;
function checkUserExists(OCt1){
var uname=oCt1.value;
if(!uname){//??
alert("用户名不能为空");
oCt1.focus();
return ;
}
//发送请求道服务器,判断用户名是否存在
//请求字符串
var url="?operate=doCheckUserExists&uname="+uname;
//1,创建XMLHttpRequest组件
xmlHttpRequest=createXmlHttpRequest();
//2,设置回调函数
xmlHttpRequest.onreadystatechange=haolejiaowo;
//3,初始化XMLHttpRequest组件
xmlHttpRequest.open("GET","url",true);
//4,发送请求
xmlHttpRequest.send(null);
}
function haolejiaowo(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
var b=xmlHttpRequest.responseText;
if(b=="true"){
alert("用户名已存在");
}else{
alert("用户名可以使用");
}
}
}
//
//
解释:
第2句代码:onreadystatechange是xmlHttpRequest对象的一个事件,haolejiaowo是一个JavaScript方法名。含义:在xmlHttpRequest对象的状态发生改变时调用haolejiaowo这个函数。
第3句代码:xmlHttpRequest对象的open方法用于初始化xmlHttpRequest对象,参数(请求发送的方式,请求的url,请求同异步否);true表示是异步的(在调用send方法发送请求后不用等请求响应继续执行后面的代码)。
每次xmlHttpRequest对象状态改变都会调用这个方法。
xmlHttpRequest对象有5种状态:0,未初始化;1,已初始化;2,发送请求;3,开始接受结果;4,接受结果完毕。故而,我们只处理状态readyState为4的情况。
xmlHttpRequest.status表示服务器响应的状态码:200,正常;404,not found(没找到资源);500,服务器出错。
只处理正常响应的情况,即xmlHttpRequest.status为200的情况。当xmlHttpRequest的readyState为4和status为200同时满足时,就可以从xmlHttpRequest.responseText中得到服务器响应的字符串了。
10.3:Ajax框架
Ajax框架简化编码,若使用DWR框架(http://getahead.org/dwr)需要先将Jar包导入项目,在web.xml中配置,并在/WEB-INF/下创建dwr.xml配置文件。
在web.xml中的配置:
<servlet>
<servlet-name>dwr</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
这样,不用在UserAction中添加方法,DWR可以将普通的类发布成Javascript可以调用的脚本对象。(直接创建UserManager类,提供check方法,用于检查用户名是否已存在)
配置dwr.xml:
主要是配置<create>节点,<create>节点有两个属性,creator属性设为new,表示通过new创建对象示例;javascript属性表示页面引用时的脚本对象名;子节点<param>,定义要发布的类别,name属性设为class,value属性设为要发布的类别名;子节点<include>定义暴露的方法。
<dw>
<allow>
<create creator="new" javascript="JUserChecker">
<param name="class" value="com.aptech.jb.biz.UserManager"/>
<include method="check"/>
</create>
</allow>
</dw>
启动服务器,浏览http://localhost:8080/zf10/dwr/,可以看到通过DWR发布的类的列表,单击链接可以打开对应的实例页面,查看并查看实例代码,
<script src='dwr/interface/JUserCheck.js'></script>
<script src='dwr/engine.js'></script>
<script src='dwr/util.js'></script>
function checkUserExists(oCt1){
var name=oCt1.value;
//发送请求到服务器,判断用户名是否存在
JUserchecker.check(uname,haolejiaowo);
}
function haolejiaowo(isExist){
......//同未用DWR框架时代码相同
}
解释:导入定义了JUserChecker脚本对象的dwr/interface/JUserChecker.js和dwr/engine.js,导入包括一些工具方法的dwr/util.js.
通过JUserChecker直接调用check方法,参数(对应原方法的参数,处理响应数据的的函数的函数名),而对于要调用的函数需要的参数,DWR会将Java类check方法执行的返回值传给它。
小结:
通过Ajax技术可以通过JavaScript发送请求到服务器,只需要更新局部页面而不需要刷新整个页面。
Ajax并不是全新技术,而是整合了Javascript,XML和CSS新的应用方式。
Ajax技术的核心组件是XMLHttpRequest,可以向服务器发送异步请求并获得响应文本。
使用DWR框架可以简化Ajax开发,通过在dwr.xml配置可以暴露Java类给JavaScript脚本。
通过http://appserver:8080/app/dwr/可以浏览并查看已经通过DWR发布的Java类列表以及页面实例代码。参考这些代码对编写我们自己的程序很有帮助。