JavaWeb视频网站开发：Ajax实现异步分批加载数据

具体的效果是这个样子的，点击查看实例效果553影院-吐槽墙：刚进入页面时加载一部分数据（比如指定加载5条），底部有个加载更多，点击后，再加载五条数据，底部仍然有个加载更多，再点击，再加载5条数据。。。直到数据库中数据加载完毕后，由原本的“加载更多”变为“数据加载完毕了哟”，也同时停止加载数据。

实现这个功能的目的和分页功能类似，都是为了在数据过多时能够一部分一部分地加载，而非一次性加载完，过多的耗时，影响用户体验，且给服务器造成负担。

这篇博文就用Ajax来实现这个效果。

在实现这个效果的过程中，我使用了cookie这个工具，是为了记住加载的次数。原本有第1-5条数据，第一次点击“加载更多”取出第6-10条数据，第二次点击取出第11-15条数据，第三次点击取出第16-20条数据，，，依次类推，直到数据取完位置。下面附上效果截图553影院-吐槽墙。

接下来罗列实现效果的代码，具体的css代码就不罗列了，如果想使用，可以留言来联系我，下面主要说一下实现这个效果的代码。

1.首先，用Java创建一个cookie

Cookie cookie=new Cookie("toast","1");
cookie.setMaxAge(1*60);
response.addCookie(cookie);

2.定义展示吐槽的地方，并先加载开始的五条数据。最外层的div是包含所有吐槽以及“加载更多”的div，第二层未定义class的div是所有吐槽的div，里面class定义为comment的div是单条吐槽的div。之所以为第二层div定义id是因为在js中需要通过id找到它并在其后面追加通过ajax加载的更多吐槽。

<div class="comments">
   <div id="comments">
	<%
		//加载数据库中的吐槽
		try{
       		Class.forName(SqlUtil.driver);
			con=DriverManager.getConnection(SqlUtil.url,SqlUtil.user,SqlUtil.pass);
			st=con.createStatement();
			//查询看过该视频的其他用户
			String sql="select * from wall order by w_Id desc limit 0,5";
			rs=st.executeQuery(sql);
			while(rs.next()){
				int w_Id=rs.getInt(1);
				String w_Nick=rs.getString(2);
				String w_Tx=rs.getString(3);
				String w_Content=rs.getString(4);
				
				w_Content=w_Content.replaceAll("【", "<img alt='' src='/images/aodamiao/");
				w_Content=w_Content.replaceAll("】", ".gif'>");						
				String w_Ip=rs.getString(5);//原始ip
				//w_Ip=w_Ip.substring(0,w_Ip.indexOf("."));
				//System.out.println(w_Ip);
				//System.out.println(w_Ip.split(".").length);
				//w_Ip=ips[0]+"."+ips[1]+".*.*";
				if(w_Ip.length()>8){
					w_Ip=w_Ip.substring(0,8)+"...";
				}
				String w_Time=rs.getString(7);
				%>
				<div class="comment">
					<ul>
						<img alt="" src="<%=w_Tx%>">
						<span class="info"><%=w_Nick%>（来自IP<font color="gray"><%=w_Ip%></font>的网友）</span>
						<span class="time"><%=w_Time %></span>		
						<%if(w_Id==1){ %>
							<span style="width:25px;height:25px;color:white; background:red;">置顶</span>
						<%} %>
						<p><%=w_Content%></p>
					</ul>
				</div>
				<%
			}
       	 }catch(Exception e){
       		 
       	 }
	 %>
	 </div>
	 <center><span id="load" onclick="loadTo()">加载更多</span></center>
</div>

3.定义js代码异步获取更多吐槽

function loadTo(){
	var load=document.getElementById("load");
	var u="/loadTo.jsp";
	xmlHttp.open("post",u,true);
	xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState==4){
			//alert(xmlHttp.responseText.length);
			var before=document.getElementById("comments");
			before.innerHTML=before.innerHTML+xmlHttp.responseText;
			load.innerText="加载更多";
			//alert(xmlHttp.responseText);
			if(xmlHttp.responseText.length==18){//返回为空，表示已加载完，改变load
				load.innerText="没有更多了哟！";
			}
		}else{
			load.innerText="加载中，请稍后...";
		}
	}
	xmlHttp.send();
}

4.新建loadTo.jsp文件，以加载更多吐槽通过js追加到吐槽div中。该文件中获取吐槽代码基本和上面一致，就是获取的SQL语句发生改变，变为动态的了，另外就是需要取出cookie中的获取的次数，并将其加1，也就是又获取了一次。

String toast="";
Cookie[] cs=request.getCookies();
for(int i=0;i<cs.length;i++){
	if(cs[i].getName().toString().equals("toast")){
		toast=cs[i].getValue().toString();
	}
}
//第一次加载从第六个开始
int start=Integer.parseInt(toast)*5-1;
//System.out.println(start);
 Connection con=null;
 Statement st=null;
 ResultSet rs=null;
//加载更多吐槽
try {
	Class.forName(SqlUtil.driver);
	con=DriverManager.getConnection(SqlUtil.url,SqlUtil.user,SqlUtil.pass);
	st=con.createStatement();
	//查询该视频下的所有评论
	String sql="select * from wall order by w_Id desc limit "+start+",6";
	rs=st.executeQuery(sql);
	if(rs.next()){//如果库中还有记录，继续让toast加1
		toast=Integer.parseInt(toast)+1+"";//将toast转化为整型并加1，再转为字符型
		Cookie cookie=new Cookie("toast",toast);
		cookie.setMaxAge(1*60);
		response.addCookie(cookie);
	}
	while(rs.next()){
		int w_Id=rs.getInt(1);
		String w_Nick=rs.getString(2);
		String w_Tx=rs.getString(3);
		String w_Content=rs.getString(4);
		w_Content=w_Content.replaceAll("【", "<img alt='' src='/images/aodamiao/");
		w_Content=w_Content.replaceAll("】", ".gif'>");			
		System.out.println(w_Id);
					
		String w_Ip=rs.getString(5);//原始ip
		if(w_Ip.length()>8){
			w_Ip=w_Ip.substring(0,8)+"...";
		}
		String w_Time=rs.getString(7);
		%>
		<div class="comment">
			<ul>
				<img alt="" src="<%=w_Tx%>">
				<span class="info"><%=w_Nick%>（来自IP<font color="gray"><%=w_Ip%></font>的网友）</span>
				<span class="time"><%=w_Time %></span>		
				<%if(w_Id==1){ %>
					<span style="width:25px;height:25px;color:white; background:red;">置顶</span>
				<%} %>
				<p><%= w_Content%></p>
			</ul>
		</div>
		<%
	}
	st.close();
	con.close();
} catch (Exception e) {
	e.printStackTrace();
}

通过以上程序，就可以实现效果了。不过，使用ajax需要注意的是，因为ajax加载的数据是异步通过其他后台文件加载的，所以不会在源码中显示，自然也就不会被百度蜘蛛所爬取，即网页不会被正常收录，所以使用的时候要注意。所以此处虽然第一个jsp中加载前几条数据的代码完全可以不必写上，只在js中让网页进入时自动加载前几条，但是为了让网页中有数据是非异步加载的，还是用了上面这个写法，所以这个网页被收录基本上也没有什么问题了。

JavaWeb视频网站开发：Ajax实现异步分批加载数据

猜你喜欢