使用Servlet处理AJAX请求

AJAX用于异步更新页面的局部内容。

ajax常用的请求数据类型

text 纯文本字符串
json json数据

使用ajax获取text示例

此种方式常用于前端向后台查询实体的一个属性（字段），比如查询总分。

前端页面

<body>

  <form>

    学号：<input type="text" id="no"><br />

    姓名：<input type="text" id="name"><br />

    <button type="button" id="btn">查询成绩</button>

  </form>

  <p id="score"></p>

  <script src="js/jquery-3.4.1.min.js"></script>

  <script>

    $("#btn").click(function () {

      $.ajax({

        url:"servlet/HandlerServlet",   //请求地址

        type:"get",   //请求方法

        data:{"no":$("#no").val(),"name":$("#name").val()},   //要发送的数据,相当于表单提交的数据，json形式。

        dataType:"text",   //期待返回的数据类型，也可以理解为请求的数据类型

        error:function () {  //发生错误时的处理

        },

        success:function (data) {  //成功时的处理。参数表示返回的数据

          $("#score").text(data);

        }

      })

    });

  </script>

</body>

这里使用了jq提供的ajax方法，所以要用<script>将jq的库文件包含进来。

json的key只能是字符串，标准写法要引，实际上不引也可以，会自动转换为字符串。

json的value可以是多种数据类型，如果是字符串，需要引起来。

后台

@WebServlet("/servlet/HandlerServlet")

public class HandlerServlet extends HttpServlet {

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

        doGet(request,response);

    }

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

        request.setCharacterEncoding("utf-8");

        response.setContentType("text/html;charset=utf-8");

        //获取ajax传递的参数，和获取表单数据的方式一样

        String no=request.getParameter("no");

        String name=request.getParameter("name");

        //此处省略连接数据库查询，直接返回成绩

        PrintWriter writer = response.getWriter();

        writer.write(name+"同学，你的总分是：600");

    }

}

说明

ajax请求的的url要和servlet配置的urlPatterns对应，这个地方很容易出错
servlet返回响应时，不管write()多少次，都只组成一个响应返回。

      PrintWriter writer = response.getWriter();

      writer.write("中国");

      writer.write("北京");

      PrintWriter writer = response.getWriter();

      writer.write("中国北京");

这2种方式完全等效，浏览器接受到的都是“中国北京”，“中国”“北京”之间没有空格。

使用ajax获取json对象示例

此种方式常用于后台向前端传送一个实体|JavaBean（一个实体的多个字段），比如查询一个学生的信息。

前端

<body>

<form>

    学号：<input type="text" id="no"><br />

    <button type="button" id="btn">查询学生信息</button>

</form>

<p id="show"></p>

<script src="js/jquery-3.4.1.min.js"></script>

<script>

    $("#btn").click(function () {

        $.ajax({

            url:"servlet/HandlerServlet",

            type:"post",

            data:{},

            dataType:"json",

            error:function () {

                console.log("ajax请求数据失败！");

            },

            success: function (data) {

                //浏览器把接受到的json数据作为js对象，可通过.调用属性

                var info = "姓名：" + data.name + ",年龄：" + data.age + "，成绩：" + data.score;

                $("#show").text(info);

                console.log(data);

            }

        })

    });

</script>

</body>

后台

@WebServlet("/servlet/HandlerServlet")

public class HandlerServlet extends HttpServlet {

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

        doGet(request,response);

    }

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

        request.setCharacterEncoding("utf-8");

        response.setContentType("text/html;charset=utf-8");

        //获取ajax传递的参数，和获取表单数据的方式一样

        String no=request.getParameter("no");

        //现在很多持久层框架都是把数据库返回的记录转化为JavaBean处理

        //此处省略连接数据库查询，得到Student类实例

        Student student = new Student(1, "张三", 20, 100);

        //使用fastjson将java对象转换为json字符串

        String jsonStr = JSON.toJSONString(student);



        PrintWriter writer = response.getWriter();

        writer.write(jsonStr);

    }

}

JSON.toJSONString()使用的是阿里的fastjson.jar，需要自己下载添加这个jar。

使用ajax获取json数组

此种方式用于后台向前端返回同一实体类的多个实例，比如查询总分大于600的学生的信息，可能有多条记录满足要求。

前端

