在项目中初用ajax技术的总结

迈不过友情╰ 2022-09-17 15:22 112阅读 0赞

项目组分配了一个博客添加的功能模块，考虑到表现层面向于用户，采用ajax技术能给用户好的使用体验，所以决定使用初学相关的ajax技术给实例应用一下，顺便当做一个学习总结。

先描述一下项目基本情况，项目基于J2EE下。采用MVC结构，使用了当前流行的struts+hibernate+spring框架。ajax方面主要用prototype.js 1.5，这些东西我BLOG里面都有。

主要总结几个方面的内容：

blog.js : javascript脚本代码，用于实例化prototype里面ajax对象，进行调用。  
addBlogUser.jsp : 表现层jsp代码，用于显示用户查询数据。  
listCategory.jsp : 生成XML结构数据，供addBlogUser.jsp调用。  
rssCategory.jsp : 生成表格数据，供addBlogUser.jsp显示。  
struts-config.xml : 部分struts配置。  
BlogAction.java : action文件。  
Dao层，Service层就暂时不提供了。一些hibernate和spring的配置和代码，以后的总结再慢慢写。

**by : jadesun；QQ:280155**

**2006-10-22**

==========================================

blog.js：

![ExpandedBlockStart.gif][] ![ContractedBlock.gif][] function  viewCategoryRss(url,categoryID)  ... \{  
![InBlock.gif][]  
![InBlock.gif][]var params ="";  
![InBlock.gif][] $(rssContent).innerHTML = viewWaitString();  
![InBlock.gif][]  
![InBlock.gif][]var hrefname = document.getElementsByTagName("A")  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]for(var i=0;i<hrefname.length;i\++) ...\{  
![InBlock.gif][] hrefname\[i\].className="empty";  
![ExpandedSubBlockEnd.gif][] \}  
![InBlock.gif][] $(categoryID).className ="col";  
![InBlock.gif][]  
![InBlock.gif][]//异步调用ajax查询url数据。  
![InBlock.gif][]var myAjax =new Ajax.Request(url,  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{method: 'get', parameters: params, onComplete:showResponse\});  
![InBlock.gif][]  
![InBlock.gif][]  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] function  submitSearchForm() ... \{  
![InBlock.gif][] url ="/users/blog/rssList/rssSearch.html";  
![InBlock.gif][]var title = $("blogForm\_id").title.value;  
![InBlock.gif][]var params ="title="\+encodeURI(title);  
![InBlock.gif][]var myAjax =new Ajax.Request( url,  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{method: 'get', parameters: params, onComplete:showResponse\});  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![None.gif][]  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] function  addBlogByUrl(name,url,id) ... \{  
![InBlock.gif][] $(id\+"\_span").innerHTML="add....";  
![InBlock.gif][] params ="blog.url="\+encodeURI(url)\+"&feed.name="\+encodeURI(name)\+"&blog.id="\+encodeURI(id);  
![InBlock.gif][]var myAjax =new Ajax.Request( "/users/blog/save.html",  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]...\{method: 'get', parameters: params, onComplete: function()...\{  
![InBlock.gif][] $(id\+"\_span").innerHTML="<font color=red>已加入</font>";  
![ExpandedSubBlockEnd.gif][] \}\});  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] function  viewWaitString()  ... \{  
![InBlock.gif][]  
![InBlock.gif][]return"<table border='0' cellpadding='0' cellspacing='0'>"\+  
![InBlock.gif][]"<tr>"\+  
![InBlock.gif][]"<td width='100%'>正在加载中......</td>"\+  
![InBlock.gif][]"</tr>"\+  
![InBlock.gif][]"</table>";  
![InBlock.gif][]  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![None.gif][]

==========================================

addBlogUser.jsp:

![None.gif][] < script  type ="text/javascript"  src ="/script/prototype.js" ></ script >   
![None.gif][] < script  type ="text/javascript"  src ="/script/blog.js" ></ script >   
![None.gif][]  
![None.gif][] < div  id ="manageAdd" >   
![None.gif][] < div  id ="MAddBackg" >   
![None.gif][] < div  id ="topbg01" ></ div >   
![None.gif][] < div  id ="topbg02" ></ div >   
![None.gif][] </ div >   
![None.gif][] < div  id ="MAddBackg" >   
![None.gif][] < div  id ="queque\_left" >   
![None.gif][] < ul >   
![None.gif][] < li > ==控制台== </ li >   
![None.gif][]  
![None.gif][]    
![None.gif][]  
![None.gif][] < c:import  url ="/users/blog/rssList/listCategory.html"  var ="category" />   
![None.gif][] < x:parse  var ="CategoryDoc"  xml ="$\{category\}" />   
![None.gif][] < x:forEach  select ="$CategoryDoc/categorys/category"  var ="category" >   
![None.gif][] < li >   
![None.gif][]    
![None.gif][]  
![None.gif][] < a  href ="\#"  id ="category\_<x:out select=" $category/id" /> " onClick="viewCategoryRss(' < x:out  select ="$category/url" /> ','category\_ < x:out  select ="$category/id" /> ');return false">  
![None.gif][] < x:out  select ="$category/name" />   
![None.gif][] </ a >   
![None.gif][] </ li >   
![None.gif][] </ x:forEach >   
![None.gif][] </ ul >   
![None.gif][] </ div >   
![None.gif][]  
![None.gif][]    
![None.gif][]  
![None.gif][] < html:form  action ="/users/blog/rssList/rssSearch.html"  styleId ="blogForm\_id"  onsubmit ="submitSearchForm()" >   
![None.gif][] < div  id ="table\_div" >   
![None.gif][] < html:text  property ="title"  value ="请输入搜索内容"  styleClass ="text\_01" />< a  href ="javascript:submitSearchForm()" >< html:img  src ="/images/default/gooweb\_20\_2.gif"  align ="absmiddle" /></ a >   
![None.gif][] < span  id ="rssContent" ></ span >   
![None.gif][] </ div >   
![None.gif][] </ html:form >   
![None.gif][] </ div >   
![None.gif][]  
![None.gif][] < div  id ="MAddBackg"  class ="Hsiza" >   
![None.gif][] < div  id ="bottombg03" ></ div >   
![None.gif][] < div  id ="bottombg04" ></ div >   
![None.gif][] </ div >   
![None.gif][]

==============================================

listCategory.jsp :

![None.gif][] <? xml version="1.0" encoding="gb2312" ?>   
![None.gif][] < %@ page  language ="java"  contentType ="text/xml; charset=gb2312" % >   
![None.gif][] < %@ taglib  uri ="/tags/struts-bean"  prefix ="bean"  % >   
![None.gif][] < %@ taglib  uri ="http://java.sun.com/jsp/jstl/core"  prefix ="c"  % >   
![None.gif][] < %@ taglib  uri ="http://java.sun.com/jsp/jstl/fmt"  prefix ="fmt"  % >   
![None.gif][] < %  
![None.gif][] response .setHeader("Cache-Control","no-store");  
![None.gif][] response.setHeader("Pragrma","no-cache");  
![None.gif][] response.setDateHeader("Expires",0);  
![None.gif][]% >   
![None.gif][] < categorys >   
![None.gif][] < c:forEach  var ="categorys"  items ="$\{category\}" >   
![None.gif][] < c:if  test ="$\{categorys.name != '博客'\}" >   
![None.gif][] < category >   
![None.gif][] < id > $\{categorys.id\} </ id >   
![None.gif][] < url > <!\[CDATA\[ /users/blog/rssList/listRss.html?blogtid=12397&categoryid=$\{categorys.id\} \]\]> </ url >   
![None.gif][] < name > $\{categorys.name\} </ name >   
![None.gif][] </ category >   
![None.gif][] </ c:if >   
![None.gif][] </ c:forEach >   
![None.gif][] </ categorys >

==============================================

rssCategory.jsp :

![None.gif][] <? xml version="1.0" encoding="gb2312" ?>   
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] <% ... @ page language="java" contentType="text/html; charset=gb2312" %>   
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] <% ... @ taglib uri="/tags/struts-bean" prefix="bean" %>   
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] <% ... @ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>   
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] <% ...   
![InBlock.gif][] response.setHeader("Cache-Control","no-store");  
![InBlock.gif][] response.setHeader("Pragrma","no-cache");  
![ExpandedBlockEnd.gif][] response.setDateHeader("Expires",0);  
![None.gif][] %>   
![None.gif][] < c:choose >   
![None.gif][] < c:when  test ="$\{not empty rsslist\}" >   
![None.gif][]  
![None.gif][] < table  border ="0"  cellpadding ="0"  cellspacing ="0" >   
![None.gif][] < tr  class ="BGCOLOR" >   
![None.gif][] < c:forEach  var ="rssLists"  items ="$\{rsslist\}"  varStatus ="status" >   
![None.gif][] < td  width ="33%" > $\{rssLists.title\} &nbsp;&nbsp; < a  href ="javascript:addBlogByUrl('$\{rssLists.title\}','$\{rssLists.url\}','$\{rssLists.id\}')" >< span  id ="$\{rssLists.id\}\_span" > 添加 </ span ></ a ></ td >   
![None.gif][] < c:choose >   
![None.gif][] < c:when  test ="$\{status.count % 3 == 0\}" >   
![None.gif][] </ tr >   
![None.gif][] < tr  <c:if test ="$\{status.count % 6 == 0\}" >  class="BGCOLOR" </ c:if > >  
![None.gif][] </ c:when >   
![None.gif][] < c:otherwise >   
![None.gif][] </ c:otherwise >   
![None.gif][] </ c:choose >   
![None.gif][]  
![None.gif][] </ c:forEach >   
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] <% ...   
![InBlock.gif][]int size =3\- ((java.util.List)request.getAttribute("rsslist")).size()%3;  
![InBlock.gif][]if (size <3) \{  
![InBlock.gif][]for(int i=0; i < size; i\++) out.println("<td></td>");  
![InBlock.gif][] out.println("</tr>");  
![InBlock.gif][] \}  
![ExpandedBlockEnd.gif][] %>   
![None.gif][]  
![None.gif][] </ table >   
![None.gif][]  
![None.gif][] </ c:when >   
![None.gif][] < c:otherwise >   
![None.gif][] < table  border ="0"  cellpadding ="0"  cellspacing ="0" >   
![None.gif][] < tr >   
![None.gif][] < td  width ="100%" > 您所点击栏目没有相应的Rss资源 </ td >   
![None.gif][] </ tr >   
![None.gif][] </ table >   
![None.gif][] </ c:otherwise >   
![None.gif][] </ c:choose >

