Ajax实现局部数据交互的一个简单实例
生活随笔
收集整理的這篇文章主要介紹了
Ajax实现局部数据交互的一个简单实例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
想要實現(xiàn)的功能：利用Ajax技術通過點擊一個<button>按鈕，然后在指定的文本框中輸出想要的值。
1、使用Jsp創(chuàng)建一個前端頁面。
1 <body> 2 <div style="text-align: center;"> 3 <div> 4 <input type="button" οnclick="loadName()" value="Ajax獲取數(shù)據(jù)" /> <input 5 type="text" name="name" id="name" /> 6 </div> 7 </div> 8 </body>?
2、在Jsp頁面創(chuàng)建XMLHttpRequest對象，并且實現(xiàn)發(fā)送請求和響應服務器的功能。
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狀態(tài)：" + xmlHttp.readyState + ";status狀態(tài)：" + xmlHttp.status); 11 xmlHttp.onreadystatechange = function() { 12 //alert("readState狀態(tài)：" + xmlHttp.readyState + ";status狀態(tài)：" + xmlHttp.status); 13 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 14 //alert("readState狀態(tài)：" + xmlHttp.readyState + ";status狀態(tài)：" + 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獲取到的數(shù)據(jù)"); 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>代碼測試結(jié)果的截圖我就不在這上邊展示了，因為主要的目的是為了用一個簡單的實例說明Ajax要實現(xiàn)一個局部數(shù)據(jù)交互的數(shù)據(jù)流程是什么。我本人也是在摸索著學習，這篇文章幾乎沒啥文字敘述，上來直接就是擼代碼，希望有相同興趣的小伙伴能多多提出你們寶貴的意見，大家相互學習，共同進步。接下來我會使用Ajax 實現(xiàn)用戶名檢查和省市名稱查詢二級聯(lián)動的實例，希望大家多多批評指正！
轉(zhuǎn)載于:https://www.cnblogs.com/BaoZiY/p/10041490.html
總結(jié)
以上是生活随笔為你收集整理的Ajax实现局部数据交互的一个简单实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 线段树3——一些例题的题解
- 下一篇： 如何使用Bootstrap4显示和隐藏元