XMLHttpRequest用法

在做登录注册时，由于想让前端和后端进行数据的交互，比如登录成功或失败，前端都弹出相应的提示窗口。可以用AJAX来实现，但是我想尝试一下使用JS自带的XMLHttpRequest。
使用XMLHttpRequest (XHR)对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这使得Web页面可以只更新页面的局部，而不影响用户的操作。

前端页面index.html

    <form  id="login" name="login">
      <label for="Username">Username:</label>
      <input type="text"  id="username" name="username" placeholder="Username" />
      <label for="Password">Password:</label>
      <input type="password" id="password" name="password" placeholder="Password" />
      <button type="button" id="signUp">Sign Up</button>
      <button type="button" id="signIn">Sign In</button>
    </form>

前端login.js中的sign_in函数部分

    // sign in
    function sign_in(){
        var XHR = new XMLHttpRequest();
        var FD = new FormData();
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        password = md5(password);
        FD.append('username', username);
        FD.append('password', password);

        XHR.addEventListener('error', function(){
            alert("fail, please login again");
        });
        XHR.onreadystatechange = function() {
            if(XHR.readyState == 4){
                if((XHR.status >= 200 && XHR.status < 300) || XHR.status == 304){
                    hide();
                    login_success(username);
                    alert(XHR.responseText);
                }else{
                    alert("It failed");
                }
            }
        }
        if(username != null && password != null){
            XHR.open("POST", '/api/signin');
            XHR.send(FD);
        }
        else{
            alert("Sorry, username and password cannot be empty!");
        }
    }
    // submit the form for sign in or sign up
    var signUp = document.getElementById('signUp');
    var signIn = document.getElementById('signIn')
    signUp.addEventListener('click', function(){
        sign_up();
    });
    signIn.addEventListener('click', function(){
        sign_in();
    })
});

由于要传递表单数据，因此把数据以FormData的格式存储和传递。注意FormData只能写不能读，所以在js中利用append给FormData写入数据后，不要尝试通过console.log读取FormData中的数据。FormData在传递到服务器端时是放在request的payload中，而不是body中，因此服务器端也需要引入相应的包才能读取FormData数据。

服务器端app.js 的signin路由部分

const multipart = require('connect-multiparty');
var multipartMiddleware= multipart();

router.post('/signin',multipartMiddleware, (req, res) => {
  console.log(req.body);
  var username = req.body.username;
  var password = req.body.password;
  let flag = false;
  users.forEach(user => {
    if(username === user.username){
      if(password == user.password){
        flag = 1;
        return;
      }
    }
  });
  if(flag == true){
    res.send('login success');
  }
  else{
    res.end('login fail,please check the username or password!')
  }
  return res.status(200);
});