AJAX（Asynchronous JavaScript And XML 异步的 JavaScript 和 XML）
上期说要新添一个需要：新增一个批改明码的接口，前端再减少一个批改明码的页面，申请和返回都应用 JSON，要求复用数据库连贯，合并读取 html 文件。
1、新增一个批改明码的接口
UserMapper 接口局部：
package com.example.mapper;
import com.example.pojo.User;
import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface UserMapper {User selectAll(@Param("userName")String username, @Param("passWord")String password);
int update(User user);
}增加 UserMapper 的 xml 文件：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.UserMapper">
<select id="selectAll" resultType="User">
select userName as username ,passWord as password from user where username = #{userName} and password=#{passWord};
</select>
<update id="update">
update user set password = #{passWord} where username = #{userName};
</update>
</mapper>2、在前端新增一个批改明码的页面
创立一个 ajax-demo2.html
<!DOCTYPE html>
<html>
<h1> 批改明码 </h1>
<head>
</head>
<body>
<form id="form2" action="http://localhost:8080/addUser3" method="post" accept-charset="UTF-8" onsubmit="return false">
<p> 批改明码 </p>
<input type="text" name="userName" placeholder="用户名">
<input type="text" name="passWord" placeholder="明码"/>
<input type="submit" value="提交" onclick="asd()"/>
</form>
</body>
</html> 要实现从 ajax-demo.html 页面跳转到 ajax-demo2.html 上的性能，就得在 ajax-demo.html 上减少一个批改明码按钮并实现跳转。
ajax-demo.html：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form1" action="##" method="post" accept-charset="UTF-8" onsubmit="return false">
<p> 校验 </p>
<input type="text" name="userName" id="txtUserName" placeholder="用户名"/>
<input type="text" name="passWord" id="txtPassWord" placeholder="明码"/>
<input type="submit" value="提交" onclick="fun()"/>
</form>
<button onclick="tz()"> 批改明码 </button>
<script>
function tz(){
// 将这个点击事件的 URL 指向 /hello2
window.location.href="http://localhost:8080/hello2";
}
function fun(){const back = new XMLHttpRequest();
let name = {"userName":form1.userName.value,"passWord":form1.passWord.value}
let userName = JSON.stringify(name);
back.onload = function(){
// 判断 true、false
if(this.responseText == "true"){
// 明码账号正确
alert("明码账号正确");
}else{
// 明码账号谬误
alert("明码账号谬误");
}
}
alert(userName);
back.open("POST","http://localhost:8080/addUser2");
back.setRequestHeader("Content-type","application/json;charset=UTF-8");// 能够发送 json 格局字符串
back.send(userName);
}
</script>
</body>
</html>在 DemoApplication 局部，让 hello2 读取 ajax-demo2.html 文件。
package com.example;
@SpringBootApplication
@RestController
public class DemoApplication {
String flag = null;
public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);
}
/*
* 实现账号密码校验的性能
* */
@RequestMapping("/addUser2")
public People addUser2(HttpServletRequest request, HttpServletResponse response) throws IOException {ServletInputStream is = request.getInputStream();
BufferedReader br = new BufferedReader(new InputStreamReader(is));
String line=null;
String result="";
while((line=br.readLine())!=null){System.out.println(line);
result =result + "\n" +line;
}
System.out.println(result);
// 提取 JSON 中的值
ObjectMapper mapper = new ObjectMapper();
People people = mapper.readValue(result,People.class);
// 登入
String userName = people.userName;
String passWord = people.passWord;
// 查询数据库
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//2. 获取 SqlSession 对象
SqlSession sqlSession = sqlSessionFactory.openSession();
//3. 获取 Mapper 接口的代理对象
UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
//4. 执行办法
User users =userMapper.selectAll(userName, passWord);
System.out.println(users);
// 开释资源
sqlSession.close();
System.out.println(result);
// 数据库数据与 userName、passWord 做比拟
boolean flag = false;
if (users != null) {flag = true;} else {flag = false;}
// 返回一个 Boolean
response.getWriter().write("" + flag);
return null;
}
/*
* 读取 ajax-demo2.html
* */
@GetMapping("/hello1")
public String hello1() {
String str ;
String htmlStr="";
try {BufferedReader in = new BufferedReader(new FileReader("src/webapp/ajax-demo.html"));
while ((str = in.readLine()) != null) {System.out.println(str);
htmlStr =htmlStr + "\n" +str;
}
System.out.print(htmlStr);
} catch (IOException e) {System.out.print("谬误");
}
return htmlStr;
}
@GetMapping("/hello2")
public String hello2() {
String str ;
String htmlStr="";
try {BufferedReader in = new BufferedReader(new FileReader("src/webapp/ajax-demo2.html"));
while ((str = in.readLine()) != null) {System.out.println(str);
htmlStr =htmlStr + "\n" +str;
}
System.out.print(htmlStr);
} catch (IOException e) {System.out.print("谬误");
}
return htmlStr;
}
}测试一下：
3、申请和返回都应用 JSON
ajax-demo2.html 通过单击事件执行 asd()，将浏览器的数据提交到服务端（/addUser3）。并增加返回性能返回到校验界面。
ajax-demo2.html 局部
<!DOCTYPE html>
<html>
<h1> 批改明码 </h1>
<head>
</head>
<body>
<form id="form2" action="http://localhost:8080/addUser3" method="post" accept-charset="UTF-8" onsubmit="return false">
<p> 批改明码 </p>
<input type="text" name="userName" placeholder="用户名">
<input type="text" name="passWord" placeholder="明码"/>
<input type="submit" value="提交" onclick="asd()"/>
</form>
<button onclick="tz()" > 返回 </button>
<script>
function tz(){window.location.href="http://localhost:8080/hello1";}
function asd(){const back = new XMLHttpRequest();
let name = {"userName":form2.userName.value,"passWord":form2.passWord.value};
let userName = JSON.stringify(name);
back.onload = function(){
// 判断 true、false
if(this.responseText == "true"){
// 明码重置胜利
alert("明码重置胜利");
}else{
// 没有相干的账号
alert("没有相干的账号");
}
}
alert(userName);
back.open("POST","http://localhost:8080/addUser3");
back.setRequestHeader("Content-type","application/json;charset=UTF-8");// 能够发送 json 格局字符串
back.send(userName);
}
</script>
</body>
</html>DemoApplication 局部：
增加 addUser3 实现批改明码的性能
package com.example;
@SpringBootApplication
@RestController
public class DemoApplication {public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);
}
/*
* 实现账号密码校验的性能
* */
@RequestMapping("/addUser2")
public People addUser2(HttpServletRequest request, HttpServletResponse response) throws IOException {ServletInputStream is = request.getInputStream();
BufferedReader br = new BufferedReader(new InputStreamReader(is));
String line=null;
String result="";
while((line=br.readLine())!=null){System.out.println(line);
result =result + "\n" +line;
}
System.out.println(result);
// 提取 JSON 中的值
ObjectMapper mapper = new ObjectMapper();
People people = mapper.readValue(result,People.class);
// 登入
String userName = people.userName;
String passWord = people.passWord;
// 查询数据库
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//2. 获取 SqlSession 对象
SqlSession sqlSession = sqlSessionFactory.openSession();
//3. 获取 Mapper 接口的代理对象
UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
//4. 执行办法
User users =userMapper.selectAll(userName, passWord);
System.out.println(users);
// 开释资源
sqlSession.close();
System.out.println(result);
// 数据库数据与 userName、passWord 做比拟
boolean flag = false;
if (users != null) {flag = true;} else {flag = false;}
// 返回一个 Boolean
response.getWriter().write("" + flag);
return null;
}
/*
* 读取 ajax-demo2.html
* */
@GetMapping("/hello1")
public String hello1() {
String str ;
String htmlStr="";
try {BufferedReader in = new BufferedReader(new FileReader("src/webapp/ajax-demo.html"));
while ((str = in.readLine()) != null) {System.out.println(str);
htmlStr =htmlStr + "\n" +str;
}
System.out.print(htmlStr);
} catch (IOException e) {System.out.print("谬误");
}
return htmlStr;
}
@GetMapping("/hello2")
public String hello2() {
String str ;
String htmlStr="";
try {BufferedReader in = new BufferedReader(new FileReader("src/webapp/ajax-demo2.html"));
while ((str = in.readLine()) != null) {System.out.println(str);
htmlStr =htmlStr + "\n" +str;
}
System.out.print(htmlStr);
} catch (IOException e) {System.out.print("谬误");
}
return htmlStr;
}
/*
* 实现批改明码的性能
* */
@RequestMapping("/addUser3")
public People addUser3(HttpServletRequest request, HttpServletResponse response) throws IOException {String contentType = request.getContentType();
ServletInputStream is = request.getInputStream();
BufferedReader br = new BufferedReader(new InputStreamReader(is));
String line=null;
String result="";
while((line=br.readLine())!=null){System.out.println(line);
result =result + "\n" +line;
}
System.out.println(contentType);
// 提取 JSON 中的值
ObjectMapper mapper = new ObjectMapper();
People people = mapper.readValue(result,People.class);
String userName = people.userName;
String passWord = people.passWord;
// 批改明码
User user = new User();
user.setUserName(userName);
user.setPassWord(passWord);
// 查询数据库
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//2. 获取 SqlSession 对象
SqlSession sqlSession = sqlSessionFactory.openSession();
//3. 获取 Mapper 接口的代理对象
UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
//4. 执行办法
int update = userMapper.update(user);
System.out.println(update);
// 提交事务
sqlSession.commit();
// 开释资源
sqlSession.close();
System.out.println(result);
// 判断数据库是否做出批改
boolean flag = false;
if (update !=0) {flag = true;} else {//update 为 0 则没有做出批改
flag = false;
}
// 返回一个 Boolean
response.getWriter().write("" + flag);
return null;
}
}测试一下
后果合乎预期。
流程跑通顺了，接下来就该思考如何将两次读取文件的操作合并（hello1 和 hello2）。
4、合并两次读取文件的操作
为什么要合并读取文件的操作呢？别看当初的需要要读取的文件少，比拟不便。那万一当前的需要要读取几十个文件呢？我得读取一个文件就得写一次，那还得了。
那该怎么实现合并这个操作呢？
拼接字符串仿佛是一个不错的抉择。将要拼接的局部（ajax_demo.html、ajax_demo2.html）类似的中央提取进去，不一样的中央通过传参的形式返回不就行了吗？说干就干。
咱们创立一个 hello3，定义一个 String 类型的变量 a（这个变量的值通过传参的形式取得），将类似的局部用字符串写死，不一样的局部通过变量 a 代替（”src/webapp/”+a +”.html”）。
DemoApplication 局部：
package com.example;
@SpringBootApplication
@RestController
public class DemoApplication {
String flag = null;
public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);
}
@RequestMapping("/hello3")
public String hello3(HttpServletRequest request) throws IOException {String flag = request.getParameter("flag");
String a = "";
System.out.println(flag);
if (flag == null){// 只会执行一次，做为变量 a 没有传递回来之前的默认值。a ="ajax-demo";
}else{a = flag;}
System.out.println(a);
String str ="";
String htmlStr="";
try {BufferedReader in = new BufferedReader(new FileReader("src/webapp/"+a +".html"));
while ((str = in.readLine()) != null) {htmlStr =htmlStr + "\n" +str;}
} catch (IOException e) {System.out.print("谬误");
}
System.out.println(htmlStr);
return htmlStr;
}
/*
* 实现账号密码校验的性能
* */
@RequestMapping("/addUser2")
public People addUser2(HttpServletRequest request, HttpServletResponse response) throws IOException {ServletInputStream is = request.getInputStream();
BufferedReader br = new BufferedReader(new InputStreamReader(is));
String line=null;
String result="";
while((line=br.readLine())!=null){System.out.println(line);
result =result + "\n" +line;
}
System.out.println(result);
// 提取 JSON 中的值
ObjectMapper mapper = new ObjectMapper();
People people = mapper.readValue(result,People.class);
// 登入
String userName = people.userName;
String passWord = people.passWord;
// 查询数据库
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//2. 获取 SqlSession 对象
SqlSession sqlSession = sqlSessionFactory.openSession();
//3. 获取 Mapper 接口的代理对象
UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
//4. 执行办法
User users =userMapper.selectAll(userName, passWord);
System.out.println(users);
// 开释资源
sqlSession.close();
System.out.println(result);
// 数据库数据与 userName、passWord 做比拟
boolean flag = false;
if (users != null) {flag = true;} else {flag = false;}
// 返回一个 Boolean
response.getWriter().write("" + flag);
return null;
}
/*
* 实现批改明码的性能
* */
@RequestMapping("/addUser3")
public People addUser3(HttpServletRequest request, HttpServletResponse response) throws IOException {String contentType = request.getContentType();
ServletInputStream is = request.getInputStream();
BufferedReader br = new BufferedReader(new InputStreamReader(is));
String line=null;
String result="";
while((line=br.readLine())!=null){System.out.println(line);
result =result + "\n" +line;
}
System.out.println(contentType);
// 提取 JSON 中的值
ObjectMapper mapper = new ObjectMapper();
People people = mapper.readValue(result,People.class);
String userName = people.userName;
String passWord = people.passWord;
// 批改明码
User user = new User();
user.setUserName(userName);
user.setPassWord(passWord);
// 查询数据库
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//2. 获取 SqlSession 对象
SqlSession sqlSession = sqlSessionFactory.openSession();
//3. 获取 Mapper 接口的代理对象
UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
//4. 执行办法
int update = userMapper.update(user);
System.out.println(update);
// 提交事务
sqlSession.commit();
// 开释资源
sqlSession.close();
System.out.println(result);
// 判断数据库是否做出批改
boolean flag = false;
if (update !=0) {flag = true;} else {//update 为 0 则没有做出批改
flag = false;
}
// 返回一个 Boolean
response.getWriter().write("" + flag);
return null;
}
}html 局部：
以 ajax-demo.html 举例：
在 tz() 下将 ajax-demo2.html 应用 post 申请将数据传递给 /hello3.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form1" action="##" method="post" accept-charset="UTF-8" onsubmit="return false">
<p> 校验 </p>
<input type="text" name="userName" id="txtUserName" placeholder="用户名"/>
<input type="text" name="passWord" id="txtPassWord" placeholder="明码"/>
<input type="submit" value="提交" onclick="fun()"/>
</form>
<button onclick="tz()"> 批改明码 </button>
<script>
function tz(){
var flag = "ajax-demo2";
const back1 = new XMLHttpRequest();
back1.open("POST","http://localhost:8080/hello3");
back1.send('flag='+flag);
window.location.href="http://localhost:8080/hello3?flag="+flag;
}
function fun(){const back = new XMLHttpRequest();
let name = {"userName":form1.userName.value,"passWord":form1.passWord.value}
userName="+name+"&&passWord="+psd;
let userName = JSON.stringify(name);
back.onload = function(){
// 判断 true、false
if(this.responseText == "true"){
// 明码账号正确
alert("明码账号正确");
}else{
// 明码账号谬误
alert("明码账号谬误");
}
}
alert(userName);
back.open("POST","http://localhost:8080/addUser2");
back.setRequestHeader("Content-type","application/json;charset=UTF-8");// 能够发送 json 格局字符串
back.send(userName);
}
</script>
</body>
</html>ajax-demo2.html 同上。
测试一下！
在浏览器上输出 http://localhost:8080/hello3;
ok，性能没有问题，接下来就是复用数据库连贯了。咱只有把加载数据库等信息放入构造函数中，而后在须要应用的时候援用这个构造函数即可。
5、复用数据库连贯
创立一个构造函数 Sql
package com.example;
public class Sql {SqlSessionFactory Sql() throws IOException {
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
return sqlSessionFactory;
}
}而后将 DemoApplication 中配置数据库的局部一一代替：
package com.example;
@SpringBootApplication
@RestController
public class DemoApplication {
String flag = null;
public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);
}
@RequestMapping("/hello3")
public String hello3(HttpServletRequest request) throws IOException {String flag = request.getParameter("flag");
String a = "";
System.out.println(flag);
if (flag == null){// 只会执行一次，做为变量 a 没有传递回来之前的默认值。a ="ajax-demo";
}else{a = flag;}
System.out.println(a);
String str ="";
String htmlStr="";
try {BufferedReader in = new BufferedReader(new FileReader("src/webapp/"+a +".html"));
while ((str = in.readLine()) != null) {htmlStr =htmlStr + "\n" +str;}
} catch (IOException e) {System.out.print("谬误");
}
System.out.println(htmlStr);
return htmlStr;
}
/*
* 实现账号密码校验的性能
* */
@RequestMapping("/addUser2")
public People addUser2(HttpServletRequest request, HttpServletResponse response) throws IOException {ServletInputStream is = request.getInputStream();
BufferedReader br = new BufferedReader(new InputStreamReader(is));
String line=null;
String result="";
while((line=br.readLine())!=null){System.out.println(line);
result =result + "\n" +line;
}
System.out.println(result);
// 提取 JSON 中的值
ObjectMapper mapper = new ObjectMapper();
People people = mapper.readValue(result,People.class);
// 登入
String userName = people.userName;
String passWord = people.passWord;
// 查询数据库
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//2. 获取 SqlSession 对象
Sql sql = new Sql();
SqlSession sqlSession = sql.Sql().openSession();
//3. 获取 Mapper 接口的代理对象
UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
//4. 执行办法
User users =userMapper.selectAll(userName, passWord);
System.out.println(users);
// 开释资源
sqlSession.close();
System.out.println(result);
// 数据库数据与 userName、passWord 做比拟
boolean flag = false;
if (users != null) {flag = true;} else {flag = false;}
// 返回一个 Boolean
response.getWriter().write("" + flag);
return null;
}
/*
* 实现批改明码的性能
* */
@RequestMapping("/addUser3")
public People addUser3(HttpServletRequest request, HttpServletResponse response) throws IOException {String contentType = request.getContentType();
ServletInputStream is = request.getInputStream();
BufferedReader br = new BufferedReader(new InputStreamReader(is));
String line=null;
String result="";
while((line=br.readLine())!=null){System.out.println(line);
result =result + "\n" +line;
}
System.out.println(contentType);
// 提取 JSON 中的值
ObjectMapper mapper = new ObjectMapper();
People people = mapper.readValue(result,People.class);
String userName = people.userName;
String passWord = people.passWord;
// 批改明码
User user = new User();
user.setUserName(userName);
user.setPassWord(passWord);
// 查询数据库
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//2. 获取 SqlSession 对象
Sql sql = new Sql();
SqlSession sqlSession = sql.Sql().openSession();
//3. 获取 Mapper 接口的代理对象
UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
//4. 执行办法
int update = userMapper.update(user);
System.out.println(update);
// 提交事务
sqlSession.commit();
// 开释资源
sqlSession.close();
System.out.println(result);
// 判断数据库是否做出批改
boolean flag = false;
if (update !=0) {flag = true;} else {//update 为 0 则没有做出批改
flag = false;
}
// 返回一个 Boolean
response.getWriter().write("" + flag);
return null;
}
}功败垂成，能够应用 show ststus like ‘Threads%’; 能够在 MySQL 命令行中查看数据库连贯的状况。