想要实现的功能：利用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 实现用户名检查和省市名称查询二级联动的实例，希望大家多多批评指正！

Ajax实现局部数据交互的一个简单实例的更多相关文章

  1. GoAhead4.1.0 开发总结三（GoAction+Ajax实现局部数据交互）

    环境 官方文档:https://www.embedthis.com/goahead/doc/ 源码下载: goahead-4.1.0-src.tgz 系统平台:Ubuntu 12.04.4 gcc v ...

  2. C++ 容器的综合应用的一个简单实例——文本查询程序

    C++ 容器的综合应用的一个简单实例——文本查询程序 [0. 需求] 最近在粗略学习<C++ Primer 4th>的容器内容,关联容器的章节末尾有个很不错的实例.通过实现一个简单的文本查 ...

  3. 用PHP和Ajax进行前后台数据交互——以用户登录为例

    很多网站中都有用户登录系统,要完成用户的注册和登陆,就一定要用到前后台的数据交互.在这里以简单的用户注册和登陆为例介绍一下前后台交互的大致流程. 首先,我们来做一个简单的登陆界面. 这里为了方便我使用 ...

  4. Ajax传递json数据简介和一个需要注意的小问题

    Ajax传递json数据 Ajax操作与json数据格式在实际中的运用十分广泛,本文为大家介绍一个两者相结合的小案例: 项目结构 我们新建一个Django项目,在里面创建一个名为app01的应用: p ...

  5. 测开之路一百五十四：ajax+json前后台数据交互

    在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...

  6. SpringMVC4+thymeleaf3的一个简单实例（篇一：基本环境）

    首语:用SpringMVC和thymeleaf实现一个简单的应用,包括基本环境搭建,SpringMVC4和thymeleaf3的整合,页面参数的获取,页面参数验证,以及用MySQL保存数据.我会把步骤 ...

  7. MVC的一个简单实例

    基本思路: 一个Regist.jsp注册页面,用于收集用户信息,发送请求给控制器Servlet:控制器层Servlet封装模型层对象 jBean,并调用其方法regiser实现用户信息的保存:模型层J ...

  8. Win32 API 多线程编程——一个简单实例(含消息参数传递)

    Win32 API进行程序设计具有很多优点:应用程序执行代码小,运行效率高,但是他要求程序员编写的代码较多,且需要管理所有系统提供给程序的资源,要求程序员对Windows系统内核有一定的了解,会占用程 ...

  9. SpringMVC4+thymeleaf3的一个简单实例（篇五：页面和MySql的数据交互-展示以及存储）

    这一篇将介绍怎样把页面数据保存的MySQL数据库,并将数据库内容展示到页面上.首先做一个基础工作,添加以下jar到lib:1: mysql-connector-Java-5.1.40-bin.jar ...

随机推荐

  1. exception: java.net.ConnectException: Connection refused; For more details see: http://wiki.apache.org/hadoop/ConnectionRefused

    1.虽然,不是大错,还说要贴一下,由于我运行run-example streaming.NetworkWordCount localhost 9999的测试案例,出现的错误,第一感觉就是Spark没有 ...

  2. [转] HTML5 Blob与ArrayBuffer、TypeArray和字符串String之间转换

    1.将String字符串转换成Blob对象 //将字符串 转换成 Blob 对象 var blob = new Blob(["Hello World!"], { type: 'te ...

  3. iTOP4412环境搭建：arm-linux-gcc: 没有那个文件或目录

    系统:vmware下的ubuntu14.04 对于iTOP4412自己搭建环境,在source /root/.bashrc后发现还是没有正常,调用arm-linux-gcc -v提示没有那个文件或目录 ...

  4. Openstack1 云计算与虚拟化概念

    一.云概念 二.虚拟化,云计算不等于虚拟化,但是云计算需要用到虚拟化的技术 1.服务器虚拟化 2.桌面虚拟化 3.应用虚拟化 三.区别 1.虚拟化是具体的技术. 2.云计算是交付使用的一种模式

  5. Python 事件驱动与异步IO

    一.事件驱动编程是一种编程范式,这里程序的执行流由外部事件来决定.它的特点是包含一个事件循环,当外部事件发生时使用回调机制来出发相应的处理.另外两种常见的编程范式是(单线程)同步以及多线程编程. 1. ...

  6. webapp用户身份认证方案 JSON WEB TOKEN 实现

    webapp用户身份认证方案 JSON WEB TOKEN 实现Deme示例,Java版 本项目依赖于下面jar包: nimbus-jose-jwt-4.13.1.jar (一款开源的成熟的JSON ...

  7. scrapy选择器归纳

    python 爬虫: srcrapy框架xpath和css选择器语法 Xpath基本语法 一.常用的路径表达式: 表达式 描述 实例 nodename 选取nodename节点的所有子节点 //div ...

  8. list set接口之间的区别

    list接口它的实现类,比如arraylist里面的值有序,并且可以重复.(有序指的是插入进去的顺序) set无序,且不可重复.(这里的无序就是指不是插入进去的顺序,但其实也不是真的无序,它会按照自己 ...

  9. Java版本翻转字符串

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1282题目描述: Java中的StringBuilder有一个字符串翻转函数,因此,可以先将输入的数字转 ...

  10. Shell学习之Bash变量详解(二)

    Shell学习之Bash变量详解 目录 Bash变量 Bash变量注意点 用户自定义变量 环境变量 位置参数变量 预定义变量 Bash变量 用户自定义变量:在Bash中由用户定义的变量. 环境变量:这 ...