AJAX异步请求

什么是ajax

异步
JavaScript

同步和异步的区别

同步方式：正常情况下，浏览器与服务器之间是串行操作，类似于一个Java线程的操作。
异步方式：浏览器与服务器是并行操作，类似于Java中多个线路同时工作。

即浏览器后台发送数据给服务器，不是通过表单去提交数据给服务器。

用户在前台还是可以继续工作，用户感觉不到浏览器已经将数据发送给了服务器，并且服务器也已经返回了数据。

AJAX的执行流程

jQuery 的通用方式实现 AJAX

核心语法：$.ajax({name:value,name:value,…});
url：请求的资源路径。
async：是否异步请求，true-是，false-否 (默认是 true)。
data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
type：请求方式，POST 或 GET (默认是 GET)。
dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
success：请求成功时调用的回调函数。
error：请求失败时调用的回调函数。

通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部
分内容进行局部更新。

同步和异步
同步：服务器端在处理过程中，无法进行其他操作。
异步：服务器端在处理过程中，可以进行其他操作。

GET 方式实现：.get();POST方式实现：.get(); POST 方式实现：.get();POST方式实现：.post();
url：请求的资源路径。
data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

AJAX实现页面加载内容并分页显示(Mybatis,分页插件实现)

sql数据准备

-- 创建db11数据库
CREATE DATABASE db11;-- 使用db11数据库
USE db11;-- 创建数据表
CREATE TABLE news(id INT PRIMARY KEY AUTO_INCREMENT,    -- 主键idtitle VARCHAR(999)                      -- 新闻标题
);-- 插入数据
DELIMITER $$
CREATE PROCEDURE create_data()
BEGIN
DECLARE i INT;
SET i=1;
WHILE i<=100 DO INSERT INTO news VALUES (NULL,CONCAT('我是数据库中的第',i,'条数据'));
SET i=i+1;
END WHILE;
END
$$-- 调用存储过程
CALL create_data();

项目目录

配置文件

MyBatisConfig

注意:要在配置文件中配置插件的使用

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<!--configuration：核心根标签-->
<configuration><!--引入数据库连接信息配置文件--><properties resource="config.properties"/><!--集成LOG4J日志信息--><settings><setting name="logImpl" value="log4j"/></settings><!--集成分页助手插件,注意这里要配置,否则插件使用不了--><plugins><plugin interceptor="com.github.pagehelper.PageInterceptor" /></plugins><!--配置数据库环境，可以有多个。default指定默认使用哪个--><environments default="mysql"><!--配置环境，id是唯一标识--><environment id="mysql"><!--事务管理 采用JDBC默认的事务--><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.fs.mapper"/></mappers></configuration>

config.properties

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

log4j.properties

# Global logging configuration
log4j.rootLogger=DEBUG, stdout
# Console output...
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n

实体类

public class News {private Integer id;     //主键idprivate String title;   //新闻标题//省略getsettostring方法
}

Dao

package com.fs.mapper;import com.fs.bean.News;
import org.apache.ibatis.annotations.Select;import java.util.List;public interface NewsMapper {/*查询全部,分页插件会自动帮我们实现为limit分页*/@Select("SELECT * FROM news")public abstract List<News> selectAll();
}

Service

package com.fs.service;import com.github.pagehelper.Page;public interface NewsService {/*分页查询*/public abstract Page pageQuery(Integer start, Integer pageSize);
}

service实现类

注意:

这里面使用分页插件来封装数据库中查询出来的对象,并且将查询出来的所有记录封装成你需要的每页数据大小

package com.fs.service.impl;import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.fs.mapper.NewsMapper;
import com.fs.service.NewsService;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;import java.io.IOException;
import java.io.InputStream;public class NewsServiceImpl implements NewsService {@Overridepublic 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调用查询方法后,会将数据封装到page对象中,就是json查询的list里面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;}
}

Servlet

package com.fs.controller;import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageInfo;
import com.fs.bean.News;
import com.fs.service.NewsService;
import com.fs.service.impl.NewsServiceImpl;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;@WebServlet("/newsServlet2")
public class NewsServlet2 extends HttpServlet {@Overrideprotected 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.封装PageInfo对象,这里面会封装分页的数值信息PageInfo<List<News>> info = new PageInfo<>(page);//4.将得到的数据转为JSONString json = new ObjectMapper().writeValueAsString(info);//5.将数据响应给客户端resp.getWriter().write(json);}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}
}

html

