一个项目中使用到的AJAX＋STRUTS例子

    这星期一接到一个任务：把首页上的告警列表部分的查询改用AJAX实现，目的是降低网络和服务器的IO。

    项目中使用到了AJAX的prototype.js框架和JSON技术。

1、

function searchAlertSeverity(severityId){

    action_url="SearchAlertSeverityAction.do?severityId="+severityId;

    var curl='<c:url value="'+action_url+'"/>';

    new Ajax.Request(curl, { method:'get',

              requestHeaders: {Accept: 'application/json'},

              onSuccess:showResponse});

}

 

function showResponse(transport){

    //在刚开始用“eval('('+transport.responseText+')')或transport.responseText.parseJSON()”来将字符串转化为JSON对象的，但是运行无效。费了好半天，才发现parseJSON()\yy\\方法是json.js中的方法，而我没有引入这个js文件。

     //prototype.js对json的支持非常好，evalJSON()方法就是prototype.js中的，作用和parseJSON()一样。   

    var alertList=transport.responseText.evalJSON();将服务器返回的字符串转化为JSON对象。

    createAlertTab(alertList);   

}

function createAlertTab(json){

    var len=json.alerts.length ;

    var tbody=document.getElementById('freshThis');

    // 删除原有数据

    var _tr=tbody.getElementsByTagName("tr");

    while(_tr.length!=0){

        // 用 _tr[0].parentNode才能保证每次取到正确的子节点

        _tr[0].parentNode.removeChild(_tr[0]);

    }     

        td.innerHTML='';   

        message_tr.appendChild(td);

        for(i=0;i<len&&i<4;i ++){

           var td_0=document.createElement('td'); 

           var td_1=document.createElement('td');

           var td_2=document.createElement('td');

           var td_3=document.createElement('td');

           var td_4=document.createElement('td');

           td_0.innerHTML='<div class="svt" style="background-color:'+json.alerts[i]["severityColor"]+'">&nbsp;</div>';

           td_1.innerHTML=json.alerts[i]["lastHappenTime"];

           td_2.innerHTML=json.alerts[i]["deviceSno"];

           td_3.innerHTML=json.alerts[i]["alertTitle"];

           td_4.innerHTML=json.alerts[i]["alertType"];

   

           var tr=document.createElement('tr');

           tr.appendChild(td_0);

           tr.appendChild(td_1);

           tr.appendChild(td_2);

           tr.appendChild(td_3);

           tr.appendChild(td_4);

           tbody.appendChild(tr);

       }

}

jsp页面部分代码：

<table id="ad" width="100%" border="0" cellpadding="0" cellspacing="0">

   <thead>

      <tr>

       <th width="12%">告警级别</th>

       <th width="15%">发生时间</th>

       <th width="20%">设备序列号</th>

       <th width="20%">告警标题</th>

       <th width="15%">告警类型</th>

      </tr>

    </thead>

    <tbody id="freshThis">

      <c:forEach var="vo" items="${PAGER_ITEMS}" end="4">

       <tr>

       <td>

       <div class="svt"

       style="background-color:${vo.severityColor}">&nbsp;</div>

       </td>                                  <td><fmt:formatDate value='${vo.lastHappenTime}'          pattern="yyyy-MM-dd HH:mm:ss" /></td>

                                          <td>${vo.deviceSno}</td>

                                          <td>${vo.alertTitle}</td>

                                          <td>${allAlertType[vo.alertType]}</td>

     </tr>

    </c:forEach>

    //////////点击超链接部分刷新首页面的内容。

    <a href="#"                                        onclick="javascript:searchAlertSeverity        (${alertSeverity.severityId})">

  <div class="svt"

    style="background-color:${alertSeverity.severityColor}"></div>

    ${alertSeverity.severityName}</a></td>

    </tbody>

   </table>

 

 

//////////SearchAlertSeverityAction .java

package com.huaxia.inm.bbms.actions.alert;

 

import java.io.PrintWriter;

import java.text.DateFormat;

import java.text.SimpleDateFormat;

import java.util.List;

 

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

import org.json.simple.JSONArray;

import org.json.simple.JSONObject;

 

import com.huaxia.inm.bbms.beans.alert.Alert;

import com.huaxia.inm.bbms.domain.TbAdUser;

import com.huaxia.inm.bbms.domain.TbUser;

import com.huaxia.inm.bbms.service.AlertService;

import com.huaxia.inm.bbms.utils.Contents;

 

/**

 *

 * @author jinyy.

 *

 */

public class SearchAlertSeverityAction extends Action {

   

    public static final String DATE_PATTERN = "yyyy-MM-dd HH:mm:ss"; 

    private DateFormat dateFormat;

 

    @SuppressWarnings("unchecked")

    @Override

    public ActionForward execute(ActionMapping mapping, ActionForm form,

            HttpServletRequest request, HttpServletResponse response)

            throws Exception {

        try {

            response.setContentType("text/html;charset=UTF-8");

            response.setHeader("Cache-Control", "no-cache");

            response.setCharacterEncoding("UTF-8");

            request.setCharacterEncoding("GBK");

            String severityId = (String) request.getParameter("severityId");

            List<Alert> list ＝   alertService.getAdUserCurAlertlist(Integer

                            .parseInt(severityId));;

            PrintWriter out = response.getWriter();

            JSONObject object = new JSONObject();

            JSONArray js = new JSONArray();

            dateFormat=new SimpleDateFormat(DATE_PATTERN);

            for (Alert alert : list) {

                JSONObject objTemp = new JSONObject();

                String severityColor = alert.getSeverityColor();

                objTemp.put("severityColor", severityColor);

                objTemp.put("lastHappenTime", dateFormat.format   (alert.getLastHappenTime()));

                objTemp.put("deviceSno", alert.getDeviceSno());

                objTemp.put("alertTitle", alert.getAlertTitle());

                String alertType = alert.getAlertType());

                objTemp.put("alertType", alertType);

                js.add(objTemp);

            }

            object.put("alerts", js);

            out.print(object.toString());

        } catch (Exception e) {

            e.printStackTrace();

        }

        return null;

    }

}