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基础教程》
posted on 2006-08-04 09:35
千山鸟飞绝 阅读(1821)
评论(0) 编辑 收藏 所属分类:
Ajax