志在指尖
用双手敲打未来

ajax实例(代码详解)

ajax实例

例1.1级联下拉列表。
(1)编写AjaxRequest.js文件,并将其保存到JS文件夹中。AjaxRequest.js的具体代码如下:
varnet=newObject();//定义一个全局变量net
//编写构造函数
net.AjaxRequest=function(url,onload,onerror,method,params){
this.req=null;
this.onload=onload;
this.onerror=(onerror)?onerror:this.defaultError;
this.loadDate(url,method,params);
}
//编写用于初始化XMLHttpRequest对象并指定处理函数,最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate=function(url,method,params){
if(!method){
method=”GET”;
}
if(window.XMLHttpRequest){
this.req=newXMLHttpRequest();
}elseif(window.ActiveXObject){
this.req=newActiveXObject(“Microsoft.XMLHTTP”);
}
if(this.req){
try{
varloader=this;
this.req.onreadystatechange=function(){
net.AjaxRequest.onReadyState.call(loader);
}
this.req.open(method,url,true);//建立对服务器的调用
if(method==”POST”){
this.req.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);//设置请求头
}
this.req.send(params);
}catch(err){
this.onerror.call(this);
}
}
}
//重构回调函数
net.AjaxRequest.onReadyState=function(){
varreq=this.req;
varready=req.readyState;
if(ready==4){
if(req.status==200){
this.onload.call(this);
}else{
this.onerror.call(this);
}
}
}
//重构默认的错误处理函数
net.AjaxRequest.prototype.defaultError=function(){
alert(“错误数据\n\n回调状态:”+this.req.readyState+”\n状态:”+this.req.status);
}
(2)编写index.jsp文件,并在该文件中包含AjaxRequest.js文件,具体代码如下:
<scriptlanguage=”javascript”src=”JS/AjaxRequest.js”></script>
(3)在index.jsp页面中编写错误处理的函数、实例化Ajax对象的方法和回调函数。在本例中,涉及两次异步操作,所以需要编写两个实例化Ajax对象的方法和回调函数。
编写实例化用于异步获取省份和直辖市的Ajax对象的方法和回调函数。具体代码如下:

