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

梦里梦外; 2022-04-15 04:39 434阅读 0赞

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 2][]

接下来罗列实现效果的代码，具体的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代码异步获取更多吐槽

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中让网页进入时自动加载前几条，但是为了让网页中有数据是非异步加载的，还是用了上面这个写法，所以这个网页被收录基本上也没有什么问题了。

感谢你的阅读，欢迎光临我的 [哆啦网][Link 1]，记录生活的点点滴滴

[Link 1]: http://www.duola.vip/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70]: /images/20220415/1db6e2d040b94e93812e51002dbf7439.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 1]: /images/20220415/2df08873c887411f95c32fca15f96e87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 2]: /images/20220415/c4436c243a07484486843043d15c0316.png