基于Ajax的分页 -

jiangcs520

浏览: 3560 次
性别:

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (4)

社区版块

存档分类

基于Ajax的分页

自己的技术还有很大的提升空间，有些技术学了一下过了一段时间就会渐渐淡忘了，所以想记录一些自己测试过的写过的一些技术，希望对自己对别人都会有益。废话就不多讲了，最近学着写分页的代码，最基本最核心的部分就是分页查询数据库，有人说是三级查询，其实二级查询应该就可以了吧，就拿emp表举个例子

select emp.* from (select rownum as num,emp.* from emp where rownum<pagesize+pagebegin) where num>pagebegin;

本来是想做个整个页面刷新的换页，但是学了Ajax之后可以实现部分刷新，不用整个页面，所以就想实现一下。但是可能需要比整个页面刷新多写点东西，而且还有一个原因是学到了一种比较方便的利用Ajax与服务器交互数据的方法，先向一个servlet页面发起请求，代码如下：

<script type="text/javascript">
				var xmlrequest=0;
				function changePage(pageno)
				{
					if(window.XMLHttpRequest)
					{
					   xmlrequest=new XMLHttpRequest();
					}
					else if(window.ActiveXObject)
					{
						try{xmlrequest=new ActiveXObject(Msxml2.XMLHTTP);}
						catch(e){xmlrequest=new ActiveXObject(Microsoft.XMLHTTP);}
					}
					if(!xmlrequest)
					{
					    alert("您out很久了！！！");
					}
					xmlrequest.onreadystatechange=haolejiaowo;
					var url="servlet/DepartPageByAjax?flag="+pageno;
					xmlrequest.open("get",url,true);
					xmlrequest.send(null);
				}
				function haolejiaowo()
				{
				    if(xmlrequest.readyState==4 && xmlrequest.status==200)
				    {
				    	
				        alert(xmlrequest.responseText);
				        document.getElementById('pageContent').innerHTML=xmlrequest.responseText;
				    }
				}
	</script>
	
  </head>
  
  <body>
	 	
		<%	DepartDao departdao=new DepartDao();
			int count=departdao.getCountOfTitle();
			int pages=0;
			ArrayList firstPagelist=null;
			if(count%5==0)
			{
			    pages=count/5;
			}
			else
			{
				pages=count/5+1;
			}
			if(pages>1)
			{
				firstPagelist=departdao.departPage("5","1");
				System.out.println("总共有："+firstPagelist.size());
				//isbn,title,editionNumber,copyright,imageFile,price
				%>
		<table border="1">
		<tr><td>isbn</td><td>title</td><td>editionNumber</td><td>copyright</td><td>imageFile</td><td>price</td></tr>
		<tr><td colspan="6">
		<div id="pageContent">
		<table>
					<%
					for(int i=0;i<firstPagelist.size();i++)
					{
						BookTitleBean btBean=(BookTitleBean)firstPagelist.get(i);
						%>
						<tr>
						<td><%=btBean.getIsbn() %></td>
						<td><%=btBean.getTitle() %></td>
						<td><%=btBean.getEditionNumber() %></td>
						<td><%=btBean.getCopyRight() %></td>
						<td><%=btBean.getImageFile() %></td>
						<td><%=btBean.getPrice() %></td>
						</tr>
						<%
					}
					 %>
		</table>
		</div>
		
		</td></tr>
		</table>
				<%
				for(int i=0;i<pages;i++)
				{
					%>
					<a href="javascript:changePage('<%=i+1 %>')"><%=i+1 %></a>
					<%
				}
			}
			
		%>
		
				
		 <input type="button" name="btnLast" value="上一页" onclick="changePage('last')">
		 <input type="button" name="btnNext" value="下一页" onclick="changePage('next')">
		 
  </body>
</html>

这段jsp页面包括了切换页面的按钮，以及向一个servlet页面发起请求，然后在servlet页面中处理请求，说得简单点就是判断用户需要的页码，代码如下：

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("DepartPageByAjax.java");
		DepartDao departdao=new DepartDao();
		int count=departdao.getCountOfTitle();
		String flag=request.getParameter("flag");
		int pages=0;
		HttpSession session=request.getSession();
		String curr=(String)session.getAttribute("currPage");
		int currPage=1;
		if(curr!=null)
		{
			currPage=Integer.parseInt(curr);
		}
		if(count%5==0)
		{
		    pages=count/5;
		}
		else
		{
			pages=count/5+1;
		}
		if("next".equals(flag))//next page
		{
			if(currPage<pages)
			{
				currPage++;
			}
		}
		else if("last".equals(flag))//上一页
		{
			if(currPage>1)
			{
				currPage--;
			}
		}
		else if(Integer.parseInt(flag)>=1&&Integer.parseInt(flag)<=count)
		{
			currPage=Integer.parseInt(flag);
		}
		session.setAttribute("currPage", currPage+"");
		System.out.println("总共"+pages+"页");
		response.sendRedirect("../result.jsp?pageNo="+currPage);
	}

这个处理的一个简单的思想就是将页码请求与上下页切换两种方式分开处理，然后计算出用户需要的页码，每次计算出当前页之后要将此页码存入session，因为下一次的页面请求都是基于本页面的页码，举个例子：用户请求的当前页是5，当请求下一页的时候，需要将5加1，前提就是我们得保存当前的那个5，当然了如果用户直接选择页码，那就直接进入第三个if语句，但是这个页码也要保存入session，这个是一样的道理。最后就是利用到一个result.jsp的中间页面，并将请求的当前页传过去，让这个中间页查询数据库，并将数据做成相应表格，会由responseText返回给请求的jsp页面，代码如下：

 <%
	  DepartDao departDao=new DepartDao();
	  String pageno=request.getParameter("pageNo");
	  System.out.println(pageno+"***********");
	  ArrayList list=departDao.departPage("5",((Integer.parseInt(pageno)-1)*5+1)+"");
	  
	   %>
	   <table>
	   		  <%
	   		  	for(int i=0;i<list.size();i++)
	   		  	{
	   		  	    BookTitleBean btBean=(BookTitleBean)list.get(i);
	   		  		%>
	   		  		<tr>
	   		  		<td><%=btBean.getIsbn() %></td>
	   		  		<td><%=btBean.getTitle() %></td>
					<td><%=btBean.getEditionNumber() %></td>
					<td><%=btBean.getCopyRight() %></td>
					<td><%=btBean.getImageFile() %></td>
					<td><%=btBean.getPrice() %></td>
	   		  		</tr>
	   		  		<%
	   		  	}
	   		  
	   		   %>
	   </table>

这个基于Ajax的技术就算完了，虽然比较简单，但是这个方法个人觉得还是比较不错的，局部刷新总比整个页面刷新来得好。提供的代码只是做个参考，并不全的，要是有需要源码的可以联系我：QQ478283225 都是学技术的，可以交个朋友，呵呵

分享到：