当前位置 主页 > 网站技术 > 代码类 >

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

    栏目:代码类 时间:2020-02-06 12:07

    这篇文章主要介绍了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?username='+document.getElementById('username').value;
          console.log(url);
          xhr.open('get',url,true);
    
          // 3.发送请求
          xhr.send();
    
          // 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"  onblur="checkusername()"/><br/><div ></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"  onblur="checkusername()"/><br/><div ></div>
        <input type="text" name="address"/><br/>
        <input type="submit" value="login"/><br/>
      </form>
    </body>
    </html>

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