Ajax技术解析.docx
- 文档编号:24223566
- 上传时间:2023-05-25
- 格式:DOCX
- 页数:14
- 大小:248.66KB
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">
--
-->
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;k selCity.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文件,添加如下内容 3.把dwr.xml拷贝到web-inf文件夹下 创建一个Java类文件 在DWR.XML中配置Java类 --new: 每次请求都会创建对象javascript: 客户端的名称class: java类value: 类的路径-->
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Ajax 技术 解析
![提示](https://static.bdocx.com/images/bang_tan.gif)