日期:2014-05-16  浏览次数:20732 次

十:使用Ajax改进用户体验
十:使用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>