Ajax技术

最新推荐文章于 2024-09-12 17:09:47 发布

哈哈之王

最新推荐文章于 2024-09-12 17:09:47 发布

阅读量159

点赞数

分类专栏： java SpringMVC 文章标签： java-ee javascript web

本文链接：https://blog.csdn.net/m0_46570170/article/details/123998533

版权

java 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

SpringMVC

9 篇文章 0 订阅

订阅专栏

本文探讨了传统servlet-jsp架构与Ajax技术的革新，比较了前后端交互方式的变化，以及如何利用Axios简化Ajax操作。通过实例演示了如何使用Ajax检查用户名和使用Axios进行前后端数据交换。

摘要由CSDN通过智能技术生成

以前我们在网页显示后台服务器的数据是通过 servlet->jsp->页面展示

而且jsp还要依靠我们的服务器来启动访问

现在直接使用ajax技术前台页面 servlet->ajax->页面直接展示使用html 也不用依靠服务器来启动

创建servletAjax

@WebServlet(value = "/ServletAjax")
public class ServletAjax extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//回显网页数据
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("<h1>ServletAjax</h1>");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

创建ajax.html页面

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

<script>
  // <!--ajax快速入门-->
  // <!--1.创建xmlHttpRequest对象 用于和服务器交换数据-->
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  // <!--3.向服务器发送请求-->
  xmlhttp.open("GET", "http://localhost:8080/ServletAjax");//路径写全路径名
  xmlhttp.send();
//  获取响应
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      alert(this.responseText);
    }
  }
</script>

</body>
</html>

案例

写servlet 查询用户名是否存在创建一个假的数据无论填写什么都存在所以回显一个数据TRUE 代表用户名已存在


@WebServlet(value = "/ServletRegister")
public class ServletRegister extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //获取用户名
        String username = request.getParameter("username");

        Boolean flag = true;//用于判断用户名是否已经存在

        //回显提示信息
        response.getWriter().write(""+flag);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

编写一个登录页面当用户填写用户名后设置一个离开光标的事件

传到后台查询用户名

返回TRUE 代表用户名已存在

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img src="imgs/a.jpg">
                    <a href="#" id="changeImg">看不清？</a>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>
</div>

<script>
<!--    给用户名设置一个光标离开的事件-->
    document.getElementById("username").onblur = function () {
//得到用户输入的用户名
        var username = document.getElementById("username").value;
        // <!--1.创建xmlHttpRequest对象 用于和服务器交换数据-->
        var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        // <!--3.向服务器发送请求-->
        xmlhttp.open("GET", "http://localhost:8080/ServletRegister?username"+username);//路径写全路径名
        xmlhttp.send();
//  获取响应
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
               if (this.responseText == "true"){
//显示错误信息
                   document.getElementById("username_err").style.display = '';
               }else {
//隐藏错误信息
                   document.getElementById("username_err").style.display = "none";
               }
            }
        }}

</script>
</body>
</html>

Axios框架用来简写ajax代码

<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

servletAxios后台代码

@WebServlet(value = "/ServletAxios")
public class ServletAxios extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("get/..............");
        String username = request.getParameter("username");
        System.out.println("username = " + username);

//回显网页数据
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("ServletAxios 你好");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("post/...............");
        this.doGet(request, response);
    }
}

get请求

<!--axios代码-->
<!--get请求-->
<script>
  axios({
      method: "get",
      url: "http://localhost:8080/ServletAxios?username=zhangsan"
  }).then(function (resp) {
      alert(resp.data)
  });
</script>

post请求

<!--post请求-->
<script>
    axios({
        method: "post",
        url: "http://localhost:8080/ServletAxios",
        data : "username=lisi",

    }).then(function (resp) {
        alert(resp.data)
    })
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!--axios代码-->
<!--get请求-->
<!--<script>-->
<!--  axios({-->
<!--      method: "get",-->
<!--      url: "http://localhost:8080/ServletAxios?username=zhangsan"-->
<!--  }).then(function (resp) {-->
<!--      alert(resp.data)-->
<!--  });-->
<!--</script>-->

<!--简化版-->
<!--<script>-->
<!--    axios.get("http://localhost:8080/ServletAxios?username=zhangsan")-->
<!--        .then(function (resp) {-->
<!--        alert(resp.data)-->
<!--    });-->
<!--</script>-->

<!--post请求-->
<!--<script>-->
<!--    axios({-->
<!--        method: "post",-->
<!--        url: "http://localhost:8080/ServletAxios",-->
<!--        data : "username=lisi",-->

<!--    }).then(function (resp) {-->
<!--        alert(resp.data)-->
<!--    })-->
<!--</script>-->

<!--简化版-->
<script>
    axios.post("http://localhost:8080/ServletAxios","username=lisi")
    .then(function (resp) {
        alert(resp.data)
    })
</script>
</body>
</html>