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

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

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

1 <body>
2     <div style="text-align: center;">
3         <div>
4             <input type="button" οnclick="loadName()" value="Ajax获取数据" />&nbsp;&nbsp;<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 实现用户名检查和省市名称查询二级联动的实例，希望大家多多批评指正！

转载于:https://www.cnblogs.com/BaoZiY/p/10041490.html

Ajax实现局部数据交互的一个简单实例相关推荐

Ajax 前端后端数据交互
Ajax 前端/后端数据交互一概述同步: 一请求一响应,全局刷新异步: 多请求多响应,局部刷新 (默认为异步,效率高) 场景: 浏览网页时,未全局刷新,能更新数据的页面基本都使用了 ...
学习ARM反汇编工具objdump和一个简单实例
学习ARM反汇编工具objdump和一个简单实例 --参考朱有鹏ARM裸机编程 1.反汇编的原理&为什么需要反汇编 arm-linux-objdump -D led.elf > led_ ...
Ajax 前后端数据交互
ajax 数据交互今天又是奋斗的一天,行吧,来学习ajax ajax 数据交互什么是ajax? ajax的`优势` ajax的使用创建一个ajax对象配置这个对象发送请求接受返回过来的数据 ...
【转载】Ajax与Controller数据交互
转自:https://www.cnblogs.com/kasi/p/8443289.html 1.概念在ssm框架下实现Ajax与Controller之间各种类型数据的数据交互,从Ajax传值和Co ...
【Demo】idea搭建SpringBoot和AJAX前后端数据交互
此文章详细介绍了idea 搭建springboot步骤,以及简易的前后端通过ajax进行简单数据交互代码,二话不说,进入正题. 第一步.idea开发工具搭建springboot框架来看下整个项目结构 ...
mysql建立数据浏览器_一个简单的MySQL数据浏览器
一个简单的MySQL数据浏览器 2021-01-21 16:17:28679 这个程序可以用来浏览MySQL中的数据,您可以稍做修改就可以做出很不错的MySQL浏览器. */ /* ?cmd=db ? ...
mysql建立数据浏览器_一个简单的MySQL数据浏览器_php
这个程序可以用来浏览mysql中的数据,您可以稍做修改就可以做出很不错的MySQL浏览器. */ /* ?cmd=db ?cmd=table&db={} http://www.gaodaima ...
ASP.NET MVC Framework体验（1）：从一个简单实例开始
概述 12月10日微软发布了ASP.NET 3.5扩展的预览版,在其中包括了ASP.NET MVC Framework.ASP.NET AJAX改进.ASP.NET动态数据支持.ASP.NET SIl ...
C++ 容器的综合应用的一个简单实例——文本查询程序
[0. 需求] 最近在粗略学习<C++ Primer 4th>的容器内容,关联容器的章节末尾有个很不错的实例. 通过实现一个简单的文本查询程序,希望能够对C++的容器学习有更深的理解. 由 ...