【前端開發系列】—— 別說你不會Ajax

本文轉載自查看原文 2014-09-23 19:18 4346 JavaScript

之前一直都是用封裝好的Ajax,所以一直很好奇它是如何使用和實現的。這里正好就進行一下學習，下面是Ajax的一個時間圖。

設置觸發條件

　　這里模擬一個使用場景，就是在用戶登陸時，異步的對用戶名以及密碼進行驗證。所以使用onBlur()觸發，onBlur函數在輸入框焦點遺失時，就會觸發。

 1     <form name="loginForm">
 2         <table>
 3             <tr>
 4                 <td>用戶名:<input type="text" name="username" onBlur="checkUsername()"></td>
 5             </tr>
 6             <tr>
 7                 <td><div id="usernameDiv"></div></td>
 8             </tr>
 9             <tr>
10                 <td>密 碼:<input type="password" name="password" onBlur="checkPassword()"></td>
11             </tr>
12             <tr>
13                 <td><div id="passwordDiv"></div></td>
14             </tr>
15         </table>
16     </form>

創建Ajax的對象

　　由於Ajax並不是一個統一的標准，因此各個瀏覽器有自己的創建方式，因此在創建時，需要進行瀏覽器的驗證，使用如下的驗證方法即可。

1 if(window.XMLHttpRequest){
2             req = new XMLHttpRequest();
3         }else if(window.ActiveXObject){
4             req = new ActiveXObject("Microsoft.XMLHTTP");
5         }

open() onreadystatechante() send()

3.1 open(),這個函數有三個參數，第一個是http的發送方式，常見的有GET和POST，我們這里使用GET，來傳送參數；第二個參數是一個url，這個url第一個作用是與后台的servlet進行匹配，第二個作用是傳送前台的數據到后台；第三個參數是個bool值，如果為true標識用異步的方式發送請求。

req.open("GET",url+"?username="+document.loginForm.username.value,true);

3.2 onreadystatechange 指定回調函數，當數據返回時，使用該函數進行處理。我們的處理函數是自己定義的usernameCallback

req.onreadystatechange = usernameCallback;

3.3 send函數用來發送創建好的請求。由於前面的參數已經添加到url后面，因此這里直接使用null作為參數就行了。

req.send(null);

　　自己定義的usernameCallback函數，用於把返回的字符串使用DOM方式寫入指定的div中。

　　在函數返回時，可以使用之前創建好的req對象，調用它的readystate 以及 status屬性，4表示XMLHttpRequest對象響應正常結束。200表示HTTP請求獲得正確的響應。

　　只有這兩個條件都滿足，才表明異步請求請求成功。

function usernameCallback(){
        if(req.readyState == 4){
            if(req.status == 200){
                var str = req.responseText;
                if(str.split("!")[0] == "Success"){
                    document.getElementById("usernameDiv").className = "black";
                }else{
                    document.getElementById("usernameDiv").className = "red";
                }
                document.getElementById("usernameDiv").innerHTML = str;
            }else{
                alert("username failed!");
            }
        }else{
            
        }
    }

通過url與后台的servlet關聯

<?xml version="1.0" encoding="GBK"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <servlet>
      <servlet-name>checkUsername</servlet-name>
    <servlet-class>usernameServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>checkUsername</servlet-name>
      <url-pattern>/checkUsername</url-pattern>
  </servlet-mapping>
  
  <servlet>
      <servlet-name>checkPassword</servlet-name>
    <servlet-class>passwordServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>checkPassword</servlet-name>
    <url-pattern>/checkPassword</url-pattern>
  </servlet-mapping>
</web-app>

簡單反饋

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/xml;charset=UTF-8");
        response.setHeader("Cache-Control", "no-cache");
        
        String username = request.getParameter("username");
//        System.out.println("username"+username);
        String str = "";
        
        if("xingoo".equals(username)){
            str += "Success!" + username;
        }else{
            str += "failed!" + username;
        }
        
        response.getWriter().write(str);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doGet(request,response);
    
    }

另一個驗證的servlet采用同樣的方式，這里就不再贅述了。下面會貼出所有的代碼。