<body>

  <button type="button" id="btn">查询学前三个学生的信息</button>

  <div id="show"></div>

  <script src="js/jquery-3.4.1.min.js"></script>

  <script>

    $("#btn").click(function () {

      $.ajax({

        url:"servlet/HandlerServlet",

        type:"post",

        data:{},

        dataType:"json",

        error:function () {

          console.log("ajax请求数据失败！");

        },

        success: function (data) {

          console.log(data);

          //遍历json数组

          for (var i=0;i<data.length;i++){

            //从json数组得到json对象

            var student = data[i];

            var info = "姓名：" + student.name + ",年龄：" + student.age + "，成绩：" + student.score;

            $("#show").append("<p>" + info + "</p>");

          }

        }

      })

    });

  </script>

  </body>

使用 data[下标].字段名的方式获取属性值。

后台

@WebServlet("/servlet/HandlerServlet")

public class HandlerServlet extends HttpServlet {

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

        doGet(request,response);

    }

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

        request.setCharacterEncoding("utf-8");

        response.setContentType("text/html;charset=utf-8");

        //获取ajax传递的参数，和获取表单数据的方式一样

        String no=request.getParameter("no");

        //现在很多持久层框架都是把数据库返回的记录转化为JavaBean处理

        //此处省略连接数据库查询，得到Student类的多个实例

        Student student1 = new Student(1, "张三", 20, 100);

        Student student2 = new Student(2, "李四", 19, 80);

        Student student3 = new Student(3, "王五", 20, 90);

        ArrayList<Student> list = new ArrayList<>();

        list.add(student1);

        list.add(student2);

        list.add(student3);

        //使用fastjson将java对象转换为json字符串

        String jsonStr = JSON.toJSONString(list);

        PrintWriter writer = response.getWriter();

        writer.write(jsonStr);

    }

}

使用ajax获取map类型的json数据

使用场景：前端向后台查询多个信息，这些信息不是同一实体类的实例。比如要查询考生人数、最高分考生的信息，考生人数是int型，最高分考生信息是Student类的实例。

前端

<body>

  <button type="button" id="btn">查询考生人数、最高分考生信息</button>

  <div id="show"></div>

  <script src="js/jquery-3.4.1.min.js"></script>

  <script>

    $("#btn").click(function () {

      $.ajax({

        url:"servlet/HandlerServlet",

        type:"post",

        data:{},

        dataType:"json",

        error:function () {

          console.log("ajax请求数据失败！");

        },

        success: function (data) {

          console.log(data);

          $("#show").append("<p>考生人数："+data.amount+"</p>");

          var student = data.student;

          var info = "姓名：" + student.name + "，年龄：" + student.age + "，成绩：" + student.score;

          $("#show").append("<p>最高分考生信息：" + info + "</p>");

        }

      })

    });

  </script>

  </body>

以 data.key 的方式获取对应的value。

后台

@WebServlet("/servlet/HandlerServlet")

public class HandlerServlet extends HttpServlet {

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

        doGet(request,response);

    }

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

        request.setCharacterEncoding("utf-8");

        response.setContentType("text/html;charset=utf-8");

        //获取ajax传递的参数，和获取表单数据的方式一样

        String no=request.getParameter("no");

        //现在很多后台框架都是把数据库返回的记录转化为JavaBean处理

        //此处省略连接数据库查询，得到Student类实例

        HashMap<String, Object> map = new HashMap<>();

        map.put("amount", 3000);

        map.put("student", new Student(1, "张三", 20, 680));

        //使用fastjson将java对象转换为json字符串

        String jsonStr = JSON.toJSONString(map);

        PrintWriter writer = response.getWriter();

        writer.write(jsonStr);

    }

}

map和json对象十分相似：都是以键值对的形式保存数据，key是String，value是Object。

所以后台map类型的数据可以以json的形式传给前端。

说明

前端使用了jq的ajax()方法，所以需要把jq的库文件包含进来
后台向前端传json数据时，使用了阿里巴巴的fastjson库，需要自己下载引入fastjson.jar
ajax还有一个常用选项 async：boolean，是否异步请求数据，默认为true 异步请求

async：true 异步，ajax向后台请求数据时，用户仍可以在页面上进行操作

async：false 同步，ajax向后台请求数据，浏览器锁定页面，用户不能在页面上进行操作，直到请求完成