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("我已經收到你的來信了");
  }