注意:分页插件显示按钮的标签属性是固定的,复制粘贴即可,还有给分页按钮设置参数按照代码里面的方式灵活运用就可以

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>AJAX异步加载数据库查询数据并且分页显示</title>
<!--    加载分页插件的样式--><link rel="stylesheet" href="css/tt.css"><link rel="stylesheet" href="css/simplePagination.css">
</head>
<body>
<div class="center"><ul class="data_list"></ul><hr><!--分页插件的标签元素的固定模板--><div class="content"><div class="pagination-holder clearfix"><div id="light-pagination" class="pagination"></div></div></div></div></body>
<!--jQuery-->
<script src="js/jquery-3.3.1.min.js"></script>
<!--分页插件js文件-->
<script src="js/jquery.simplePagination.js"></script>
<script>//1.定义当前页码和每页显示的条数let start = 1;let pageSize = 10;//2.调用查询数据的方法queryByPage(start, pageSize);//3.定义请求查询分页数据的函数，发起AJAX异步请求，将数据显示到页面function queryByPage(start, pageSize) {$.ajax({//请求的资源路径url:"newsServlet2",//请求的参数data:{"start":start,"pageSize":pageSize},//请求的方式type:"POST",//响应数据形式dataType:"json",//请求成功后的回调函数success:function (pageInfo) {//将数据显示到页面let titles = ``;for(let i = 0; i < pageInfo.list.length; i++) {//使用反引号拼接字符串,使用${}提高代码的可读性,少了很对+号和引号.titles += `<li><div class="title-box"><a href="#" class="link">${pageInfo.list[i].title}<hr></a></div></li>`;}$(".data_list").html(titles);//4.为分页按钮区域设置页数参数（总页数和当前页）$("#light-pagination").pagination({//总页数pages:pageInfo.pages,//当前页currentPage:pageInfo.pageNum});//5.为分页按钮绑定单击事件,完成上一页下一页查询功能$("#light-pagination .page-link").click(function () {//获取点击按钮的文本内容let page = $(this).html();//如果点击的是Prev，调用查询方法，查询当前页的上一页数据if(page == "Prev") {queryByPage(pageInfo.pageNum - 1,pageSize);}else if (page == "Next") {//如果点击的是Next，调用查询方法，查询当前页的下一页数据queryByPage(pageInfo.pageNum + 1,pageSize);} else {//调用查询方法，查询当前页的数据queryByPage(page,pageSize);}});}});}
</script>
</html>

启动tomcat,在浏览器地址栏测试是否返回JSON对象

{
total: 100,
list: [
{
id: 1,
title: "我是数据库中的第1条数据"
},
{
id: 2,
title: "我是数据库中的第2条数据"
},
{
id: 3,
title: "我是数据库中的第3条数据"
},
{
id: 4,
title: "我是数据库中的第4条数据"
},
{
id: 5,
title: "我是数据库中的第5条数据"
},
{
id: 6,
title: "我是数据库中的第6条数据"
},
{
id: 7,
title: "我是数据库中的第7条数据"
},
{
id: 8,
title: "我是数据库中的第8条数据"
},
{
id: 9,
title: "我是数据库中的第9条数据"
},
{
id: 10,
title: "我是数据库中的第10条数据"
}
],
pageNum: 1,
pageSize: 10,
size: 10,
startRow: 1,
endRow: 10,
pages: 10,
prePage: 0,
nextPage: 2,
isFirstPage: true,
isLastPage: false,
hasPreviousPage: false,
hasNextPage: true,
navigatePages: 8,
navigatepageNums: [
1,
2,
3,
4,
5,
6,
7,
8
],
navigateFirstPage: 1,
navigateLastPage: 8
}

访问hello.html体验结果

浅谈AJAX并实现使用pagehelper-5.1.10.jar分页插件实现异步从数据库中获取数据分页显示相关推荐

jq获取内容ajax传递数据库,使用php和jquery ajax从mysql数据库中获取数据
我想使用php和jquery ajax从mysql数据库中获取数据." process.php"是连接到数据库并获取mysql数据的php文件.当它单独运行时它可以工作,但是当使用 ...
js 单页面ajax缓存策略,浅谈ajax的缓存机制---IE浏览器方面
这篇文章主要介绍了IE浏览器关于ajax的缓存机制,文中给大家提到了Ajax解决浏览器的缓存问题,解决方法有很多种.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. IE浏览器对于同一 ...
jquery ajax和servlet,浅谈ajax在jquery中的请求和servlet中的响应
在jsp中,首先,你需要导入jquery的架包: 获取可返回站点的根路径: String path = request.getContextPath(); %> 在jquery中写ajax请求: ...
ajax感受，有什么缺点,浅谈ajax的优点与缺点
AJAX (Asynchronous Javascript and XML) 是一种交互式动态web应用开发技术,该技术能提供富用户体验. 完全的AJAX应用给人以桌面应用的感觉.正如其他任何技术,A ...
ajax机制缓存,浅谈Ajax的缓存机制
浅谈Ajax的缓存机制 Ajax的缓存机制和浏览器处理资源时的缓存机制是一样的. 三条简单规则: 只要是URL相同的GET请求,浏览器会使用缓存(当然还要看服务器的Cache-Control/Expi ...
vb怎么样实时取mysql数据库数据_浅谈如何使用vb.net从数据库中提取数据
1.设置从Model中的Sub Main 启动 2.程序结构 3.Model1 Imports System.Windows.Forms.Application Module Module1 Sub ...
ajax向数据库中添加数据,用jqueryajax在数据库中插入数据
我有一个带有c#(.net4)代码的表单.在这种形式下,用户填写他的规格并提交. 我想在jquery中使用ajax或post方法来预防blink.i写流程代码. "成功"函数执行, ...
通过ajax获取的数据怎怎么在html上,Ajax获取数据然后显示在页面的实现方法
主要功能流程介绍循环获取列表数据点击列表数据进入详情页点击报名参加弹出报名成功提示框点击提示框中的确定按钮,跳回列表页代码实现流程和解说 1.访问链接list.PHP时判断是pc端还是客户端 ...
浅谈ajax中get与post的区别,以及ajax中的乱码问题的解决方法
一.谈Ajax的Get和Post的区别 Get方式: 用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及 ...

浅谈AJAX并实现使用pagehelper-5.1.10.jar分页插件实现异步从数据库中获取数据分页显示