JS实现异步提交

• 什么是XMLHttpRequest？

  • XMLHttpRequest对象用于在后台与服务器交换数据

• XMLHttpRequst的作用

  • 在不重新加载页面的情况下更新网页 

  • 在页面已加载后从服务器请求数据

  • 在页面已加载后从服务器接收数据

  • 在后台向服务器发送数据

• 若出现Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
  • 设置请求头必须在open打开之后，send之前
• JS实现异步提交
  

  <!--
      onchange触发事件必须满足两个条件：
      （1）当前对象属性发生改变
      （2）当前对象失去焦点
   -->
  <input type="text" name="username" id="username" placeholder="请输入用户名" >

  var username = document.getElementById("username");

  /**
   * 获取XMLHttpRequestObject对象
   */
  function getXMLHttpRequestObject(url, param) {
      //创建XMLHttpRequest对象
      var xmlhttp;
      //为了应对所有现代浏览器，检查是否支持XMLHttpRequst，若支持则创建XMLHttpRequest对象，若不支持，则创建ActiveXObject对象
      if (window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
  
      } else {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      //规定请求的类型、URL、是否异步请求
      xmlhttp.open('get', url + '?' + param, true);
      //添加请求头必须在open打开之后，send之前
      //想请求添加Http请求头
      xmlhttp.setRequestHeader("Context-type", "application/x-www-form-urlencoded");
      //将请求发送到服务器
      xmlhttp.send();
  
      return xmlhttp;
  }

  /**
   * 验证用户名
   */
  username.onchange = function () {
  
      var usernameValue = username.value;
      var param = "username=" + usernameValue
      var url = "/register";
      var xmlhttp = getXMLHttpRequestObject(url, param);
      //设置监听函数，若为true时，在事件中的就绪状态时执行函数
      xmlhttp.onreadystatechange = function () {
          //判断请求是否成功，每当readyState属性改变时，就会调用该函数
          //readyState的状态：0（请求未初始化）、1（服务器连接已建立）、2（请求已接收）、3（请求处理中）、4（请求已完成，且响应已就绪）
          //status的状态：200（ok），404（未找到页面）
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  
              //获取服务器的响应，通过
              //responseText：获取字符串形式的响应数据
              //responseXML：获取XML形式的响应数据
              console.log(xmlhttp.responseText);
          }
      }
  
  }

  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  
      String username = req.getParameter("username");
      resp.setContentType("text/html;charset=utf-8");
      PrintWriter out = resp.getWriter();
      out.println("我已经收到你的来信了");
  }