Ajax實現區域性資料互動的一個簡單例項
阿新 • • 發佈：2018-11-29
想要實現的功能：利用Ajax技術通過點選一個<button>按鈕，然後在指定的文字框中輸出想要的值。
1、使用Jsp建立一個前端頁面。
1 <body> 2 <div style="text-align: center;"> 3 <div> 4 <input type="button" onclick="loadName()" value="Ajax獲取資料" /> <input 5 type="text" name="name" id="name" /> 6</div> 7 </div> 8 </body>
2、在Jsp頁面建立XMLHttpRequest物件，並且實現傳送請求和響應伺服器的功能。
1 <script type="text/javascript"> 2 function loadName() { 3 //獲取XMLHttpRequest物件（有些瀏覽器沒有XMLHttpRequest這個物件，所以獲取之前需要先判斷一下） 4 var xmlHttp; 5 if (window.XMLHttpRequest) {6 xmlHttp = new XMLHttpRequest(); 7 } else { 8 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 9 } 10 // alert("readyState狀態：" + xmlHttp.readyState + ";status狀態：" + xmlHttp.status); 11 xmlHttp.onreadystatechange = function() { 12 //alert("readState狀態：" + xmlHttp.readyState + ";status狀態：" + xmlHttp.status); 13 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 14 //alert("readState狀態：" + xmlHttp.readyState + ";status狀態：" + xmlHttp.status); 15 //document.getElementById("name").value = xmlHttp.responseText; 16 document.getElementById("name").value=xmlHttp.responseText; 17 } 18 } 19 xmlHttp.open("get", "getAjaxName", true); 20 xmlHttp.send(); 21 } 22 </script>
3、編寫後臺處理該請求的servlet類。
1 package com.java1234.web; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 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 public class GetAjaxNameServlet extends HttpServlet { 12 13 /** 14 * 15 */ 16 private static final long serialVersionUID = 1L; 17 18 @Override 19 protected void doGet(HttpServletRequest request, HttpServletResponse response) 20 throws ServletException, IOException { 21 this.doPost(request, response); 22 } 23 24 @Override 25 protected void doPost(HttpServletRequest request, HttpServletResponse response) 26 throws ServletException, IOException { 27 response.setContentType("text/html;charset=utf-8"); 28 PrintWriter out = response.getWriter(); 29 out.println("Ajax獲取到的資料"); 30 out.flush(); 31 out.close(); 32 } 33 34 }
4、配置web.xml檔案，進行程式碼功能的測試。
1 <servlet> 2 <servlet-name>getAjaxNameServlet</servlet-name> 3 <servlet-class>com.java1234.web.GetAjaxNameServlet</servlet-class> 4 </servlet> 5 <servlet-mapping> 6 <servlet-name>getAjaxNameServlet</servlet-name> 7 <url-pattern>/getAjaxName</url-pattern> 8 </servlet-mapping>
程式碼測試結果的截圖我就不在這上邊展示了，因為主要的目的是為了用一個簡單的例項說明Ajax要實現一個區域性資料互動的資料流程是什麼。我本人也是在摸索著學習，這篇文章幾乎沒啥文字敘述，上來直接就是擼程式碼，希望有相同興趣的小夥伴能多多提出你們寶貴的意見，大家相互學習，共同進步。接下來我會使用Ajax 實現使用者名稱檢查和省市名稱查詢二級聯動的例項，希望大家多多批評指正！