原生js编写异步请求

^_^NeverStop

于 2023-02-05 16:35:55 发布

阅读量310

点赞数

文章标签： javascript 前端 json

本文链接：https://blog.youkuaiyun.com/weixin_45672607/article/details/128891536

版权

该代码示例展示了如何在HTML页面中使用原生JavaScript的XMLHttpRequest对象创建一个POST异步请求。当用户点击登录按钮时，获取表单中的手机号和密码，然后以JSON格式发送到指定的服务器端点进行登录验证。响应状态为200时，会弹出对话框显示服务器的响应文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生js编写异步请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="javascript:;">
    <input type="text" class="mobile" name="username"> <br>
    <input type="text" class="password" name="password"> <br>
    <button class="login">登陆</button>
</form>
<script>
  window.onload = function (){
      // 封装选择器
      var $ = name => document.querySelector(name);
      $(".login").onclick = function (){
          let _mobile = $(".mobile").value,
              _password = $(".password").value;
          sendData(_mobile,_password)
      }

      function sendData(mobile,password) {
          let xmlhttp = new XMLHttpRequest();
          xmlhttp.open("post","http://localhost:8080/login") // 异步
          xmlhttp.setRequestHeader("Content-Type","application/json") // 请求头
          xmlhttp.send(JSON.stringify({
              mobile,
              password
          }))
          xmlhttp.onreadystatechange = function (){
              if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                  alert(xmlhttp.responseText);
              }
          }
      }
  }
</script>
</body>
</html>