21 工作室 - ajax+json

Ajax + Servlet 实现上传文件进度条显示

lianxiangpanjin@163.com(admin) — Wed,10 Dec 2008 19:00:22 +0800

用到了commons-fileupload-1.1.jar和commons-io-1.2.jar两个包
客户端文件upload.jsp
<%@ page language="java" pageEncoding="GBK"%>


        My JSP 'upload.jsp' starting page

    var xmlHttp ;
    function createXMLHttp(){
        if(window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else{
            xmlHttp = new XMLHttpRequest() ;
        }
    }

    function ajaxSend(){
        createXMLHttp() ;
        var content = "status" ;
        var url ="upload?status="+content ;
        xmlHttp.onreadystatechange = handler ;
        xmlHttp.open("POST",url,true) ;
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlHttp.send(url) ;
    }
    function handler(){
    　if(xmlHttp.readyState == 4)    　{
    　　if(xmlHttp.status == 200)    　　{
            var percent = xmlHttp.responseText ;
            var com = document.getElementById("com") ;
            var last = document.getElementById("last") ;
            var p = document.getElementById("percent") ;
            com.setAttribute("width",percent+"%") ;
            last.setAttribute("width",(100-percent)+"%") ;
            if(percent < 99){
                p.innerHTML="已经完成："+percent+"%" ;
                setTimeout("ajaxSend()",100) ;
            }
            else{
                p.innerHTML="已经全部上传！" ;
            }
    　　}
    　}
    　return true;
    }

    function mySubmit(form){
        form.action="upload" ;
        form.submit() ;
        ajaxSend()
    }




                    target="target_upload">




























Servlet文件MyUpload.java
package zbq.upload;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
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 org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class MyUpload extends HttpServlet {

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("GBK");
        response.setContentType("text; charset=ISO-8859-1");
        if ("status".equalsIgnoreCase(request.getParameter("status"))) {
            status(response);
        } else {
            totalSize = request.getContentLength();
            response.sendRedirect("upload.jsp");
            try {
                upload(request);
            } catch (FileUploadException e) {
                e.printStackTrace();
            }
        }
    }

    private void upload(HttpServletRequest request) throws IOException,
            FileUploadException {

        FileItemFactory factory = new DiskFileItemFactory();
        // 通过该工厂对象创建ServletFileUpload对象
        ServletFileUpload upload = new ServletFileUpload(factory);
        List items = upload.parseRequest(request);
        for (Iterator i = items.iterator(); i.hasNext();) {
            FileItem fileItem = (FileItem) i.next();
            // 如果该FileItem不是表单域
            if (!fileItem.isFormField()) {
                String fileName = fileItem.getName().substring(
                        fileItem.getName().lastIndexOf("\\") + 1);
                File file = new File("C:\\", fileName);
                InputStream in = fileItem.getInputStream();
                FileOutputStream out = new FileOutputStream(file);
                byte[] buffer = new byte[1024]; // To hold file contents
                int n;
                while ((n = in.read(buffer)) != -1) {
                    out.write(buffer, 0, n);
                    completedSize += (long) n;
                }
                fileItem.delete();// 内存中删除该数据流
            }
        }
    }

    private void status(HttpServletResponse response) throws IOException {
        long lastSeconds = (System.currentTimeMillis() - startTime) / 1024;
        int percent = (int) (completedSize * 100 / (totalSize + 0.0001));
        response.getWriter().print(percent);
    }

    private long totalSize = 0L;
    private long completedSize = 0L;
    private long startTime = System.currentTimeMillis();
}
WEB.xml就不用写了吧。
但是在Struts2里边我还很迷糊，它把上传功能给封装了，好是好用，但是不好做上传进度条了。希望能抛砖引玉，各位高手能否做个struts2+ajax实现这个功能

'引用自http://hi.baidu.com/zhaobq27/blog/item/2b5e9895f1b23e49d0135e05.html

层的隐藏

lianxiangpanjin@163.com(admin) — Mon,23 Jun 2008 23:16:28 +0800

示例一:

这里放你要放的信息就可以

示例二:

这里放你要放的信息就可以

示例三:
太平洋留言回复示例

JSON

lianxiangpanjin@163.com(admin) — Sun,08 Jun 2008 14:48:14 +0800

