js get和post请求实现代码解析

(编辑：jimmy 日期: 2025/5/13 浏览：3 次 )

这篇文章主要介绍了js get和post实现代码解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1、get

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script type="text/javascript">
    function checkusername() {
      // 1.获取ajax引擎
      var xhr = getXHR();

      // 2.调用open方法准备发送
      var url = 'checkUsername_ajax"msg").innerHTML = xhr.responseText;
        }
      };
    }
    
    function getXHR() {
      if(window.XMLHttpRequest)
      {
        return new window.XMLHttpRequest();
      } else {
        return new window.ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  </script>
</head>
<body>
  <form action="" method="get">
    <input type="text" name="username" id="username" onblur="checkusername()"/><br/><div id="msg"></div>
    <input type="text" name="address"/><br/>
    <input type="submit" value="login"/><br/>
  </form>
</body>
</html>

2、post

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script type="text/javascript">
    function checkusername() {
      // 1.获取ajax引擎
      var xhr = getXHR();

      // 2.调用open方法准备发送
      xhr.open('post','checkUsername_ajax',true);

      // 3.发送请求 (多个参数使用&符号连接)
      // xhr.send('username='+document.getElementById('username').value+'&address=nj');
      xhr.send('username='+document.getElementById('username').value);

      // 4.指定回调函数
      xhr.onreadystatechange = function () {
        // readystate是4并且status是200
        if(xhr.readyState == 4 && xhr.status == 200){
          document.getElementById("msg").innerHTML = xhr.responseText;
        }
      };
    }
    
    function getXHR() {
      if(window.XMLHttpRequest)
      {
        return new window.XMLHttpRequest();
      } else {
        return new window.ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  </script>
</head>
<body>
  <form action="" method="get">
    <input type="text" name="username" id="username" onblur="checkusername()"/><br/><div id="msg"></div>
    <input type="text" name="address"/><br/>
    <input type="submit" value="login"/><br/>
  </form>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：如何在vue项目中嵌入jsp页面的方法(2种)
下一篇：Windows下安装 node 的版本控制工具 nvm