AJAX异步请求实现瀑布流

AJAX异步请求实现瀑布求

​ 三层架构+AJAX
​ 描述：连接本地数据库,客户端（浏览器）发出请求，服务器响应返回本地数据库数据到浏览器内。
​ 效果：向客户端展示数据，拖动滚动条不断浏览数据。
所需jar包：

mybatis-3.5.3.jar
jackson-databind-2.2.3.jar
mysql-connector-java-5.1.37-bin.jar
jackson-core-2.2.3.jar
pagehelper-5.1.10.jar
jsqlparser-3.1.jar
jackson-annotations-2.2.3.jar

html（前端）

<script>
    //1.定义发送请求标记
    let send = true;
    //2.定义当前页码和每页显示的条数
    let start = 1;
    let pageSize = 10;
    //3.定义滚动条距底部的距离
    let bottom = 1;

    //4.设置页面加载事件
    $(function () {
      
        //5.为当前窗口绑定滚动条滚动事件
        $(window).scroll(function () {
      
            //6.获取必要信息，用于计算当前展示数据是否浏览完毕
            //当前窗口的高度
            let windowHeight = $(window).height();
            //当前滚动条从上往下滚动的距离
            let scrollTop = $(window).scrollTop();
            //当前文档的高度
            let docHeight = $(document).height();
            //7.计算当前展示数据什么时候浏览完毕
            //当 滚动条距底部的距离 + 当前滚动条滚动的距离 + 当前窗口的高度 >= 当前文档的高度
            if ((bottom + scrollTop + windowHeight)>=docHeight){
      
                //8.判断请求标记是否为true
                if (send == true) {
       // 如果请求true则执行if
                    // 如果当前页大于10，则将加载动图隐藏并结束方法
                    //9.将请求标记置为false，当前异步操作完成前，不能重新发起请求
                    send = false;//执行if则send修改为false ，防止浏览器重复执行
                    //10.根据当前页和每页显示的条数来 请求查询分页数据
                    queryByPage(start,pageSize);//还没执行完queryByPage则send没有为true，所以再次触发事件不执行if
                    //11.当前页码+1
                    start++;
                }
            }
        });
    });
  function queryByPage(start,pageSize) {
      
      //请求查询分页数据的函数
      //将加载动图显示
      $(".loading").show();
      //发起AJAX异步请求
      $.ajax({
      
          url:"NewsServlet",
          data:{
      "start":start,"pageSize":pageSize},
          type:"POST",
          dataType:"json",
          success:function (data) {
      
              if (data.length == 0) {
      
                  $(".loading").hide();
                  $("#no").html("我也是有底线的...");
                  return;
              }
              //加载动图隐藏
              $(".loading").hide();
              //将数据显示
              let titles="";
              for (let i =0;i<data.length;i++){
      
                  titles +="
\n" +
                      "                    \n" +
                                                  data[i].title +
                      "                        
\n" +
                      "                    \n" +
                      "                
"
              }
              //追加到页面
              $(".news_list").append(titles);
              //将请求标记置为true
              send = true;
          }
      });
  }
script>

Servlet (controller层)

@WebServlet("/newsServlet")
public class NewsServlet extends HttpServlet {
     
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     
        //设置请求和响应的编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        //1.获取请求参数
        String start = req.getParameter("start");
        String pageSize = req.getParameter("pageSize");
        //2.根据当前页码和每页显示的条数来调用业务层的查询方法，得到分页Page对象
        NewsService service = new NewsServiceImpl();
        Page page = service.pageQuery(Integer.parseInt(start), Integer.parseInt(pageSize));
        //3.将得到的数据转为JSON
        String json = new ObjectMapper().writeValueAsString(page);
        try {
     
            Thread.sleep(1000);
        } catch (InterruptedException e) {
     
            e.printStackTrace();
        }
        //4.将数据响应给客户端
        resp.getWriter().write(json);
    }
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     
        doPost(req,resp);
    }
}

Service层

public class NewsServiceImpl implements NewsService {
     
    @Override
    public Page pageQuery(Integer start, Integer pageSize) {
     
        InputStream is = null;
        SqlSession sqlSession = null;
        Page page = null;
        try{
     
            //1.加载核心配置文件
            is = Resources.getResourceAsStream("MyBatisConfig.xml");
            //2.获取SqlSession工厂对象
            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
            //3.通过SqlSession工厂对象获取SqlSession对象
            sqlSession = sqlSessionFactory.openSession(true);
            //4.获取NewsMapper接口的实现类对象
            NewsMapper mapper = sqlSession.getMapper(NewsMapper.class);
            //5.封装Page对象   start:当前页码   pageSize：每页显示的条数
            page = PageHelper.startPage(start,pageSize);
            //6.调用实现类对象的查询全部方法，此时底层执行的就是MySQL的limit分页查询语句
            mapper.selectAll();
        } catch (Exception e) {
     
            e.printStackTrace();
        } finally {
     
            //7.释放资源
            if(sqlSession != null) {
     
                sqlSession.close();
            }
            if(is != null) {
     
                try {
     
                    is.close();
                } catch (IOException e) {
     
                    e.printStackTrace();
                }
            }
        }
        //8.返回page对象到控制层
        return page;
    }
}

Service接口

	public interface NewsService {
     
    /*
        分页查询
     */
    public abstract Page pageQuery(Integer start, Integer pageSize);
}

Dao层

public interface NewsMapper {
     
    /*
        查询全部
     */
    @Select("SELECT * FROM news")
    public abstract List<News> selectAll();
}

配置文件：
config.properties

driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/db11
username=root
password=root

MyBatisConfig.xml

<configuration>
    
    <properties resource="config.properties"/>
    
    <settings>
        <setting name="logImpl" value="log4j"/>
    settings>
    
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor" />
    plugins>
    
    <environments default="mysql">
        
        <environment id="mysql">
            
            <transactionManager type="JDBC" />
            
            <dataSource type="POOLED">
                
                <property name="driver" value="${driver}"/>
                <property name="url" value="${url}"/>
                <property name="username" value="${username}"/>
                <property name="password" value="${password}"/>
            dataSource>
        environment>
    environments>
    
    <mappers>
        
        <package name="com.itheima.mapper"/>
    mappers>
configuration>