当前位置：首页 > news >正文

javaweb之ajax异步交互

news 来源：原创 2024/7/5 13:25:03

一、概念

1、传统网站存在的问题

传统的页面交互是Servlet 调用完业务逻辑层后将数据存储到域对象中，然后跳转到指定的 jsp 页面，在页面上使用 EL表达式和JSTL 标签库进行数据的展示。该模式存在以下问题：

网速比较慢的情况下，页面加载时间长，用户需等待
表单提交后，如果有一项内容不合格，需要重新填写所有表单内容
页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

2、Ajax介绍

AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。其中JavaScript 表明该技术和前端相关；XML 是指以此进行数据交换。它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高浏览网站应用的体验。
通过使用Ajax技术，它可以和服务器进行通信，以达到使用 HTML+AJAX来替换JSP页面，即浏览器发送请求servlet，servlet 调用完业务逻辑层后将数据直接响应回给浏览器页面，页面使用 HTML 来进行数据展示。

3、同步与异步

同步
浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。
异步
浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

4、应用场景

页面上的上拉加载与下拉刷新
列表数据无刷新分页
表单项离开焦点数据验证（避免页面跳转重新填写表单）
搜索框提示文字下拉列表（如百度的搜索提示）

二、实现

1、Ajax之get请求

（1）GetUserInfoServlet接口

@WebServlet("/GetUserInfoServlet")
public class GetUserInfoServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");

        String username=req.getParameter("username");
        String password=req.getParameter("password");

        User user = new User();
        user.setUsername(username);
        user.setPassword(password);

        String content= JSON.toJSONString(user);

        PrintWriter writer = resp.getWriter();
        writer.write(content);
    }
}

（2）ajax页面请求

    function getUserInfo() {
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      //创建Ajax对象
      var http=new XMLHttpRequest();
      //设置Ajax的请求地址与请求方式
      var params='username='+username+'&password='+password;
      http.open("get","http://localhost:8080/GetUserInfoServlet?"+params);
      //发送请求
      http.send();
      //获取响应数据
      http.onreadystatechange=function () {
        //readyState 0=>初始化 1=>载入 2=>载入完成 3=>解析 4=>完成
        if(this.readyState==4&&this.status==200){
          var responseText=this.responseText
          console.log('返回结果：'+responseText)
          var result=JSON.parse(responseText);
          console.log('解析结果：password：'+result.password+' username:'+result.username)
        }
      }
    }

2、Ajax之post请求

（1）GetUserInfoServlet接口

@WebServlet("/UserLoginServlet")
public class UserLoginServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");

        //解析参数
        InputStreamReader insr = new InputStreamReader(req.getInputStream(),"utf-8");
        String res = "";
        int respInt = insr.read();
        while(respInt!=-1) {
            res +=(char)respInt;
            respInt = insr.read();
        }
        User user=JSON.parseObject(res,User.class);
        //返回结果
        Result result = new Result();
        if(user.getUsername()==null||user.getUsername().isEmpty()){
            result.setSuccess(false);
            result.setErrorCode(-1);
            result.setErrorMsg("请输入用户名");
        }else if(user.getPassword()==null||user.getPassword().isEmpty()){
            result.setSuccess(false);
            result.setErrorCode(-1);
            result.setErrorMsg("请输入密码");
        }else if(!user.getUsername().equals("admin")||!user.getPassword().equals("admin")){
            result.setSuccess(false);
            result.setErrorCode(-1);
            result.setErrorMsg("用户名或者密码错误");
        }else {
            result.setSuccess(true);
        }
        PrintWriter writer = resp.getWriter();
        writer.write(JSON.toJSONString(result));
    }
}

（2）ajax页面请求

function login() {
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      //创建Ajax对象
      var http=new XMLHttpRequest();
      //设置Ajax的请求地址与请求方式
      http.open("post","http://localhost:8080/UserLoginServlet");
      //设置请求的参数格式的类型（post请求必须要设置）
      // http.setRequestHeader('Content-type','application/x-www-form-urlencoded') username=123&password=344
      http.setRequestHeader('Content-type','application/json')
      //发送请求
      http.send(JSON.stringify({
          username:username,
          password:password
      }));
      //获取响应数据
      http.onreadystatechange=function () {
        //readyState 0=>初始化 1=>载入 2=>载入完成 3=>解析 4=>完成
        if(this.readyState==4&&this.status==200){
          var responseText=this.responseText
          console.log('返回结果：'+responseText)
          var result=JSON.parse(responseText);
          if(result.success){
             alert('登录成功')
          }else {
             alert(result.errorMsg)
          }
        }
      }
    }