首頁 > 開發者 > Ajax

一個簡單的Ajax登入例子

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1.view（loginAjax.jsp)

Code:
  1. <%@ page contentType="text/html;charset=UTF-8" language="java"%>   
  2. <head>   
  3.     <META http-equiv=Content-Type content="text/html; charset=UTF-8">   
  4. </head>   
  5. <script language="javascript">   
  6.     var XMLHttpReq = false;   
  7.     //建立XMLHttpRequest對象          
  8.     function createXMLHttpRequest() {   
  9.         if (window.XMLHttpRequest) { //Mozilla 瀏覽器   
  10.             XMLHttpReq = new XMLHttpRequest();   
  11.         } else if (window.ActiveXObject) { // IE瀏覽器   
  12.             try {   
  13.                 XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");   
  14.             } catch (e) {   
  15.                 try {   
  16.                     XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");   
  17.                 } catch (e) {   
  18.                 }   
  19.             }   
  20.         }   
  21.     }   
  22.     //發送請求函數   
  23.     function sendRequest(url) {   
  24.         createXMLHttpRequest();   
  25.         XMLHttpReq.open("GET", url, true);   
  26.         XMLHttpReq.onreadystatechange = processResponse;//指定響應函數   
  27.         XMLHttpReq.send(null); // 發送請求   
  28.     }   
  29.     // 處理返回資訊函數   
  30.     function processResponse() {   
  31.         if (XMLHttpReq.readyState == 4) { // 判斷對象狀態   
  32.     //  window.alert(XMLHttpReq.status); 測試   
  33.             if (XMLHttpReq.status == 200) { // 資訊已經成功返回，開始處理資訊   
  34.                 var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;   
  35.                 window.alert(res);   
  36.             } else { //頁面不正常   
  37.                 window.alert("您所請求的頁面有異常。");   
  38.             }   
  39.         }   
  40.     }   
  41.     // 身分識別驗證函數   
  42.     function userCheck() {   
  43.         var uname = document.myform.uname.value;   
  44.         var psw = document.myform.psw.value;   
  45.         if (uname == "") {   
  46.             window.alert("使用者名稱不可為空。");   
  47.             document.myform.uname.focus();   
  48.             return false;   
  49.         } else {    
  50.             sendRequest('loginAjax?uname=' + uname + '&psw=' + psw);   
  51.         }   
  52.     }   
  53. </script>   
  54.   
  55. <body vLink="#006666" link="#003366" bgColor="#E0F0F8">   
  56.     <img height="33" src="<%=request.getContextPath()%>/images/enter.gif"  
  57.         width="148">   
  58.        
  59.     <form action="" method="post" name="myform">   
  60.         使用者名稱：<input size="15" name="uname">   
  61.         <p>密  碼：<input type="password" size="15" name="psw">   
  62.         <p><input type="button" value="登入Ajax" onclick=userCheck();>   
  63.     </form>  

2.p21.loginAction.java

Code:
  1. package p21;   
  2.   
  3. import java.io.IOException;   
  4. import java.io.PrintWriter;   
  5. import javax.servlet.ServletConfig;   
  6. import javax.servlet.ServletException;   
  7. import javax.servlet.http.HttpServlet;   
  8. import javax.servlet.http.HttpServletRequest;   
  9. import javax.servlet.http.HttpServletResponse;   
  10.   
  11.   
  12. public class LoginAction extends HttpServlet {   
  13.        
  14.     private static final long serialVersionUID = 1L;   
  15.     public void init(ServletConfig config) throws ServletException {   
  16.     }   
  17.        
  18.     /*  
  19.      *  處理<GET> 要求方法.  
  20.      */  
  21.     protected void doGet(HttpServletRequest request, HttpServletResponse response)   
  22.     throws ServletException, IOException {   
  23.         //設定接收資訊的字元集   
  24.         request.setCharacterEncoding("UTF-8");   
  25.         //接收瀏覽器端提交的資訊   
  26.         String uname = request.getParameter("uname");   
  27.         String psw = request.getParameter("psw");          
  28.         //設定輸出資訊的格式及字元集           
  29.         response.setContentType("text/xml; charset=UTF-8");   
  30.         response.setHeader("Cache-Control", "no-cache");   
  31.         //建立輸出資料流對象   
  32.         PrintWriter out = response.getWriter();   
  33.         //依據驗證結果輸出不同的資料資訊   
  34.         out.println("<response>");     
  35.         System.out.println("來到servlet");   
  36.         if(uname.equals("nothing") && psw.equals("123")){   
  37.             out.println("<res>" + "熱烈的歡迎您!" + "</res>");   
  38.         }else{   
  39.             out.println("<res>" + "對不起,登入失敗！" + "</res>");   
  40.         }      
  41.         out.println("</response>");   
  42.         out.close();   
  43.     }   
  44.     /*  
  45.      *  處理<POST> 要求方法.  
  46.      */  
  47.     protected void doPost(HttpServletRequest request, HttpServletResponse response)   
  48.     throws ServletException, IOException {   
  49.        doGet(request, response);   
  50.     }   
  51. }   
  52.   
  53.   

3.web.xml配置

Code:
  1. <servlet>  
  2.   <servlet-name>loginAjax</servlet-name>  
  3.   <servlet-class>p21.LoginAction</servlet-class>  
  4. </servlet>  
  5. <servlet-mapping>  
  6.   <servlet-name>loginAjax</servlet-name>  
  7.   <url-pattern>/loginAjax</url-pattern>  
  8. </servlet-mapping>  

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More