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@RestControllerpublic 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@RestControllerpublic 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@RestControllerpublic 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@RestControllerpublic 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命令行中查看数据库连贯的状况。