ajax封装、fetch的使用，原生js+ajax、js+fetch实现登录保存token到localStorage中，跳转用户页

以下是使用原生JavaScript和Ajax以及使用Fetch的示例代码，实现登录并将Token保存到localStorage中。

使用原生JavaScript和Ajax的示例：

// 登录函数
function login(username, password) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/api/login", true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      localStorage.setItem('token', response.token);
      // 登录成功后的操作
    } else if (xhr.status !== 200) {
      // 处理错误
    }
  };
  xhr.send(JSON.stringify({ username: username, password: password }));
}

使用Fetch的示例：

// 登录函数
function login(username, password) {
  fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username: username, password: password })
  })
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    localStorage.setItem('token', data.token);
    // 登录成功后的操作
  })
  .catch(error => {
    console.error('登录失败:', error);
  });
}

在这两个示例中，我们都发送了一个POST请求到/api/login，并在收到服务器的响应后，将返回的token保存到localStorage中。如果使用Ajax，我们需要处理xhr.readyState和xhr.status，而使用Fetch时，我们可以利用response.ok来简化错误处理，并使用Promise链进行异步操作。