局部刷新

来源：互联网发布：江苏爱知投资有限公司编辑：程序博客网时间：2024/04/30 07:24

花了两天时间做了一下局部刷新。在这边写一下，希望有要学的不用象我一样走很多弯路，花了很多冤枉力气。废话少说，下面开始。

先介绍一下我用的环境，jdk1.5，tomcat5.0，eclipase3.2（插件MyEclipase5.0）

主要有三个文件。jsp，js，和java。我用的是struts。

1.partRefresh.jsp内容如下：

<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <base href="<%=basePath%>">
  <title>partRefresh test JSP page</title>
  <script language="javascript" src="<%=path%>/js/partRefresh.js"></script>
  <script type="text/javascript">
        function testName(path)
  {
      var username = document.getElementById("username").value;
      var viewName=document.getElementById("viewName");
      var url =path+'/ajax.do?method=checkUserName&username='+username;
      var freshFunction = "refreshViewName(objXMLReq,viewName)";
      proxyRequest(url,freshFunction);
  }
//刷新viewName内容
  function refreshViewName(objXMLReq,obj)
  {
      if(objXMLReq.responseText=='0'){
          obj.style.color='green';
          obj.innerHTML='congratuation！此用户名可用。';

      }else if(objXMLReq.responseText=='1'){
          obj.style.color='red';
          obj.innerHTML='sorry！此用户名已经被使用，换一个试试。';
      }else{
          obj.style.color='red';
          obj.innerHTML='该用户名含有非法字符！';
      }
  }

    </script>
</head>
<body>
  <form action="">
   <input name="username" id="username" type="text" maxlength="20" />
   <input id="checkName" type="button" value="检测帐号"
    onclick="testName('<%=path%>')" />
   <span id="viewName"></span>
  </form>
</body>
</html>

注意一下引入js的路径，改成自己的路径就行了。

第二行蓝字部分是自己的刷新函数。作为字符传入。

2。partRefresh.js文件

/**
*创建XML HTTP对象
*/
function createXMLHTTP(){
    var arrSignatures = ["Microsoft.XMLHTTP","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSMXL2.XMLHTTP"];
    for (var i=0;i<arrSignatures.length;i++){
        try{
            var oRequest = new ActiveXObject(arrSignatures[i]);
            return oRequest;
        }catch(oError){
        //ignore
        }
    }
    throw new Error("MSMXL is not installed on yout system.");
}

/**
*发送异步请求
*/
function proxyRequest(url,freshFunction)
{
    var objXMLReq = createXMLHTTP();
    objXMLReq.onreadystatechange = function processRequest() {
        //最后输出过程
        if (objXMLReq.readyState == 4 && objXMLReq.status == 200) {
            //在此加入html刷新内容
            //alert(freshFunction);
            eval(freshFunction);
        }
    }
    objXMLReq.open("POST", url, true);
    objXMLReq.send("");
}

3。AjaxAction.java文件

package com.neusoft.action;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;

import com.neusoft.partrefresh.JsContent;
import com.neusoft.partrefresh.ResponseProxy;

/**
*
* @author dudu
*
*/
public class AjaxAction extends DispatchAction {

/**
* 检验用户名
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws IOException
*/
public ActionForward checkUserName(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)
   throws IOException {
  PrintWriter out = response.getWriter();
  String username = request.getParameter("username");
  out.print(username);
  return null;
}
}

别忘了package写正确。

如果运行时提示viewName对象未定义脚本错误

可以把第一行蓝字改为

var viewName='document.getElementById("viewName")';

第二行改为

var freshFunction="refreshViewName(objXMLReq," + viewName +")";

应该就行了，我做这个例子的时候没什么问题，用同样的方法做另一个功能是就不行了，改了就行。最后别望了在struts－config.xml里配置一下action啊。

本人初学，希望有高手路过，留下两招啊，谢谢啊。^_^