====================================================

Struts-config.xml:

![None.gif][]    
![None.gif][]  
![None.gif][] < form-bean  name ="categoryRssForm"  type ="org.apache.struts.validator.DynaValidatorForm" >   
![None.gif][] < form-property  name ="blogtid"  type ="java.lang.Integer"  />   
![None.gif][] < form-property  name ="categoryid"  type ="java.lang.Integer"  />   
![None.gif][] < form-property  name ="title"  type ="java.lang.String" />   
![None.gif][] </ form-bean >   
![None.gif][]  
![None.gif][]    
![None.gif][]  
![None.gif][] < action  path ="/users/blog/rssList/listCategory"  type ="gooweb.web.action.BlogAction"  parameter ="listCategory" >   
![None.gif][] < forward  name ="display"  path ="/xml/blog/listCategory.jsp"  />   
![None.gif][] </ action >   
![None.gif][]  
![None.gif][] < action  path ="/users/blog/rssList/rssSearch"  type ="gooweb.web.action.BlogAction"  scope ="request"  validate ="false"  name ="categoryRssForm"  parameter ="categoryRssSearch" >   
![None.gif][] < forward  name ="display"  path ="/xml/blog/rssCategory.jsp"  />   
![None.gif][] </ action >   
![None.gif][]  
![None.gif][] < action  path ="/users/blog/rssList/listRss"  type ="gooweb.web.action.BlogAction"  name ="categoryRssForm"  validate ="false"  parameter ="viewCategoryRss" >   
![None.gif][] < forward  name ="display"  path ="/xml/blog/rssCategory.jsp"  />   
![None.gif][] </ action >

