Ajax常用实例

摘录自：http://www.cnblogs.com/gaopeng527/p/4459622.html

1. 级联下拉列表

例1.1 级联下拉列表。

（1）编写AjaxRequest.js文件，并将其保存到JS文件夹中。AjaxRequest.js的具体代码如下：

var net = new Object();  //定义一个全局变量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=new XMLHttpRequest();
    }else if(window.ActiveXObject){
        this.req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(this.req){
        try{
            var loader = 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(){
    var req=this.req;
    var ready=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文件，具体代码如下：

<script language="javascript" src="JS/AjaxRequest.js"></script>

（3）在index.jsp页面中编写错误处理的函数、实例化Ajax对象的方法和回调函数。在本例中，涉及两次异步操作，所以需要编写两个实例化Ajax对象的方法和回调函数。

编写实例化用于异步获取省份和直辖市的Ajax对象的方法和回调函数。具体代码如下：

function getProvince(){
        var loader=new net.AjaxRequest("ZoneServlet?action=getProvince&nocache="+new Date().getTime(), deal_getProvince, onerror, "GET");
    }
    function deal_getProvince(){  //通过循环将数组中的省份名称添加到下拉列表中
        provinceArr=this.req.responseText.split("，");  //将获取的省份名称字符串分割为数组
        for(i=0;i<provinceArr.length;i++){
            document.getElementById("province").options[i]=new Option(provinceArr[i],provinceArr[i]);
        }
        if(provinceArr[0]!=""){
            getCity(provinceArr[0]);  //获取市县
        }
    }
    window.onload=function(){
        getProvince();
    }

编写实例化用于异步获取市县的Ajax对象的方法和回调函数，以及错误处理函数。具体代码如下：

function getCity(selProvince){
        var loader=new net.AjaxRequest("ZoneServlet?action=getCity&parProvince="+selProvince+"&nocache="+new Date().getTime(), deal_getCity, onerror, "GET");
    }
    function deal_getCity(){
        cityArr=this.req.responseText.split("，");  //将获取的市县名称字符串分割为数组
        document.getElementById("city").length=0;  //清空下拉列表
        for(i=0;i<cityArr.length;i++){
            document.getElementById("city").options[i]=new Option(cityArr[i],cityArr[i]);
        }
    }
    function onerror(){} //错误处理函数

(4) 在页面中添加设置省份和直辖市的下拉列表，名称为province和设置市县的下拉列表，名称为city，并在省份和直辖市下拉列表的onchange事件中，调用getCity()方法获取省份对应的市县。具体代码如下：

<select name="province" id="province" onchange="getCity(this.value)"></select>
<select name="city" id="city"></select>

（5）编写获取居住地的Servlet实现类ZoneServlet，在该Servlet中的doGet()方法中，编写以下代码用于根据传递的action参数，执行不同的处理方法。

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        String action = request.getParameter("action"); //获取action参数的值
        if("getProvince".equals(action)){    //获取省份和直辖市信息
            this.getProvince(request,response);
        }else if("getCity".equals(action)){  //获取市县信息
            this.getCity(request,response);
        }
    }

（6）在ZoneServlet中，编写getProvince()方法。在该方法中，将省份信息连接为一个以逗号分隔的字符串输出到页面上（本例比较简单实际当中应采用Map存放省份与市县信息）。具体代码如下：

    /**
     * 获取省份和直辖市
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void getProvince(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException  {
        response.setCharacterEncoding("GBK");
        String result="吉林";
        response.setContentType("text/html");
        PrintWriter out=response.getWriter();
        out.print(result);   //输出获取的省份字符串
        out.flush();
        out.close();
    }

（7）在ZoneServlet中，编写个getCity()方法。在该方法中，中获取指定省份对应的市县信息，并将获取的是市县信息连接成一个以逗号分隔的字符串输出到页面上。具体代码如下：

    /**
     * 获取市县
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void getCity(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException  {
        response.setCharacterEncoding("GBK");
        String result="长春，延边，白山，白城，四平，辽源";
        response.setContentType("text/html");
        PrintWriter out=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。关键代码如下：

<form name="form1" enctype="multipart/form-data" method="post" action="UpLoad?action=uploadFile">
    <div align="center">
        请选择要上传的文件：<input type="file" name="file" size="42"><br>
        <input type="button" name="shangchuan" value="上传" width="61" height="23" onClick="deal(form1)">
        <input type="button" name="chongzhi" value="重置" width="61" height="23" onClick="form1.reset();">
    </div>
</form>

（2）在index.jsp页面的合适位置添加用于显示进度条的<div>标记和显示百分比的<span>标记。具体代码如下：

    <div id="progressBar" class="prog_border" align="left"><img src="images/progressBar.png" width="0" height="13"
    id="imgProgress">
    </div>
    ?<span id="progressPercent" style="width:40px;display:none">0%</span>

（3）在CSS样式表文件style.css中，添加用于控制进度条样式的CSS样式。具体代码如下：

.prog_border{
    height:15px; //高度
    widht:255px; //宽度
    background:#9ce0fd;  //背景颜色
    border:1px solid #FFFFFF; //边框样式
    margin:0;
    padding:0;
    display:none;
    position:relative
    left:25px;
    float:left;     //居左对齐
}

（4）在index.jsp页面的<head>标记中，编写自定义的JavaScript函数deal()，用于提交表单并设置每隔500毫秒获取一次上传进度。deal()函数的具体代码如下：

<script type="text/javascript">
        function deal(form){
            form.submit();   //提交表单
            timer=window.setInterval("getProgress()", 500);  //每隔500毫秒获取一次上传进度
        }</script>

（5）编写上传文件的Servlet实现类UpLoad。在该Servlet中编写实现文件上传的方法uploadFile()。在uploadFile()方法中，将调用Common-FileUpload组件分段上传文件，并计算上传百分比，将其实时保存到Session中。

Apache commons-fileupload 的使用： 
 1) 去 http://commons.apache.org/fileupload/ 下载fileupload jar包 
 同时下载 commons-fileupload 和  commons-io 两个包  -------- 因为fileupload依赖io包 
 2) 将jar包导入 web 工程WEB-INF/lib下

uploadFile()方法的具体代码如下：

package com.cn.Ajax;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class UpLoad extends HttpServlet {

    public void uploadFile(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=GBK");
        request.setCharacterEncoding("GBK");
        HttpSession session=request.getSession();
        session.setAttribute("progressBar", 0);  //定义上传进度的Session变量
        String error = "";
        int maxSize = 50*1024*1024;   //单个文件上传大小的上限
        DiskFileItemFactory factory = new DiskFileItemFactory();  //基于磁盘文件项目创建一个工厂对象
        ServletFileUpload upload = new ServletFileUpload(factory); //创建一个新的文件上传对象
        try {
            List items = upload.parseRequest(request);  //解析上传请求
            Iterator itr = items.iterator();  //枚举方法
            while(itr.hasNext()){
                FileItem item =(FileItem) itr.next();  //获取FileItem对象
                if(!item.isFormField()){    //判断是否为文件域
                    if(item.getName()!=null&&!item.getName().equals("")){  //判断是否选择了文件
                        long upFileSize = item.getSize(); //上传文件的大小
                        String fileName = item.getName();  //获取文件名
                        if(upFileSize>maxSize){
                            error="您上传的文件太大，请选择不超过50MB的文件";
                            break;
                        }
                        //此时文件暂存在服务器的内存中
                        File tempFile = new File(fileName); //构造临时对象
                        //获取根目录对应的真实物理路径
                        File file = new File(request.getRealPath("/upload"),tempFile.getName());
                        InputStream is = item.getInputStream();
                        int buffer=1024;
                        int length =0;
                        byte[] b=new byte[buffer];
                        double percent=0;
                        FileOutputStream fos = new FileOutputStream(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 (Exception e) {
            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

var net = new Object();  //定义一个全局变量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=new XMLHttpRequest();
    }else if(window.ActiveXObject){
        this.req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(this.req){
        try{
            var loader = 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(){
    var req=this.req;
    var ready=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页面中通过以下代码包含该文件：

    <script language="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()函数的具体代码如下：

function getProgress(){
            var loader=new net.AjaxRequest("showProgress.jsp?nocache="+new Date().getTime(), deal_p, onerror, "GET");
        }

在上面的代码中一定要加代码“?nocache="+new Date().getTime()”，否则将出现进度不更新的情况。

（8）编写showProgress.jsp页面，在该页面中只需要应用EL表达式输出保存上传进度的Session变量。具体代码如下：

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
${progressBar}

（9）编写Ajax的回调函数deal_p()，用于显示上传进度条及完成的百分比。deal_p()函数的具体代码如下：

        function deal_p(){
            var h=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()函数的具体代码如下：

function onerror(){
            alert("上传文件出错！");
}

（11）编写error.jsp和upFile_deal.jsp代码如下：

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
    ${error}<br>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
    ${result}<br>
</body>
</html>

完整的index.jsp页面代码如下：

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
    <script type="text/javascript">
        function deal(form){
            form.submit();   //提交表单
            timer=window.setInterval("getProgress()", 500);  //每隔500毫秒获取一次上传进度
        }

        function getProgress(){
            var loader=new net.AjaxRequest("showProgress.jsp?nocache="+new Date().getTime(), deal_p, onerror, "GET");
        }

        function deal_p(){
            var h=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); //显示完成的进度
        }

        function onerror(){
            alert("上传文件出错！");
        }
    </script>
</head>
<body>

    <form name="form1" enctype="multipart/form-data" method="post" action="UpLoad">
    <div align="center">
        请选择要上传的文件：<br>
        <input type="file" name="file" size="42"><br>
            注：文件大小请控制在50M以内。
    </div>
    <table align="center">
        <tr>
            <td align="left">
                <div id="progressBar" class="prog_border" align="left"><img src="images/progressBar.png" width="0" height="13"
                id="imgProgress"></div>
            </td>
            <td>
                <span id="progressPercent" style="width:40px;display:none">0%</span>
            </td>
        </tr>
    </table>
    <div align="center">
        <input type="button" name="shangchuan" value="上传" width="61" height="23" onClick="deal(form1)">
        <input type="button" name="chongzhi" value="重置" width="61" height="23" onClick="form1.reset();">
    </div>
    </form>

    <script language="javascript" src="JS/AjaxRequest.js"></script>
</body>
</html>

运行结果如下图所示：

时间： 2024-10-24 12:51:42

Ajax常用实例的相关文章

ajax常用实例代码总结参考

http的交互方法有四种:get.post.put(增加数据).delete(删除数据) put和delete实现用的是get和post get方式 页面不能被修改,只是获取查询信息.但是提交的数据会通过链接暴露在外,使用get请求会被人拿到登陆的用户名和密码,url长度有限制 post方式 页面可以修改,比如回帖.评论.但是提交的数据不会暴露在外,url长度无限制,但是提交大小会有限制 默认不被缓存,不在同一个请求域下远程请求,post都会被转为get 推荐两篇不错的jquery教程:<jQu

SharePoint 2013 Odata 常用实例和基本操作

SharePoint2013Odata常用实例基本操作 本文讲述SharePoint 2013 Odata 常用实例和基本操作. Open Data Protocol (OData)是一个基于Rest风格的数据服务,同过这个服务可以使用同一的URI定位到具体的资源(文件和记录等),从而使得这些资源可以使用HTTP请求进行增删改查,它定义了一系列的规则,使得资源更容易被定位和操作. 首先看一下OData定义的URI结构: 那么相对SharePoint 2013,一个简单的实例为: http://m

Ajax-04 jQuery Ajax 常用操作

jQuery jQuery 其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能. jQuery Ajax a.概述 jQuery 不是生产者,而是大自然的搬运工 jQuery Ajax 本质是 XMLHttpRequest 或 ActiveXObject b.使用 --- 下载导入jQuery(2.+ 版本不再支持IE9以下的浏览器) jQuery Ajax常用操作 jQuery.ajax( url [, settings ]

Jquery工作常用实例--ajaxStart与ajaxStop(ajaxComplete)

Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函数,这个函数将在事件发生时被调用. 使用这些方法的每一步是获取一个页面元素的引用.然后就可以在这个元素上调用ajaxStart()和ajaxStop()方法. 使用语法: ("#loading").ajaxStart(function(){  $(this).show(); //callb

Ajax 使用实例

在介绍实例之前,先就AJAX的几种便捷形式作出说明. Ajax传输Data时有四种常用的数据类型,分别是html文档.Json数据.js文件和Xml文档,四种数据类型对应着如下方法: 数据形式 方法 适用情况 HTML 形式 $().load(a,b)   适用于对数据没什么操作的情况,如简单的文本拼接等 Json 形式 $.getJSON(a,b) 特点是格式清晰,数据较少,但对结构要求很精确,人工编写时要特别注意.适用于数据需要重用的情况,能在性能上得到显著提高. JS 形式 $.getSc

编写自己的代码库（javascript常用实例的实现与封装）

编写自己的代码库(javascript常用实例的实现与封装) 1.前言 大家在开发的时候应该知道,有很多常见的实例操作.比如数组去重,关键词高亮,打乱数组等.这些操作,代码一般不会很多,实现的逻辑也不会很难,下面的代码,我解释就不解释太多了,打上注释,相信大家就会懂了.但是,用的地方会比较,如果项目有哪个地方需要用,如果重复写的话,就是代码沉余,开发效率也不用,复用基本就是复制粘贴!这样是一个很不好的习惯,大家可以考虑一下把一些常见的操作封装成函数,调用的时候,直接调用就好!源码都放在githu

【转】 Android常用实例—Alert Dialog的使用

Android常用实例-Alert Dialog的使用 AlertDialog的使用很普遍,在应用中当你想要用户做出"是"或"否"或者其它各式各样的选择时,为了保持在同样的Activity和不改变用户屏幕,就可以使用AlertDialog. 代码地址 https://github.com/JueYingCoder/AndroidUsefulExample_AlertDialog 这篇文章主要讲解如何实现各种AlertDialog,文章比较长,如果能认真读完,Aler

简单的Ajax应用实例

从网页前端输入提示范围内的字符,然后显示从后台返回的结果 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript"> function showHint(str) { var xmlhttp; if (str.length==0) {

ajax 基础实例

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 优点:使用ajax读取数据文件,不需要刷新页面就能取出文件数据<br><br><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition