Ajax技术解析.docx
《Ajax技术解析.docx》由会员分享，可在线阅读，更多相关《Ajax技术解析.docx（14页珍藏版）》请在冰豆网上搜索。
Ajax技术解析
初识Ajax
随着B/S开发模式的日渐推广,这种开发模式的一些缺陷开始展现出来,其中最为人诟病的是B/S结构中客户端的交互能力差,主要体现在两个方面:
A.浏览器每次向服务器端提交请求时都要刷新页面,在网速比较慢的情况下往往让使用者感到使用不连贯,每一步操作都需要等待一段时间.
B.浏览器无法实时的获取服务器端的数据,要获取最新的数据只有通过不断的刷新页面这种方式,既浪费网络资源效率也不高。
//创建异步刷新的核心对象,代理对象
varxmlHttp;
functioncreateXMLHttpRequest（）{
xmlHttp=newXMLHttpRequest（）;
}
functioncheckLogin（name）{
createXMLHttpRequest（）;
xmlHttp.open（"get","AjaxLogin?
name="+name,true）;//true异步验证,false代表同步
//alert（name）;
xmlHttp.send（）;//发出请求
}
publicvoiddoPost（HttpServletRequestrequest,HttpServletResponseresponse）throwsServletException,IOException{
response.setContentType（"text/html"）;
PrintWriterout=response.getWriter（）;
try{
//休眠
Thread.sleep（3000）;
}catch（InterruptedExceptione）{
//TODOAuto-generatedcatchblock
e.printStackTrace（）;
}
Stringname=request.getParameter（"name"）;
System.out.println（"*********"+name）;
out.print（"大连大喜"）;
}
//get请求的方式传递参数需要拼接字符串,发送请求用xmlHttp.send（null）;//null可写可不写
//post请求的传递参数,需要先设置请求头信息:
如下所示
//post请求要添加请求头信息
xmlHttp.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）;
发送请求//
xmlHttp.send（"name="+name）;
javascipt代码如下所示:
//创建异步刷新的核心对象,代理对象
varxmlHttp;
functioncreateXMLHttpRequest（）{
xmlHttp=newXMLHttpRequest（）;
}
functioncheckLogin（name）{
createXMLHttpRequest（）;
xmlHttp.open（"get","AjaxLogin1",true）;//true异步验证
//post请求要添加请求头信息xmlHttp.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）;
//alert（name）;
xmlHttp.send（"name="+name）;
}
A:
使用open方法设置请求内容
E:
获取响应的数据
D:
反馈服务器状态,多次
C:
发出请求
B:
设置回调函数
//创建异步刷新的核心对象,代理对象
varxmlHttp;
functioncreateXMLHttpRequest（）{
xmlHttp=newXMLHttpRequest（）;
}
functioncheckLogin（name）{
createXMLHttpRequest（）;
xmlHttp.open（"get","AjaxLogin1",true）;//true异步验证
//post请求要添加请求头信息
xmlHttp.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）;
//指定回调函数的名字,函数后不能加括号,否则会立即执行
xmlHttp.onreadystatechange=callBack;
xmlHttp.send（"name="+name）;
}
//回调函数
functioncallBack（）{
alert（"回调函数"）;
}
再次执行会发现回调函数执行了4次,弹出了四次对话框.可以通过XMLHttpRequest对象的readyState属性获取当前服务器的影响状态,在callBack函数中增加一行alert（xmlHttp.readyState）;
1
已经初始化
2
发送请求
3
回应数据传输中
4
回应完毕
//回调函数
functioncallBack（）{
//alert（"回调函数"+xmlHttp.readyState）;
if（xmlHttp.readyState==4）{
//获取服务器端返回的数据
vartext=xmlHttp.responseText;
//将数据写入到标签中
document.getElementById（"myspan"）.innerHTML=text;
}
}
●GET请求被缓存的现象
1.因为网络传输速度较慢,为了提高浏览网页的速率,浏览器会保存曾经浏览过的内容,如果用户请求曾经访问过的页面,浏览器就会判断是否可以使用缓存中的内容,如果可以使用就不会再次向服务器发送请求,而直接使用缓存中的内容.
2.对POST请求一般不使用缓存
3.对GET请求根据判断地址是否一致判断是否使用缓存
4.如果地址一致,还要继续判断该页面是否指定了缓存规则,如果没有制定则使用缓存,如果指定了按照制定规则执行.
●浏览器的缓存规则虽然能提高效率,但对于动态页面来说,可能会让用户无法获取最小的内容,要避免GET请求的缓存,有一些两种途径:
5.让每次请求的地址不一样
6.另一种方式:
在服务器端添加回应头（ResponseHeader）内容,这么不使用缓存
Servlet中设置如下代码:
reayState与status的区别
两者区别很大,reayState用来表示请求与响应的进行状态,我们主要用它来判断服务器是否完成了响应,但不能用它来判断在进行处理的时候是否遇到了错误.只有当reayState的值为4时才能读取status（返回服务器响应状态码）属性,根据他可以判断服务器是否正确处理了Ajax请求
利用XML实现省市级联的效果:
XML文件如下:
xmlversion="1.0"encoding="UTF-8"?
>
河南省
郑州市
许昌市
漯河市
开封市
河北省
保定市
邯郸市
邢台市
廊坊市
湖北省
武汉市
孝感市
黄冈市
页面实现代码:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%
Stringpath=request.getContextPath（）;
StringbasePath=request.getScheme（）+":
//"+request.getServerName（）+":
"+request.getServerPort（）+path+"/";
%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
">
MyJSP'select.jsp'startingpage
--
-->
varxmlHttp;
functioncreateXMLHttpRequest（）{
xmlHttp=newXMLHttpRequest（）;//创建核心对象
}
functiongetCity（value）{
createXMLHttpRequest（）;
//alert（value）;
xmlHttp.open（"get","<%=path%>/xml/select.xml",true）;
//执行回调函数
xmlHttp.onreadystatechange=function（）{
//通过匿名函数中调用callBack方法,传入参数
callBack（value）;
};
xmlHttp.send（null）;
}
functioncallBack（value）{
//alert（xmlHttp.responseXML）;
//alert（value）;
if（xmlHttp.readyState==4）{//响应完毕
if（xmlHttp.status==200）{//HTTP协议正常
//得到城市下拉类别对象
varcitySel=document.getElementById（"selCity"）;
citySel.options.length=1;
//得到文档树对象
vardoc=xmlHttp.responseXML;
//得到根元素
varroot=doc.documentElement;
varprosList=root.getElementsByTagName（"province"）;
for（vari=0;i//得到具体的省份
varprovince=prosList.item（i）;
varprovinceName=province.getElementsByTagName（"name"）;
for（varj=0;j//获得所有省份的名称
varproName=provinceName[j].firstChild.nodeValue;
//alert（proName）;
if（proName==value）{//如果选择的省份和XML中的相同,则得到对应得所有城市
varcitys=province.getElementsByTagName（"city"）;
for（vark=0;kselCity.add（newOption（citys[k].firstChild.nodeValue,citys[k].firstChild.nodeValue）,null）;
}
}
}
}
}
}
}
河南省
河北省
湖北省
（已过时）Ajax框架技术DWR（DirectWebRemoting）
DWR可以轻松的实现JavaScript和Java程序的交互及Java与JavaScript程序的交互（逆向AJAX）
DWR框架由两大部分组成
.1.运行在服务器端的Servlet,用来处理客户端请求并返回数据
2.运行在客户端的JavaScript,用来发送Ajax请求并更新页面
DWR可以根据需要用的Java类动态生成JavaScript函数,开发者可以像调用本地JavaScript方法一样调用Java方法,甚至能像使用本地JavaScript对象一样使用Java对象
配置DWR:
1.首先引入Jar包
2.配置Web.xml文件,添加如下内容
dwr
org.directwebremoting.servlet.DwrServlet
debug
true
dwr
/dwr/*
3.把dwr.xml拷贝到web-inf文件夹下
创建一个Java类文件
在DWR.XML中配置Java类
--new:
每次请求都会创建对象javascript:
客户端的名称class:
java类value:
类的路径-->
升级会员 