ajax
functiongetProvince(){
varloader=newnet.AjaxRequest(“ZoneServlet?action=getProvince&nocache=”+newDate().getTime(),deal_getProvince,onerror,”GET”);
}
functiondeal_getProvince(){//通过循环将数组中的省份名称添加到下拉列表中
provinceArr=this.req.responseText.split(“,”);//将获取的省份名称字符串分割为数组
for(i=0;i<provinceArr.length;i++){
document.getElementById(“province”).options[i]=newOption(provinceArr[i],provinceArr[i]);
}
if(provinceArr[0]!=””){
getCity(provinceArr[0]);//获取市县
}
}
window.onload=function(){
getProvince();
}
编写实例化用于异步获取市县的Ajax对象的方法和回调函数,以及错误处理函数。具体代码如下:
functiongetCity(selProvince){
varloader=newnet.AjaxRequest(“ZoneServlet?action=getCity&parProvince=”+selProvince+”&nocache=”+newDate().getTime(),deal_getCity,onerror,”GET”);
}
functiondeal_getCity(){
cityArr=this.req.responseText.split(“,”);//将获取的市县名称字符串分割为数组
document.getElementById(“city”).length=0;//清空下拉列表
for(i=0;i<cityArr.length;i++){
document.getElementById(“city”).options[i]=newOption(cityArr[i],cityArr[i]);
}
}
functiononerror(){}//错误处理函数
(4)在页面中添加设置省份和直辖市的下拉列表,名称为province和设置市县的下拉列表,名称为city,并在省份和直辖市下拉列表的onchange事件中,调用getCity()方法获取省份对应的市县。具体代码如下:
<selectname=”province”id=”province”onchange=”getCity(this.value)”></select>
<selectname=”city”id=”city”></select>
(5)编写获取居住地的Servlet实现类ZoneServlet,在该Servlet中的doGet()方法中,编写以下代码用于根据传递的action参数,执行不同的处理方法。
复制代码
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
Stringaction=request.getParameter(“action”);//获取action参数的值
if(“getProvince”.equals(action)){//获取省份和直辖市信息
this.getProvince(request,response);
}elseif(“getCity”.equals(action)){//获取市县信息
this.getCity(request,response);
}
}
(6)在ZoneServlet中,编写getProvince()方法。在该方法中,将省份信息连接为一个以逗号分隔的字符串输出到页面上(本例比较简单实际当中应采用Map存放省份与市县信息)。具体代码如下:
/**
*获取省份和直辖市
*@paramrequest
*@paramresponse
*@throwsServletException
*@throwsIOException
*/
publicvoidgetProvince(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
response.setCharacterEncoding(“GBK”);
Stringresult=”吉林”;
response.setContentType(“text/html”);
PrintWriterout=response.getWriter();
out.print(result);//输出获取的省份字符串
out.flush();
out.close();
}
(7)在ZoneServlet中,编写个getCity()方法。在该方法中,中获取指定省份对应的市县信息,并将获取的是市县信息连接成一个以逗号分隔的字符串输出到页面上。具体代码如下:
/**
*获取市县
*@paramrequest
*@paramresponse
*@throwsServletException
*@throwsIOException
*/
publicvoidgetCity(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
response.setCharacterEncoding(“GBK”);
Stringresult=”长春,延边,白山,白城,四平,辽源”;
response.setContentType(“text/html”);
PrintWriterout=response.getWriter();
out.print(result);//输出获取的市县字符串
out.flush();
out.close();
}
(8)为了在页面载入后显示默认的省份,还需要在页面的onload事件中调用获取省份的方法getProvince()。具体代码如下:
window.onload=function(){
getProvince();//获取省份和直辖市
}
运行本实例index.jsp,结果如下所示:
2.显示进度条
文件上传是一个很费时的任务,经常需要用户进行长时间等待,为了让用户在等待的过程中,即使了解上传的进度,可以在进行文件上传时,显示上传进度条。下面将介绍如何实现带进度条的文件上传。
例2.1显示进度条。
(1)编写index.jsp页面,在该页面中添加用于获取上传文件所需信息的表单及表单元素。由于要实现文件上传,所以需要将表单的enctype属性设置为multipart/form-data。关键代码如下:
复制代码
<formname=”form1″enctype=”multipart/form-data”method=”post”action=”UpLoad?action=uploadFile”>
<divalign=”center”>
请选择要上传的文件:<inputtype=”file”name=”file”size=”42″><br>
<inputtype=”button”name=”shangchuan”value=”上传”width=”61″height=”23″onClick=”deal(form1)”>
<inputtype=”button”name=”chongzhi”value=”重置”width=”61″height=”23″onClick=”form1.reset();”>
</div>
</form>
(2)在index.jsp页面的合适位置添加用于显示进度条的<div>标记和显示百分比的<span>标记。具体代码如下:
<divid=”progressBar”class=”prog_border”align=”left”><imgsrc=”images/progressBar.png”width=”0″height=”13″
id=”imgProgress”>
</div>
?<spanid=”progressPercent”style=”width:40px;display:none”>0%</span>
(3)在CSS样式表文件style.css中,添加用于控制进度条样式的CSS样式。具体代码如下:
.prog_border{
height:15px;//高度
widht:255px;//宽度
background:#9ce0fd;//背景颜色
border:1pxsolid#FFFFFF;//边框样式
margin:0;
padding:0;
display:none;
position:relative
left:25px;
float:left;//居左对齐
}
(4)在index.jsp页面的<head>标记中,编写自定义的JavaScript函数deal(),用于提交表单并设置每隔500毫秒获取一次上传进度。deal()函数的具体代码如下:
<scripttype=”text/javascript”>
functiondeal(form){
form.submit();//提交表单
timer=window.setInterval(“getProgress()”,500);//每隔500毫秒获取一次上传进度
}
</script>
(5)编写上传文件的Servlet实现类UpLoad。在该Servlet中编写实现文件上传的方法uploadFile()。在uploadFile()方法中,将调用Common-FileUpload组件分段上传文件,并计算上传百分比,将其实时保存到Session中。
Apachecommons-fileupload的使用:
1)去http://commons.apache.org/fileupload/下载fileuploadjar包
同时下载commons-fileupload和commons-io两个包——–因为fileupload依赖io包
2)将jar包导入web工程WEB-INF/lib下
uploadFile()方法的具体代码如下:
packagecom.cn.Ajax;
importjava.io.File;
importjava.io.FileOutputStream;
importjava.io.IOException;
importjava.io.InputStream;
importjava.io.PrintWriter;
importjava.util.Iterator;
importjava.util.List;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjavax.servlet.http.HttpSession;
importorg.apache.commons.fileupload.FileItem;
importorg.apache.commons.fileupload.disk.DiskFileItemFactory;
importorg.apache.commons.fileupload.servlet.ServletFileUpload;
publicclassUpLoadextendsHttpServlet{
publicvoiduploadFile(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
response.setContentType(“text/html;charset=GBK”);
request.setCharacterEncoding(“GBK”);
HttpSessionsession=request.getSession();
session.setAttribute(“progressBar”,0);//定义上传进度的Session变量
Stringerror=””;
intmaxSize=50*1024*1024;//单个文件上传大小的上限
DiskFileItemFactoryfactory=newDiskFileItemFactory();//基于磁盘文件项目创建一个工厂对象
ServletFileUploadupload=newServletFileUpload(factory);//创建一个新的文件上传对象
try{
Listitems=upload.parseRequest(request);//解析上传请求
Iteratoritr=items.iterator();//枚举方法
while(itr.hasNext()){
FileItemitem=(FileItem)itr.next();//获取FileItem对象
if(!item.isFormField()){//判断是否为文件域
if(item.getName()!=null&&!item.getName().equals(“”)){//判断是否选择了文件
longupFileSize=item.getSize();//上传文件的大小
StringfileName=item.getName();//获取文件名
if(upFileSize>maxSize){
error=”您上传的文件太大,请选择不超过50MB的文件”;
break;
}
//此时文件暂存在服务器的内存中
FiletempFile=newFile(fileName);//构造临时对象
//获取根目录对应的真实物理路径
Filefile=newFile(request.getRealPath(“/upload”),tempFile.getName());
InputStreamis=item.getInputStream();
intbuffer=1024;
intlength=0;
byte[]b=newbyte[buffer];
doublepercent=0;
FileOutputStreamfos=newFileOutputStream(file);
while((length=is.read(b))!=-1){
percent+=length/(double)upFileSize*100D;//计算上传文件的百分比
fos.write(b,0,length);//向文件输出流写读取的数据
session.setAttribute(“progressBar”,Math.round(percent));//将上传百分比保存到Session中
}
fos.close();
Thread.sleep(1000);//线程休眠1秒
}else{
error=”没有选择上传文件!”;
}
}
}
}catch(Exceptione){
e.printStackTrace();
error=”上传文件出现错误:”+e.getMessage();
}
if(!””.equals(error)){
request.setAttribute(“error”,error);
request.getRequestDispatcher(“error.jsp”).forward(request,response);
}else{
request.setAttribute(“result”,”文件上传成功!”);
request.getRequestDispatcher(“upFile_deal.jsp”).forward(request,response);
}
}
}
(6)由于要使用Ajax,所以需要创建一个封装Ajax必须实现功能的对象AjaxRequest,并将其代码保存为AjaxRequest.js,
AjaxRequest.js
varnet=newObject();//定义一个全局变量net
//编写构造函数
net.AjaxRequest=function(url,onload,onerror,method,params){
this.req=null;
this.onload=onload;
this.onerror=(onerror)?onerror:this.defaultError;
this.loadDate(url,method,params);
}
//编写用于初始化XMLHttpRequest对象并指定处理函数,最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate=function(url,method,params){
if(!method){
method=”GET”;
}
if(window.XMLHttpRequest){
this.req=newXMLHttpRequest();
}elseif(window.ActiveXObject){
this.req=newActiveXObject(“Microsoft.XMLHTTP”);
}
if(this.req){
try{
varloader=this;
this.req.onreadystatechange=function(){
net.AjaxRequest.onReadyState.call(loader);
}
this.req.open(method,url,true);//建立对服务器的调用
if(method==”POST”){
this.req.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);//设置请求头
}
this.req.send(params);
}catch(err){
this.onerror.call(this);
}
}
}
//重构回调函数
net.AjaxRequest.onReadyState=function(){
varreq=this.req;
varready=req.readyState;
if(ready==4){
if(req.status==200){
this.onload.call(this);
}else{
this.onerror.call(this);
}
}
}
//重构默认的错误处理函数
net.AjaxRequest.prototype.defaultError=function(){
alert(“错误数据\n\n回调状态:”+this.req.readyState+”\n状态:”+this.req.status);
}
复制代码
然后在index.jsp页面中通过以下代码包含该文件:
<scriptlanguage=”javascript”src=”JS/AjaxRequest.js”></script>
说明:通常情况下,在处理POST请求时,需要将请求头设置为application/x-www-form-urlencoded。但是,如果将表单的enctype属性设置为multipart/form-data,在处理请求时,就需要将请求头设置为multipart/form-data。
(7)在index.jsp页面中,编写自定义的JavaScript函数getProgress(),用于实例化Ajax对象。getProgress()函数的具体代码如下:
functiongetProgress(){
varloader=newnet.AjaxRequest(“showProgress.jsp?nocache=”+newDate().getTime(),deal_p,onerror,”GET”);
}
在上面的代码中一定要加代码“?nocache=”+newDate().getTime()”,否则将出现进度不更新的情况。
(8)编写showProgress.jsp页面,在该页面中只需要应用EL表达式输出保存上传进度的Session变量。具体代码如下:
<%@pagelanguage=”java”contentType=”text/html;charset=GB18030″
pageEncoding=”GB18030″%>
${progressBar}
(9)编写Ajax的回调函数deal_p(),用于显示上传进度条及完成的百分比。deal_p()函数的具体代码如下:
functiondeal_p(){
varh=this.req.responseText;
h=h.replace(/\s/g,””);//去除字符串中的Unicode空白符
document.getElementById(“progressPercent”).style.display=””;//现实百分比
progressPercent.innerHTML=h+”%”;//显示完成的百分比
document.getElementById(“progressBar”).style.display=”block”;//显示进度条
document.getElementById(“imgProgress”).width=h*(255/100);//显示完成的进度
}
(10)编写Ajax的错误处理函数onerror(),在该函数中,添加弹出“出错了”提示对话框的代码。onerror()函数的具体代码如下:
functiononerror(){
alert(“上传文件出错!”);
}
(11)编写error.jsp和upFile_deal.jsp代码如下:
<%@pagelanguage=”java”contentType=”text/html;charset=GB18030″
pageEncoding=”GB18030″%>
<!DOCTYPEhtmlPUBLIC”-//W3C//DTDHTML4.01Transitional//EN””http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<metahttp-equiv=”Content-Type”content=”text/html;charset=GB18030″>
<title>Inserttitlehere</title>
</head>
<body>
${error}<br>
</body>
</html>
<%@pagelanguage=”java”contentType=”text/html;charset=GB18030″
pageEncoding=”GB18030″%>
<!DOCTYPEhtmlPUBLIC”-//W3C//DTDHTML4.01Transitional//EN””http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<metahttp-equiv=”Content-Type”content=”text/html;charset=GB18030″>
<title>Inserttitlehere</title>
</head>
<body>
${result}<br>
</body>
</html>
完整的index.jsp页面代码如下:
<%@pagelanguage=”java”contentType=”text/html;charset=GB18030″
pageEncoding=”GB18030″%>
<!DOCTYPEhtmlPUBLIC”-//W3C//DTDHTML4.01Transitional//EN””http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<metahttp-equiv=”Content-Type”content=”text/html;charset=GB18030″>
<title>Inserttitlehere</title>
<scripttype=”text/javascript”>
functiondeal(form){
form.submit();//提交表单
timer=window.setInterval(“getProgress()”,500);//每隔500毫秒获取一次上传进度
}
functiongetProgress(){
varloader=newnet.AjaxRequest(“showProgress.jsp?nocache=”+newDate().getTime(),deal_p,onerror,”GET”);
}
functiondeal_p(){
varh=this.req.responseText;
h=h.replace(/\s/g,””);//去除字符串中的Unicode空白符
document.getElementById(“progressPercent”).style.display=””;//现实百分比
progressPercent.innerHTML=h+”%”;//显示完成的百分比
document.getElementById(“progressBar”).style.display=”block”;//显示进度条
document.getElementById(“imgProgress”).width=h*(255/100);//显示完成的进度
}
functiononerror(){
alert(“上传文件出错!”);
}
</script>
</head>
<body>
<formname=”form1″enctype=”multipart/form-data”method=”post”action=”UpLoad”>
<divalign=”center”>
请选择要上传的文件:<br>
<inputtype=”file”name=”file”size=”42″><br>
注:文件大小请控制在50M以内。
</div>
<tablealign=”center”>
<tr>
<tdalign=”left”>
<divid=”progressBar”class=”prog_border”align=”left”><imgsrc=”images/progressBar.png”width=”0″height=”13″
id=”imgProgress”></div>
</td>
<td>
<spanid=”progressPercent”style=”width:40px;display:none”>0%</span>
</td>
</tr>
</table>
<divalign=”center”>
<inputtype=”button”name=”shangchuan”value=”上传”width=”61″height=”23″onClick=”deal(form1)”>
<inputtype=”button”name=”chongzhi”value=”重置”width=”61″height=”23″onClick=”form1.reset();”>
</div>
</form>
<scriptlanguage=”javascript”src=”JS/AjaxRequest.js”></script>
</body>
</html>

