Ajax实现局部数据交互的一个简单实例
想要实现的功能：利用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 实现用户名检查和省市名称查询二级联动的实例，希望大家多多批评指正！