Ajax(Asynchronous JavaScript and XML)说到底就是一种浏览器异步读取服务器上XML内容的技术。现在的技术凡是跟XML扯上关系，再加上个概念做幌子，就像金装了一样，拽得不行。门外的人看得很是热闹，门里的人摇摇头不外如是。XML呢，跨平台的新潮语言？其实XML＝TXT。
XML只是符合很多规范的文本。它本身什么都不是，只是保存字符的文件。而浏览器异步读取的只是服务器上的文本内容，所以在Ajax开发时完全不必拘泥于XML。[版权所有，www.jialing.net]

　　JSON的来历

　　XML 的作用是格式化数据内容。如果我们不用XML还有什么更好的方法吗？这个答案是JSON。介绍JSON之前我先介绍一下JavaScript这门脚本语言。脚本语言自身有动态执行的天赋。即我们可以把想要执行的语句放在字符串里，通过eval()这个动态执行函数来执行。字符串里的内容会像我们写的脚本一样被执行。

　　示例1：

＜HTML＞
＜HEAD＞
　＜TITLE＞eval example 1＜/TITLE＞
＜/HEAD＞
＜BODY＞
　＜script＞
　　str = "alert('hello')";
　　eval(str);
　＜/script＞
＜/BODY＞
＜/HTML＞

　　打开页面会弹出hello窗口。

　　我们可以在字符串中放任何脚本语句，包括声明语句：

＜HTML＞
＜HEAD＞
＜TITLE＞eval example 2＜/TITLE＞
＜/HEAD＞
＜BODY＞
＜script＞
　define = "{name:'Michael',email:'17bity@gmail.com'}";
　eval("data = "+define);
　alert("name:"+data.name);
　alert("email:"+data.email);
＜/script＞
＜/BODY＞
＜/HTML＞

　　如果我们在后台异步传来的文本是JavaScript的声明语句，那么不是一条eval方法就能解析了？对于解析复杂的XML，这样的效率是多么大的提高啊！

　　现在就来告诉你什么是JSON：JavaScript Object Notation。我更愿意把它翻译为JavaScript对象声明。比如要从后台载入一些通讯录的信息，如果写成XML，如下：

＜contact＞
　＜friend＞
　　＜name＞Michael＜/name＞
　　＜email＞17bity@gmail.com＜/email＞
　　＜homepage＞http://www.jialing.net＜/homepage＞
　＜/friend＞
　＜friend＞
　　＜name＞John＜/name＞
　　＜email＞john@gmail.com＜/email＞
　　＜homepage＞http://www.john.com＜/homepage＞
　＜/friend＞
　＜friend＞
　　＜name＞Peggy＜/name＞
　　＜email＞peggy@gmail.com＜/email＞
　　＜homepage＞http://www.peggy.com＜/homepage＞
　＜/friend＞
＜/contact＞

　　而写成JSON呢：

[
{
　name:"Michael",
　email:"17bity@gmail.com",
　homepage:"http://www.jialing.net"
},
{
　name:"John",
　email:"john@gmail.com",
　homepage:"http://www.jobn.com"
},
{
　name:"Peggy",
　email:"peggy@gmail.com",
　homepage:"http://www.peggy.com"
}
]

　　简单的不只是表达上，最重要的是可以丢弃让人晕头转向的DOM解析了。因为只要符合JavaScript的声明规范，JavaScrip会自动帮你解析好的。Ajax中使用JSON的基本方法是前台载入后台声明JavaScript对象的字符串，用eval方法来将它转为实际的对象，最后通过 DHTML更新页面信息。

JSON的格式

　　JSON的基本格式如下，图片来自json.org:

　　·对象是属性、值对的集合。一个对象的开始于"{"，结束于"}"。每一个属性名和值间用":"提示，属性间用","分隔。

·数组是有顺序的值的集合。一个数组开始于"["，结束于"]"，值之间用","分隔。

·值可以是引号里的字符串、数字、true、false、null，也可以是对象或数组。这些结构都能嵌套。

·字符串的定义和C或Java基本一致。

·数字的定义也和C或Java基本一致。

JSON VS XML

　　·可读性

　　JSON和XML的可读性可谓不相上下，一边是建议的语法，一边是规范的标签形式，很难分出胜负。

　　·可扩展性

　　XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。

　　·编码难度

　　XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了。

　　·解码难度

　　XML的解析得考虑子节点父节点，让人头昏眼花，而JSON的解析难度几乎为0。这一点XML输的真是没话说。

　　·流行度

　　XML已经被业界广泛的使用，而JSON才刚刚开始，但是在Ajax这个特定的领域，未来的发展一定是XML让位于JSON。到时Ajax应该变成Ajaj(Asynchronous JavaScript and JSON)了。