ajax实例代码详解

1.ajax是什么
ajax是一种在无需从头加载整个网页的情况下,能够更新部分网页的技术。
AJAX=AsynchronousJavaScriptandXML(异步的JavaScript和XML)。
传统的网页(不运用AJAX)假如需求更新内容,必需重载整个网页面。ajax经过在后台与服务器进行少量数据交换,这意味着能够在不从头加载整个网页的情况下,对网页的某部分进行更新。
2.基本运用
functionloadData(){
letxhr;
if(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}else{
xhr=newActiveXObject(“Microsoft.XMLHTTP”);
}
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
console.log(xhr.responseText);
}
}
xhr.open(“GET”,”http://127.0.0.1:3001/users”,true);
xhr.send();
}
3.对上边代码进行讲解
3.1创立XMLHttpRequest目标
一切现代浏览器(IE7+、Firefox、Chrome、Safari以及Opera)均内建XMLHttpRequest目标。创立XMLHttpRequest目标的语法:letxhr=newXMLHttpRequest();
老版别的InternetExplorer(IE5和IE6)运用ActiveX目标:letxhr=newActiveXObject(“Microsoft.XMLHTTP”);
所以为了应对一切的现代浏览器,包含IE5和IE6,应该检查浏览器是否支撑XMLHttpRequest目标。假如支撑,则创立XMLHttpRequest目标。假如不支撑,则创立ActiveXObject:
letxhr;
if(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}else{
xhr=newActiveXObject(“Microsoft.XMLHTTP”);
}
3.2向服务器发送恳求
xhr.open(“GET”,”http://127.0.0.1:3001/users”,true);
xhr.send();
1
2
(1)open(method,url,async)办法规定恳求的类型、URL以及是否异步处理恳求。
method:恳求的类型;GET或POST
url:要访问的服务器上的位置
async:true(异步)或false(同步),默认为true,这个参数能够不写
(2)send(string)将恳求发送到服务器
参数string:仅用于POST恳求
3.3接纳服务器的呼应
如需取得来自服务器的呼应,请运用XMLHttpRequest目标的responseText或responseXML属性。
responseText:取得字符串方法的呼应数据
responseXML:取得XML方法的呼应数据
3.4onreadystatechange事情
当恳求被发送到服务器时,咱们需求执行一些根据呼应的任务。每当readyState改动时,就会触发onreadystatechange事情。readyState属性存有XMLHttpRequest的状况信息。
(1)onreadystatechange:每当readyState属性改动时,就会调用该函数。
(2)readyState:存有XMLHttpRequest的状况。从0到4发生变化。
0:恳求未初始化
1:服务器连接已建立
2:恳求已接纳
3:恳求处理中
4:恳求已完结,且呼应已安排妥当
(3)status
200:“OK”
404:未找到页面
(4)在onreadystatechange事情中,咱们规定当服务器呼应已做好被处理的准备时所执行的任务。当readyState等于4且状况为200时,表示呼应已安排妥当。
留意:onreadystatechange事情被触发4次(0-4),分别是:0-1、1-2、2-3、3-4,对应着readyState的每个变化。
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
console.log(xhr.responseText);
}
}
4.其它方法
//第一个参数是恳求路径,第二个参数是一个函数,当拿到数据后调用该函数
functionget(url,callback){
letxhr=newXMLHttpRequest();
//当恳求加载成功之后要调用该函数
xhr.onload=function(){
callback(xhr.responseText);
}
xhr.open(‘get’,url)
xhr.send();
}
get(‘http://localhost:3001/users’,function(data){
console.log(data);
});
4.1扩展
咱们能够把上边那段代码改写成支撑Promise的方法,这样就能够进行链式调用
functionget(url){
returnnewPromise(function(resolve,reject){
letxhr=newXMLHttpRequest();
xhr.onload=function(){
//运用JSON.parse()将拿到的数据转成JS目标
resolve(JSON.parse(xhr.responseText));
}
xhr.open(‘get’,url)
xhr.send();
})
}
11
链式调用:
letdata={};
get(‘http://localhost:3001/users’)
.then(function(userData){
data.user=userData;
returnget(‘http://localhost:3001/jobs’)
})
.then(function(jobsData){
data.jobs=jobsData;
console.log(data);
})
5.传递参数
get恳求传递参数,将参数放在url中,多个参数经过&连接。
post恳求传递参数,将字符串类型的参数数据放在send()办法中,并设置Content-type类型(post恳求有必要在恳求报文中明确设置恳求的类型)。

未经允许不得转载:IT技术网站 » ajax实例(代码详解)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

志在指尖 用双手敲打未来

登录/注册IT技术大全

热门IT技术

C#基础入门   SQL server数据库   系统SEO学习教程   WordPress小技巧   WordPress插件   脚本与源码下载