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

時間  2019-11-19
標籤 前端開發系列 別說 不會 ajax 欄目 Ajax 简体版
原文   原文鏈接

 

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

首先，須要設置觸發條件

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

 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並非一個統一的標準，所以各個瀏覽器有本身的建立方式，所以在建立時，須要進行瀏覽器的驗證，使用以下的驗證方法便可。html

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標識用異步的方式發送請求。java

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

3.2 onreadystatechange 指定回調函數，當數據返回時，使用該函數進行處理。咱們的處理函數是本身定義的usernameCallbackweb

req.onreadystatechange = usernameCallback;

3.3 send函數用來發送建立好的請求。因爲前面的參數已經添加到url後面，所以這裏直接使用null做爲參數就好了。瀏覽器

req.send(null);

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

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

　　只有這兩個條件都知足，才代表異步請求請求成功。ide

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>

　　在servlet中，進行簡單的驗證便可

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採用一樣的方式，這裏就再也不贅述了。下面會貼出全部的代碼。函數

源碼暴露

Login.html

 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

運行效果

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

成功時的效果！

失敗時的效果！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程