使用原生AJAX完成任意异步交互效果（例：登录页面验证；在页面上打印ＪＳＯＮ文件；或将后端响应数据打印至控制台）。附上代码及效果截图。

以下是使用原生AJAX实现登录页面验证的例子：

HTML代码：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit" id="submit-btn">登录</button>
</form>
<div id="result"></div>

JS代码：

const form = document.querySelector('form');
const result = document.getElementById('result');

form.addEventListener('submit', event => {
  event.preventDefault(); // 阻止表单默认提交行为

  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/login');
  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
  xhr.onload = () => {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      result.innerText = data.message;
    } else {
      result.innerText = '登录失败，请重试！';
    }
  };
  xhr.onerror = () => {
    result.innerText = '网络错误，请检查网络连接！';
  };
  xhr.send(JSON.stringify({username, password}));
});

效果截图：