运用ajax制作提示页面

 

运用ajax制作提示页面

ajax 确实是个很好的技术，在提高客户的体验度上面能做很多以前不能做或者不好做的事情。出现提示页面就是一个很好的示例。需要制作提示页面的地方其实很多，但 以前大多是要求用户点击相关信息进入详细信息页面察看，然后返回，再点击其他的信息察看详细信息页面。这样就降低了客户的体验度，在没有ajax的时候， 我们是劝导客户只能这么做。

现在用ajax就可以很轻松的解决这个问题了。
我的平台仍然是struts+spring+hibernate，但ajax打交道的主要仍是struts，至于后台的DAO怎么写，我就不贴了，因为比较简单。

我的实现方式是当鼠标移动到图片上时，就会出现提示信息，移开，提示信息就关闭。

效果：
鼠标没有移动到图片的效果


鼠标移动到图片上的效果


主要代码
jsp页面：

< td width = " 15% "  align = " center "   >
     < a href = " javascript:btn_AddNewBlueprintOrCommentary('<bean:write name= " element "  property= " id.tbBlueprintId " />'); " >< font color = " green " > [说明书] </ font ></ a >
     < img src = " ../images/task.gif "  onMouseOver = " btn_getCommentary(this,'<bean:write name= " element "  property= " id.tbBlueprintId " />'); "  onMouseOut = " btn_clearData(); " />
    </ td >  

js代码：

function setData(commentaryData) {
    btn_clearData();
    setOffsets();
    var xmlDoc=commentaryData.documentElement;
    
    var val=xmlDoc.getElementsByTagName('value')[0].firstChild.data;
    if(val==1){
        var ID=xmlDoc.getElementsByTagName('ID');
        var PLACE=xmlDoc.getElementsByTagName('PLACE');
        var MEMO=xmlDoc.getElementsByTagName('MEMO');
        
        //alert(ID[0].firstChild.data);
        var row,row2,row3;
        var iddata,placedata,memodata;
        //alert(dataDiv.innerHTML);
        for(var i=0;i<ID.length;i++){
            iddata="说明书ID: "+ID[i].firstChild.data;
            placedata="存放位置: "+PLACE[i].firstChild.data;
            
            row=createRow(iddata);
            row2=createRow(placedata);
            
            dataTableBody.appendChild(row);
            dataTableBody.appendChild(row2);
            //alert(MEMO[i].firstChild.data);
            if(MEMO[i].firstChild.data!="1"){
                memodata="备注: "+MEMO[i].firstChild.data;
                row3=createRow(memodata);
                dataTableBody.appendChild(row3);
            }
        }
    }else{
        iddata="还没有记录！ ";
        row=createRow(iddata);
        
        dataTableBody.appendChild(row);
    }
}

var dataDiv;
var dataTable;
var dataTableBody;
var offsetEl;

function btn_clearData() {
    var ind=dataTableBody.childNodes.length;
    for(var i=ind-1;i>=0;i--){
        dataTableBody.removeChild(dataTableBody.childNodes[i]);
    }
    dataDiv.style.border="none";
}

function setOffsets() {
    var end=offsetEl.offsetWidth;
    var top=calculateOffsetTop(offsetEl);
    dataDiv.style.border="black 1px solid";
    dataDiv.style.left=end+370+"px";
    dataDiv.style.top=top+"px";
    //alert(dataDiv.innerHTML);
}

function calculateOffsetTop(field) {
    return calculateOffset(field,"offsetTop");
}

function calculateOffset(field,attr) {
    var offset=0;
    while(field){
        offset+=field[attr];
        field=field.offsetParent;
    }
    return offset;
}

function createRow(data) {
    var row,cell,txtNode;
    row=document.createElement("tr");
    cell=document.createElement("td");
    
    cell.setAttribute("bgcolor","#FFFAFA");
    cell.setAttribute("border",0);
    
    txtNode=document.createTextNode(data);
    cell.appendChild(txtNode);
    row.appendChild(cell);
    
    return row;
}

 

action代码:

 

/** */ /** 
     * 获得所有说明书
     */
     public  ActionForward doGetCommentary(
            ActionMapping mapping,
            ActionForm form,
            HttpServletRequest req,
            HttpServletResponse res) {
        String blueprintID=(String)req.getParameter("blueprintID");
        String folderID=(String)req.getParameter("folderID");
        String fileboxID=(String)req.getParameter("fileboxID");
        res.setContentType("text/xml;charset=GB2312");
        res.setHeader("Cache-Control","no-cache");
        String xml="<?xml version=/"1.0/" encoding=/"GB2312/"?>";
        xml+="<response>";
        logger.info("CommentaryAction_doGetCommentary_蓝图ID和文档ID和文档盒ID: "+blueprintID+";"+folderID+";"+fileboxID);
        List commlist=commentaryService.getAllCommentary(blueprintID,folderID,fileboxID);
        int i=commlist.size();
        if(i==0){
            xml+="<value>0</value>";
            xml+="</response>";
        }else{
            Iterator it=commlist.iterator();
            while(it.hasNext()){
                TbExponent te=(TbExponent)it.next();
                xml+="<ID>"+te.getId().getTbExponentFileId()+"</ID>";
                xml+="<PLACE>"+te.getTbExponentPlace()+"</PLACE>";
                if(!te.getTbExponentMemo().equals(""))
                    xml+="<MEMO>"+te.getTbExponentMemo()+"</MEMO>";
                else
                    xml+="<MEMO>"+1+"</MEMO>";
                //logger.info("CommentaryAction_doGetCommentary:"+xml);
            }
            xml+="<value>1</value>";
            xml+="</response>";
            logger.info("CommentaryAction_doGetCommentary:"+xml);
        }
        
        try {
            res.getWriter().write(xml);
        } catch (IOException e) {
                        e.printStackTrace();
        }
        return null;
    }

 

关键的代码已经贴出，希望对大伙有用。

参考书籍：《ajax基础教程》