乐趣区

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

作者：

jiezi

在

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章