• <progress id="ics96"><track id="ics96"></track></progress>

    <dd id="ics96"><pre id="ics96"></pre></dd>
  • <span id="ics96"><pre id="ics96"></pre></span>
    1. <button id="ics96"></button>
      <dd id="ics96"></dd>

      當前位置:首頁>>編程技術

      AJax實現注冊用戶實時反饋

      點擊數:26477 更新時間:2014-04-06 15:20:00 來源: 昕竹軒網站設計-返回

      一、javascript 方式

      <script type="text/javascript">

      function createXMLHttpReq() else if (window.ActiveXObject) catch(oError)

          }

        }

        throw new Error ("不能創建XMLHttpRequest對象。");

      }

      var oXmlHttpReq = createXMLHttpReq();

       

      function sendRequest()

            oXmlHttpReq.open("POST", "checkusername.asp", true);

            // 如需將請求發送到服務器,我們使用 XMLHttpRequest 對象的 open() 和 send() 方法:

       oXmlHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            oXmlHttpReq.onreadystatechange = callback;

            oXmlHttpReq.send(sData);

            // 如果需要像 HTML 表單那樣 POST 數據,請使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中規定您希望發送的數據

          } catch(oErr)

       }

      }

      function callback()  else 

        }

      }

      function checkData()  else 

        if (username == "")  else 

        return status;

      }

      </script>


      <form  method="post" name="form1" id="form1" action="javascript:alert('用戶名:'+document.form1.txtUserName.value);" onsubmit="return checkData()">

        <div id="caption">注冊新用戶</div>

        <table border="0">

          <tr>

            <td><label for="txtUserName">用戶名:</label></td>

            <td><input name="txtUserName" type="text" id="txtUserName"onblur="sendRequest();" />

              <span id="msg1"></span></td>

          </tr>

          <tr>

            <td><label for="txtPassword">密 碼:</label></td>

            <td><input type="password" name="txtPassword" id="txtPassword" />

              <span id="msg2"></span></td>

          </tr>

          <tr>

            <td>&nbsp;</td>

            <td><input type="submit" name="btnReg" id="btnReg" value="提交" /></td>

          </tr>

        </table>

        

      說明:
      上述JavaScript腳本塊中定義了4個函數:createXMLHttpReq、sendRequest、callback和checkData,
      其中前3個與Ajax交互有關. 要檢查表單數據,可將checkData函數作為form1表單的submit事件處理程序;
      要實現Ajax交互,應將sendRequest函數作為txtUserName文本框的blur事件處理程序。
       此外,還要設置form1表單的action屬性,以便對表單數據進行處理。為此,應當網頁中表單和表單域
       屬性進行設置。
       
      二、Jquery 方式
       
        JQuery 對象 Ajax 交互操作進行了封裝。如果使用jQuery來實現Ajax交互過程,只需用對JQuery
        對象調用 load 方法(或其他方法)即可。在本例中,下面的語句通過AJax方式向ASP服務器頁面
        checkusername.asp 發送用戶名信息,然后將服務器返回的HTTP響應文本顯示在span元素中,并對
        span元素的文本顏色進行設置,真可謂畢其功于一役。
        
        $("#msg1").load("checkusername.asp",).css("color", "gray");
       
        調用load方法可加載遠程HTML文件代碼并插入DOM中,其中第1個參數指定要加載的HTML網頁網址,
        第2個參數是可選的,用于指定要發送到服務器的key/value數據。
        如果指定了第2個參數,則自動使用post方法向服務器放松數據。

      廣告位
      【責任編輯:CSW8923 (Top) 返回頁面頂端
      【必備推薦】(Top) 返回頁面頂端
      【精品案例】更多案例展示
      【最新留言】 (Top) 返回頁面頂端
      共有0條評論
      重要提示:
      你設置的聯系郵箱是*: (當有人給你留言回復之時,聯系郵箱可以及時通知你)
      我們建議你填寫正確的郵箱地址,如果你之前填寫郵箱地址是錯誤的可以通過 【修改資料】 來重新設置
      登錄 | 免費注冊 | 忘記密碼 | 郵箱:CSW8923@126.com     服務電話:17895923895   客服QQ:568441621 點擊這里給我發消息
      Copyright © 2014-2015 Htmcss.Com All Rights Reserved  版權所有昕竹軒網站設計 備案號:閩ICP備16024510號-4
      国产日韩Av无码免费一区二区三区_亚洲mm无码在线_国产亚洲中文日本不卡_四虎影视国产精品一区二区
    2. <progress id="ics96"><track id="ics96"></track></progress>

      <dd id="ics96"><pre id="ics96"></pre></dd>
    3. <span id="ics96"><pre id="ics96"></pre></span>
      1. <button id="ics96"></button>
        <dd id="ics96"></dd>
        關閉