Ajax + Stuts Action实例

。。。。。。

public ActionForward execute(ActionMapping mapping, ActionForm form,
    HttpServletRequest request, HttpServletResponse response) {
   DynaActionForm inForm = (DynaActionForm) form;// TODO Auto-generated method stub

   int left =(Integer)inForm.get(“left”);
   int right =(Integer)inForm.get(“right”);
   String node =(String) inForm.get(“node”);
int result=0;

     if(“+”.equals(node)){

     result = left + right;
     }
     else if(“-“.equals(node)){

。。。。。。
   try {
    PrintWriter out = response.getWriter();
    out.print(result);

   } catch (IOException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }
   return null;
}

======
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>accountCheck.html</title>

<!–<link rel=”stylesheet” type=”text/css” href=”./styles.css”>–>
<SCRIPT>
var http_request;

/*按钮点击时触发sendmsg函数*/
function sendmsg(){
   var left = document.getElementById(“left”);
   var node = document.getElementById(“node”);
   var right = document.getElementById(“right”);

   var serverUrl = “/DyForm/culater.do”;
   var requestMethod = “post”;
   if(“+” == node){
    node = “\\+”;
    }
   alert(node.value);
   var requestData = “left=”+left.value+”&node=”+node.value+”&right=”+right.value;
   sendRequestByAjax(requestMethod,serverUrl,requestData,doResponse);
}

/*具体负责处理服务器返回数据的函数*/
function doResponse(){
   //当服务器将数据返回给客户端时,readyState状态值为4

   if(http_request.readyState==4){
    //当服务器返回的数据是正常的数据时,status状态值为200

    if(http_request.status==200){
     //通过XMLHttpRequest对象的responseText属性获取
     //服务器返回的文本信息
      var returnMsg = http_request.responseText;
      showMessage(returnMsg);
    }

   }
}

/*用ajax方式发送数据到url指定的服务器地址上*/
function sendRequestByAjax(method,url,data,dataHandler){

   //获取XMLHttpRequest对象

   http_request = getAjaxObject();

   //设置当服务器数据返回后,处理服务器返回数据的js函数
   //这里处理函数名称是以参数形式给出

   http_request.onreadystatechange = dataHandler;

   //与指定的url地址建立连接
   //第一个参数可以选择传递为Post或者Get,表示请求方式
   //第二个参数表示请求的服务器地址
   //第三个参数如果为true,表示只有建立连接成功后才执行后面的js代码
   //如果为false,则相反

   http_request.open(method,url,true);

   //如果是以post方式发送数据,则必须加上如下代码,否则服务器将会收不到数据
   //setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

   if(“post”==method.toLowerCase()){
    http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
   }
   //真正发送数据
   //如果method指定是Get方式发送数据,则这里send函数参数data=null
   //如果method指定是Post方式发送数据,则这里send函数参数
   //具体的数据data(参数data的数据格式为:name=zhang&money=10000)

   http_request.send(data);
}

/*
*最终目的只有一个,就是获得XMLHttpRequest对象(只有有了它以后,
*才能以ajax方式发送请求数据)
*函数内部的实现代码是为了兼容不同浏览器类型
*/
function getAjaxObject(){
   var xmlHttpRequest;
   if(window.XMLHttpRequest){//Mozilla,IE7.0
   xmlHttpRequest = new XMLHttpRequest();
   if(xmlHttpRequest.overrideMimeType){
    xmlHttpRequest.overrideMimeType(“text/xml”);
   }
   }else if(window.ActiveXObject){//IE
   try{
    xmlHttpRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
   }catch(e){
    try{
    xmlHttpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
    }catch(e){}
   }
   }
   return xmlHttpRequest;
}

/*显示服务器返回的信息到div标记中*/
function showMessage(message){
   //根据id获取div元素对象
   var msgDiv = document.getElementById(“msg”);
   //通过设置div元素的innerHTML属性来完成信息的显示
   msgDiv.innerHTML =”结果为:” + message;
}
</SCRIPT>
</head>

Related posts:

留下回复 取消回复

留下回复取消回复