=====================================================

BlogAction.java :

![None.gif][]   
![None.gif][]  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] /\*\* \*/ /\*\*  
![InBlock.gif][] \* @title listCategory  
![InBlock.gif][] \* @param mapping  
![InBlock.gif][] \* @param form  
![InBlock.gif][] \* @param request  
![InBlock.gif][] \* @param response  
![InBlock.gif][] \* @return  
![InBlock.gif][] \* @throws Exception  
![ExpandedBlockEnd.gif][]\*/   
![None.gif][]  
![None.gif][] public  ActionForward listCategory(ActionMapping mapping, ActionForm form,  
![None.gif][] HttpServletRequest request, HttpServletResponse response)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] throws  Exception  ... \{  
![InBlock.gif][]  
![InBlock.gif][] BaseTagManager manager =(BaseTagManager)getBean("baseTagManager");  
![InBlock.gif][] Collection<Category> category = manager.findAllCategory().values();  
![InBlock.gif][] request.setAttribute("category", category);  
![InBlock.gif][]return mapping.findForward("display");  
![InBlock.gif][]  
![ExpandedBlockEnd.gif][] \}   
![None.gif][]  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] /\*\* \*/ /\*\*  
![InBlock.gif][] \* @title viewCategoryRss  
![InBlock.gif][] \* @param mapping  
![InBlock.gif][] \* @param form  
![InBlock.gif][] \* @param request  
![InBlock.gif][] \* @param response  
![InBlock.gif][] \* @return  
![InBlock.gif][] \* @throws Exception  
![ExpandedBlockEnd.gif][]\*/   
![None.gif][] public  ActionForward viewCategoryRss(ActionMapping mapping, ActionForm form,  
![None.gif][] HttpServletRequest request, HttpServletResponse response)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] throws  Exception  ... \{  
![InBlock.gif][]  
![InBlock.gif][] DynaValidatorForm df = (DynaValidatorForm) form;  
![InBlock.gif][]  
![InBlock.gif][] Integer blogtid = Integer.valueOf(df.get("blogtid").toString());  
![InBlock.gif][] Integer categoryid = Integer.valueOf(df.get("categoryid").toString());  
![InBlock.gif][]  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]if (blogtid !=0&& categoryid !=0)...\{  
![InBlock.gif][]  
![InBlock.gif][] String sql="select r.rssid as rssid,r.rssname as rssname,r.rssurl from rss r, rsstagsrelation rt1, rsstagsrelation rt2, tags t1, tags t2 "\+  
![InBlock.gif][]"where r.rssid=rt1.rssid and rt1.rssid = rt2.rssid "\+  
![InBlock.gif][]"and rt1.tid=t1.tid and t1.tid="\+blogtid\+" and rt2.tid=t2.tid and t2.tid="\+categoryid\+"";  
![InBlock.gif][]  
![InBlock.gif][] List<Rss> rsslist =new ArrayList<Rss>();  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]if (sql !=null&& sql.toString() !="") ...\{  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]try...\{  
![InBlock.gif][] DataSource dataSource = (DataSource) getBean("dataSource");  
![InBlock.gif][] Connection conn = dataSource.getConnection();  
![InBlock.gif][] Statement stmt = conn.createStatement(ResultSet.TYPE\_SCROLL\_SENSITIVE,ResultSet.CONCUR\_UPDATABLE);  
![InBlock.gif][] ResultSet rs = stmt.executeQuery(sql);  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]if (rs.next()) ...\{  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]while (rs.next()) ...\{  
![InBlock.gif][] Rss rss =new Rss();  
![InBlock.gif][] rss.setId(rs.getLong("rssid"));  
![InBlock.gif][] rss.setTitle(rs.getString("rssname"));  
![InBlock.gif][] rss.setUrl(rs.getString("rssurl"));  
![InBlock.gif][] rsslist.add(rss);  
![ExpandedSubBlockEnd.gif][] \}  
![ExpandedSubBlockEnd.gif][] \}  
![InBlock.gif][] rs.close();  
![InBlock.gif][] stmt.close();  
![InBlock.gif][] conn.close();  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][] \}catch(Exception error)...\{  
![InBlock.gif][] error.printStackTrace();  
![ExpandedSubBlockEnd.gif][] \}  
![ExpandedSubBlockEnd.gif][] \}  
![InBlock.gif][] request.setAttribute("rsslist", rsslist);  
![ExpandedSubBlockEnd.gif][] \}  
![InBlock.gif][]  
![InBlock.gif][]return mapping.findForward("display");  
![InBlock.gif][]  
![ExpandedBlockEnd.gif][] \}   
![None.gif][]  
![None.gif][]  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] /\*\* \*/ /\*\*  
![InBlock.gif][] \* @title categoryRssSearch  
![InBlock.gif][] \* @param mapping  
![InBlock.gif][] \* @param form  
![InBlock.gif][] \* @param request  
![InBlock.gif][] \* @param response  
![InBlock.gif][] \* @return  
![InBlock.gif][] \* @throws Exception  
![ExpandedBlockEnd.gif][]\*/   
![None.gif][] public  ActionForward categoryRssSearch(ActionMapping mapping, ActionForm form,  
![None.gif][] HttpServletRequest request, HttpServletResponse response)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] throws  Exception  ... \{  
![InBlock.gif][]  
![InBlock.gif][] DynaValidatorForm df = (DynaValidatorForm) form;  
![InBlock.gif][] RssManager manager = (RssManager)getBean("rssManager");  
![InBlock.gif][]  
![InBlock.gif][] List<Rss> rsslist = manager.findByTitle(RequestUtil.encodingUTF(df.getString("title").trim()));  
![InBlock.gif][]  
![InBlock.gif][] request.setAttribute("rsslist", rsslist);  
![InBlock.gif][]return mapping.findForward("display");  
![ExpandedBlockEnd.gif][] \}

[ExpandedBlockStart.gif]: http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif
[ContractedBlock.gif]: /images/20220828/a920fa6946cf4ae3bc0470114711d2cf.png
[InBlock.gif]: /images/20220828/530881393c694fd690571d17600fff95.png
[ExpandedSubBlockStart.gif]: http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif
[ContractedSubBlock.gif]: /images/20220828/df44f00293bb485d85bdd12d09c32627.png
[ExpandedSubBlockEnd.gif]: /images/20220828/1d13432e824e4a2a94310ebd79c5704f.png
[ExpandedBlockEnd.gif]: /images/20220828/dcf49dbed5984b84bf6bf91e2224ff74.png
[None.gif]: /images/20220828/9eb0abe746f64359af1550c008fb709f.png