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
千山鳥飛絕 閱讀(1813)
評論(0) 編輯 收藏 所屬分類:
Ajax