當前位置 主頁 > 網站技術 > 代碼類 > 最大化 縮小

    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站長之家。

    下一篇:沒有了
教我怎样炒股