AJAX、

白小筠

已于 2022-07-18 08:31:13 修改

阅读量410

点赞数 1

分类专栏： JavaWeb 文章标签： servlet ajax java

于 2022-07-18 08:30:48 首次发布

本文链接：https://blog.csdn.net/qq_57907966/article/details/125840568

版权

JavaWeb 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

AJAX

概念：异步的JavaScript和XML

作用：

1.与服务器进行数据交换：通过AJAX可以给服务器发送数据，并获取服务器响应的数据（使用AJVA+HTML来替换JSP页面）

2.异步的交互：可以在不重新加载、整个页面的情况下与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可以校验，等等

AJAX快速入门

1.编写AjaxServlet，并用response输出字符串

//1.响应数据
response.getWriter().write("hello ajax！");

2.创建XMLHttpRequest对象：用于和服务器交换数据

3.向服务器发送请求

4.获取服务器响应数据

具体代码可copy：https://www.w3school.com.cn

<script>
    //1.创建核心对象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.发送请求
    xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet", true);
    //写全路径
    xhttp.send();
    //3.获取响应
   
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                //使用弹窗提示
                alert(this.responseText);

            }
        }；
</script>

案例：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否已经在数据库中存在

创建一个servlet模拟服务器查询数据库

@WebServlet("/selectUserServlet")
public class selectUserServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1.接受用户名
        String username = request.getParameter("username");
        //2.调用service查询User对象
        boolean flag=true;

        //3.响应标记
        response.getWriter().write(""+flag);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

在register.html中写入script

<script>
    //1.给用户名输入框绑定 失去焦点时间
    document.getElementById("username").onblur=function () {
        //2.发送ajax请求
        //获取用户名
      var username=this.value;
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.发送请求
        xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);
        //写全路径
        xhttp.send();
        //3.获取响应
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    if (this.responseText=="true") {
                        //用户名存在
                        //显示提示信息
                        document.getElementById("username_err").style.display='';
                    }
                    else{
                        //用户名不存在
                        //清除提示信息
                        document.getElementById("username_err").style.display='none';

                    }

                }
            };
        }



</script>

Axios快速入门

1.引入axios的js文件

放到webapp/js中

2.使用axios发送请求，并获取响应结果

get方式：

@WebServlet("/axiosServlet")
public class axiosServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


        //接受请求参数
        String username = request.getParameter("username");
        System.out.println(username);
        //响应数据
        response.getWriter().write("hello Axios!");
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

02-axios-demo.html

首先要引入js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script src="js/axios-0.18.0.js"></script>
<script>
    //1.get
    axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"

    }).then(function (resp) {

        alert(resp.data);


    })
</script>

post方式：

修改url

加入data即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script src="js/axios-0.18.0.js"></script>
<!--<script>-->
    <!--//1.get-->
    <!--axios({-->
        <!--method:"get",-->
        <!--url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"-->

    <!--}).then(function (resp) {-->

        <!--alert(resp.data);-->


    <!--})-->
<!--</script>-->

<script>
    //post
    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"

    }).then(function (resp) {

        alert(resp.data);


    })
</script>



</body>
</html>

Axios请求方式别名

为了方便起见，Axios已经为所有支持的请求方法提供了别名

get方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script src="js/axios-0.18.0.js"></script>

<script>
    axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (value) {
        alert(value.data);
    })
</script>




</body>
</html>

post方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script src="js/axios-0.18.0.js"></script>

<!--<script>-->
    <!--axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (value) {-->
        <!--alert(value.data);-->
    <!--})-->
<!--</script>-->


<script>
    axios.get("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (value) { 
        alert(value.data);
    })
    
</script>

</body>
</html>

完善案例：在注册界面增加用户名重复的功能

1.在UserService中增加一个验证用户是否存在的方法

//验证用户是否存在
public boolean isCZ(String username){

    SqlSession sqlSession = factory.openSession();
    UserMapper mapper = sqlSession.getMapper(UserMapper.class);
    User user = mapper.selectByUsername(username);

    sqlSession.close();
  return user==null;

}

2.创建一个axiosServlet

@WebServlet("/axiosServlet")
public class axiosServlet extends HttpServlet {

UserService userService=new UserService();
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取输入的用户名
        String username = request.getParameter("username");
        boolean cz = userService.isCZ(username);

        //发送数据
        response.getWriter().write(""+cz);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

3.在register.jsp中

增加用户名已存在

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WON89AxL-1658104197009)(D:\Typora笔记\Imgs\image-20220712174203686.png)]

导入axios

<script src="js/axios-0.18.0.js"></script>

写入脚本

/1.给用户名输入框绑定 失去焦点时间
document.getElementById("username").onblur=function () {
    //2.发送ajax请求
    //获取用户名
    var username=this.value;
    //post
    axios({
        method:"post",
        url:"http://localhost:8080/1/axiosServlet",
        data:username

    }).then(function (value) {

        if (value.data==true) {
            //用户名存在
            //显示提示信息
            document.getElementById("username_err").style.display='';

        }
        else{
            //用户名不存在
            //清除提示信息
            document.getElementById("username_err").style.display='none';

        }
    })



}

白小筠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX、

概念异步的JavaScript和XML作用1.与服务器进行数据交换通过AJAX可以给服务器发送数据，并获取服务器响应的数据（使用AJVA+HTML来替换JSP页面）2.异步的交互可以在不重新加载、整个页面的情况下与服务器交换数据并更新部分网页的技术，如搜索联想、用户名是否可以校验，等等。......
复制链接

扫一扫