源碼暴露

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7      .red {
 8          color:red;
 9          font-size: 20;
10      }
11      .black {
12          color: black;
13          font-size: 20;
14      }
15 </style>
16 <script language="javascript">
17     function checkUsername(){
18         var url = "checkUsername";
19         if(window.XMLHttpRequest){
20             req = new XMLHttpRequest();
21         }else if(window.ActiveXObject){
22             req = new ActiveXObject("Microsoft.XMLHTTP");
23         }
24         if(req){
25             req.open("GET",url+"?username="+document.loginForm.username.value,true);
26             req.onreadystatechange = usernameCallback;
27             req.send(null);
28         }
29     }
30     function checkPassword(){
31         var url = "checkPassword";
32         if(window.XMLHttpRequest){
33             req = new XMLHttpRequest();
34         }else if(window.ActiveXObject){
35             req = new ActiveXObject("Microsoft.XMLHTTP");
36         }
37         if(req){
38             req.open("GET",url+"?password="+document.loginForm.password.value,true);
39             req.onreadystatechange = passwordCallback;
40             req.send(null);
41         }
42     }
43     function usernameCallback(){
44         if(req.readyState == 4){
45             if(req.status == 200){
46                 var str = req.responseText;
47                 if(str.split("!")[0] == "Success"){
48                     document.getElementById("usernameDiv").className = "black";
49                 }else{
50                     document.getElementById("usernameDiv").className = "red";
51                 }
52                 document.getElementById("usernameDiv").innerHTML = str;
53             }else{
54                 alert("username failed!");
55             }
56         }else{
57             
58         }
59     }
60     function passwordCallback(){
61         if(req.readyState == 4){
62             if(req.status == 200){
63                 var str = req.responseText;
64                 if(str.split("!")[0] == "Success"){
65                     document.getElementById("passwordDiv").className = "black";
66                 }else{
67                     document.getElementById("passwordDiv").className = "red";
68                 }
69                 document.getElementById("passwordDiv").innerHTML = str;
70             }else{
71                 alert("password failed!");
72             }
73         }else{
74             
75         }
76     }
77 </script>
78 </head>
79 <body>
80     <form name="loginForm">
81         <table>
82             <tr>
83                 <td>用戶名:<input type="text" name="username" onBlur="checkUsername()"></td>
84             </tr>
85             <tr>
86                 <td><div id="usernameDiv"></div></td>
87             </tr>
88             <tr>
89                 <td>密 碼:<input type="password" name="password" onBlur="checkPassword()"></td>
90             </tr>
91             <tr>
92                 <td><div id="passwordDiv"></div></td>
93             </tr>
94         </table>
95     </form>
96 </body>
97 </html>

View Code

web.xml

<?xml version="1.0" encoding="GBK"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <servlet>
      <servlet-name>checkUsername</servlet-name>
    <servlet-class>usernameServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>checkUsername</servlet-name>
      <url-pattern>/checkUsername</url-pattern>
  </servlet-mapping>
  
  <servlet>
      <servlet-name>checkPassword</servlet-name>
    <servlet-class>passwordServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>checkPassword</servlet-name>
    <url-pattern>/checkPassword</url-pattern>
  </servlet-mapping>
</web-app>

View Code

usernameServlet.java

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class usernameServlet extends HttpServlet {
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/xml;charset=UTF-8");
        response.setHeader("Cache-Control", "no-cache");
        
        String username = request.getParameter("username");
//        System.out.println("username"+username);
        String str = "";
        
        if("xingoo".equals(username)){
            str += "Success!" + username;
        }else{
            str += "failed!" + username;
        }
        
        response.getWriter().write(str);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doGet(request,response);
    
    }
}

View Code

passwordServlet.java

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class passwordServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/xml;charset=UTF-8");
        response.setHeader("Cache-Control", "no-cache");
        
        String password = request.getParameter("password");
//        System.out.println("password"+password);
        String str = "";
        
        if("123".equals(password)){
            str += "Success!" + password;
        }else{
            str += "failed!" + password;
        }
        
        response.getWriter().write(str);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        doGet(request,response);
    
    }
}

View Code

運行效果

這里直接判斷返回狀態，進行樣式的改變

成功時的效果！

失敗時的效果！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue 開發系列（二） vue ajax 攔截 vue開發系列 vue ajax攔截 web前端開發教程系列-2 - 前端開發書籍分享 web前端開發教程系列-4 - 前端開發職業規划【自爆系列】淺談我前端開發的那些糗事基於Flask開發網站 -- 前端Ajax異步上傳文件到后台【前端工程化系列】簡談前端模塊化開發與開發規范 web前端開發教程系列-3 - 前端開發調試工具分享 web前端開發教程系列-1 - 前端開發編輯器介紹前端開發之彈出框系列教程二：Confirm確認框