关于ajax:初见Ajax的认知与理解-二

4次阅读

共计 17107 个字符，预计需要花费 43 分钟才能阅读完成。

上期说要新添一个需要：新增一个批改明码的接口，前端再减少一个批改明码的页面，申请和返回都应用 JSON，要求复用数据库连贯，合并读取 html 文件。

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>

创立一个 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;
    }
}

测试一下：

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）。

为什么要合并读取文件的操作呢？别看当初的需要要读取的文件少，比拟不便。那万一当前的需要要读取几十个文件呢？我得读取一个文件就得写一次，那还得了。

那该怎么实现合并这个操作呢？
拼接字符串仿佛是一个不错的抉择。将要拼接的局部（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，性能没有问题，接下来就是复用数据库连贯了。咱只有把加载数据库等信息放入构造函数中，而后在须要应用的时候援用这个构造函数即可。

创立一个构造函数 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 命令行中查看数据库连贯的状况。

正文完