Ajax实现局部数据交互的一个简单实例

时间：2021-11-06 20:31:08

　　想要实现的功能：利用Ajax技术通过点击一个<button>按钮，然后在指定的文本框中输出想要的值。

1、使用Jsp创建一个前端页面。

 <body>

     <div style="text-align: center;">

         <div>

             <input type="button" onclick="loadName()" value="Ajax获取数据" />&nbsp;&nbsp;<input

                 type="text" name="name" id="name" />

         </div>

     </div>

 </body>

2、在Jsp页面创建XMLHttpRequest对象，并且实现发送请求和响应服务器的功能。

 <script type="text/javascript">

     function loadName() {

         //获取XMLHttpRequest对象（有些浏览器没有XMLHttpRequest这个对象，所以获取之前需要先判断一下）

         var xmlHttp;

         if (window.XMLHttpRequest) {

             xmlHttp = new XMLHttpRequest();

         } else {

             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

         }

     //    alert("readyState状态：" + xmlHttp.readyState + ";status状态："    + xmlHttp.status);

         xmlHttp.onreadystatechange = function() {

             //alert("readState状态：" + xmlHttp.readyState + ";status状态："    + xmlHttp.status);

             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                 //alert("readState状态：" + xmlHttp.readyState + ";status状态："    + xmlHttp.status);

                 //document.getElementById("name").value = xmlHttp.responseText;

                 document.getElementById("name").value=xmlHttp.responseText;

             }

         }

         xmlHttp.open("get", "getAjaxName", true);

         xmlHttp.send();

     }

 </script>

3、编写后台处理该请求的servlet类。

 package com.java1234.web;

 import java.io.IOException;

 import java.io.PrintWriter;

 import javax.servlet.ServletException;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 public class GetAjaxNameServlet extends HttpServlet {

     /**

      *

      */

     private static final long serialVersionUID = 1L;

     @Override

     protected void doGet(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         this.doPost(request, response);

     }

     @Override

     protected void doPost(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         response.setContentType("text/html;charset=utf-8");

         PrintWriter out = response.getWriter();

         out.println("Ajax获取到的数据");

         out.flush();

         out.close();

     }

 }

4、配置web.xml文件，进行代码功能的测试。

  <servlet>

       <servlet-name>getAjaxNameServlet</servlet-name>

       <servlet-class>com.java1234.web.GetAjaxNameServlet</servlet-class>

   </servlet>

   <servlet-mapping>

       <servlet-name>getAjaxNameServlet</servlet-name>

       <url-pattern>/getAjaxName</url-pattern>

   </servlet-mapping>

代码测试结果的截图我就不在这上边展示了，因为主要的目的是为了用一个简单的实例说明Ajax要实现一个局部数据交互的数据流程是什么。我本人也是在摸索着学习，这篇文章几乎没啥文字叙述，上来直接就是撸代码，希望有相同兴趣的小伙伴能多多提出你们宝贵的意见，大家相互学习，共同进步。接下来我会使用Ajax 实现用户名检查和省市名称查询二级联动的实例，希望大家多多批评指正！

相关文章