Ajax原理异步对象的使用

Ajax原理异步对象的使用

在js中创建和管理异步对象
1.使用XmlHttpRequest()对象发送异步请求

 <p>局部刷新计算ajax</p>
  <div>
    姓名：<input type="text" id="name"/><br>
    体重：<input type="text" id="w"/><br>
    升高：<input type="text" id="h"><br>
    <input type="button" onclick="doajax()" value="计算BMI">
  </div>

<script type="text/javascript">
    //使用内存中的异步对象，代替浏览器发起请求，异步对象使用js创建和管理

    var doajax = function (){
      //1.创建异步对象
      var xmlHttp = new XMLHttpRequest();
      //2.把绑定事件
      xmlHttp.onreadystatechange = function () {
        //处理服务器返回的数据并且刷新页面
       console.log(xmlHttp.readyState+"|status"+xmlHttp.status)
        if(xmlHttp.readyState ==4 && xmlHttp.status == 200){
          alert(xmlHttp.responseText);
        }

      }
      //3.初始请求数据
      xmlHttp.open("get","bmiServlet",true);
      //4.发起异步请求
      xmlHttp.send();
    }

  </script>

其中readyState对应异步对象的五个状态同时五个状体分别为0 1 2 3 4
0对应异步对象的创建 new XmlHttpRequest（）
1初始化异步对象 调用异步对象.open()方法
2发送请求调用异步对象.send()方法
3异步对象从服务器获取到了数据
4开发人员处理数据
status对应状态码200代表请求和和响应成功

在servlet中获取请求

@WebServlet(urlPatterns = "/bmiServlet")
public class BmiServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws servletexception, IOException {
        //
        System.out.println("ajax发送了请求");

        PrintWriter writer = resp.getWriter();
        writer.println("helloAjax");
        writer.flush();
        writer.close();
    }
}