2021-01-04

1 Ajax异步请求

Ajax是一种实现局部刷新的动态网页开发技术，重点在于可以快速高效的实现局部数据的动态改变。

同步：所有的操作都需要按照顺序来执行，前面的未执行完，后面的就需要一直等待（安全性高，效率很低）

异步：前一个的操作结果不影响后一个任务的执行，且可以同时进行（效率高）

1.1 原生Ajaxshixan

需求：点击按钮，向后台发送请求，将后台返回的结果在前端页面中显示出来

//获取元素
let btn = document.getElementsByTagName("button")[0];
//绑定事件
btn.onclick = function(){
  //使用Ajax发送请求到后台
  var xmlhttp;
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  //指定请求地址及请求类型
  xmlhttp.open("GET","ajaxServlet");
  //发送请求
  xmlhttp.send();

  //指定回调函数，对响应的结果进行处理
  xmlhttp.onreadystatechange = function(){
    //代表请求已完成
    if(xmlhttp.readyState == 4){
      //响应正常
      if(xmlhttp.status == 200){
        //获取影响结果
        alert(xmlhttp.responseText);
      }
    }
  }
}

//设置编码
req.setCharacterEncoding("utf-8");
//返回文本数据(使用数据打印流返回结果)
PrintWriter out = resp.getWriter();
out.write("hello Ajax");
out.close();

常见的响应状态码

状态码	描述
200	响应成功
404	服务器找不到请求资源（通常是请求路径错误）
500	服务器内部错误（通常是Java代码出现了异常）
403	服务器拒绝请求（请求参数不正确）
414	请求地址过长（需要改为post请求）

1.2 jQuery中的Ajax

jQuery中的Ajax简化了原生Ajax的使用方式，同时提供了多个参数的配置，更加灵活、方便

需求：请求后台数据，在前端页面中渲染

$.ajax({
  /*指定请求地址*/
  url: "ajaxServlet",
  /*指定请求类型，jQuery1.9之前使用type属性*/
  method: "post",
  /*指定要提交的参数，若没有参数可以不写*/
  data:{
    "key":"ajax",
    "val":"haha"
  },
  /*指定期望后台返回的数据类型，默认是string*/
  dataType: "json",
  /*指定请求成功后的回调函数，参数为返回的数据对象*/
  success:function(resultData){
    $.each(resultData,function(index,json){
      $('table').append("<tr><td>"+json.eno+"</td><td>"+json.ename+"</td><td>"+
                        json.sex+"</td><td>"+json.phone+"</td><td>"+json.dno+"</td></tr>");
    })
  }
});

//设置编码
req.setCharacterEncoding("utf-8");
//返回的数据要以HTML的格式存在
resp.setContentType("text/html;charset=utf8");
//返回文本数据(使用数据打印流返回结果)
PrintWriter out = resp.getWriter();
//模拟数据列表
List<Emp> empList = new ArrayList<>();
empList.add(new Emp(1,"张飞","男","123456789",10));
empList.add(new Emp(2,"刘备","男","123456789",10));
empList.add(new Emp(3,"小乔","女","123456789",20));
empList.add(new Emp(4,"大乔","女","123456789",20));
//将java中的集合转换为json类型的字符串，返回给前端
String jsonStr = JSON.toJSONString(empList);
out.write(jsonStr);
out.close();

需求：Ajax请求添加数据，传递json字符串

$.ajax({
  url: 'addEmpServlet',
  method:"post",
  /*设置请求参数类型为json*/
  contentType:"application/json;charset=utf-8",
  /*将json对象转换为字符串进行传递*/
  data:JSON.stringify({
    "ename":$('input:eq(0)').val(),
    "phone":$('input:eq(1)').val(),
    "dno":$('input:eq(2)').val()
  }),
  success:function(data){
    console.log(data);
  }
})

try{
  BufferedReader br = new BufferedReader(new InputStreamReader(
    (ServletInputStream)req.getInputStream(), "utf-8"));
  StringBuffer sb = new StringBuffer("");
  String temp;
  while ((temp = br.readLine()) != null) {
    sb.append(temp);
  }
  br.close();
  //获取到的json字符串
  String acceptjson = sb.toString();
  //将json字符串转为jsonobject对象
  Emp emp = JSONObject.parseObject(acceptjson, Emp.class);
  //将jsonobject对象转为java对象
  System.out.println(emp);

} catch (Exception e){
  e.printStackTrace();
}

注意

Java中无法直接读取json对象，需要通过第三方工具将对应的json字符串转换为对应的JavaBean，本课程中使用的是阿里提供的fastJson

request.getParameter()只能获取请求头中的信息，JSON.stringify()将数据设置在了请求体中，需要使用流进行读取，再抓换为bean对象