Ajax实现局部数据交互的一个简单实例
想要实现的功能：利用Ajax技术通过点击一个<button>按钮，然后在指定的文本框中输出想要的值。
1、使用Jsp创建一个前端页面。
<body>
<div style="text-align: center;">
<div>
<input type="button" onclick="loadName()" value="Ajax获取数据" /> <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实现局部数据交互的一个简单实例的更多相关文章
- GoAhead4.1.0 开发总结三（GoAction+Ajax实现局部数据交互）
环境 官方文档:https://www.embedthis.com/goahead/doc/ 源码下载: goahead-4.1.0-src.tgz 系统平台:Ubuntu 12.04.4 gcc v ...
- C++ 容器的综合应用的一个简单实例——文本查询程序
C++ 容器的综合应用的一个简单实例——文本查询程序 [0. 需求] 最近在粗略学习<C++ Primer 4th>的容器内容,关联容器的章节末尾有个很不错的实例.通过实现一个简单的文本查 ...
- 用PHP和Ajax进行前后台数据交互——以用户登录为例
很多网站中都有用户登录系统,要完成用户的注册和登陆,就一定要用到前后台的数据交互.在这里以简单的用户注册和登陆为例介绍一下前后台交互的大致流程. 首先,我们来做一个简单的登陆界面. 这里为了方便我使用 ...
- Ajax传递json数据简介和一个需要注意的小问题
Ajax传递json数据 Ajax操作与json数据格式在实际中的运用十分广泛,本文为大家介绍一个两者相结合的小案例: 项目结构 我们新建一个Django项目,在里面创建一个名为app01的应用: p ...
- 测开之路一百五十四：ajax+json前后台数据交互
在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...
- SpringMVC4+thymeleaf3的一个简单实例（篇一：基本环境）
首语:用SpringMVC和thymeleaf实现一个简单的应用,包括基本环境搭建,SpringMVC4和thymeleaf3的整合,页面参数的获取,页面参数验证,以及用MySQL保存数据.我会把步骤 ...
- MVC的一个简单实例
基本思路: 一个Regist.jsp注册页面,用于收集用户信息,发送请求给控制器Servlet:控制器层Servlet封装模型层对象 jBean,并调用其方法regiser实现用户信息的保存:模型层J ...
- Win32 API 多线程编程——一个简单实例(含消息参数传递)
Win32 API进行程序设计具有很多优点:应用程序执行代码小,运行效率高,但是他要求程序员编写的代码较多,且需要管理所有系统提供给程序的资源,要求程序员对Windows系统内核有一定的了解,会占用程 ...
- SpringMVC4+thymeleaf3的一个简单实例（篇五：页面和MySql的数据交互-展示以及存储）
这一篇将介绍怎样把页面数据保存的MySQL数据库,并将数据库内容展示到页面上.首先做一个基础工作,添加以下jar到lib:1: mysql-connector-Java-5.1.40-bin.jar ...
随机推荐
- tp3.2上传图片生成缩略图
//引入 use think\Image; /* * $name为表单上传的name值 * $filePath为为保存在入口文件夹public下面uploads/下面的文件夹名称,没有的话会自动创建 ...
- springboot的三种启动方式
一:IDE 运行Application这个类的main方法 二:在springboot的应用的根目录下运行mvn spring-boot:run 三:使用mvn install 生成jar后运行 先到 ...
- 2016-06-18 exshop第四天
昨天本来想完成用asset-pipeline替换掉resource插件的工作,但由于进行了对spring security插件的文档解读,同时面试了4个人,每个人耗费了30分钟,并且公司下午4:30组 ...
- windows搭建RocketMQ服务
写在前面: 1.基于rocketmq 4.2.0版本 2.64位 win10 系统 3.JDK 1.8 (注意,jdk路径一定不要有空格,不然执行相应的cmd命令时会报错) 4.其它需要的软件,mav ...
- P1156 垃圾陷阱 DP
题目描述 卡门――农夫约翰极其珍视的一条Holsteins奶牛――已经落了到“垃圾井”中.“垃圾井”是农夫们扔垃圾的地方,它的深度为D(2 \le D \le 100)D(2≤D≤100)英尺. 卡门 ...
- Python中GIL
GIL(global interpreter lock)全局解释器锁 python中GIL使得同一个时刻只有一个线程在一个cpu上执行,无法将多个线程映射到多个cpu上执行,但GIL并不会一直占有,它 ...
- Pandas学习1 --- 数据载入
import numpy as np import pandas as pd 数据加载 首先,我们需要将收集的数据加载到内存中,才能进行进一步的操作.pandas提供了非常多的读取数据的函数,分别应用 ...
- SMB溢出漏洞所需的SMB协议内容
来一张wireshark抓下的SMB包,再解读一下. 一个包的内容有 网卡 IPV4 TCP NetBIOS SMB SMB header SMB Command: xxx Error class: ...
- 004.NTP多层级架设
一 环境需求 1.1 需求 User-client:局域网所有节点主机: IN-NTP Server:隐藏于局域网内部的NTP服务器: Border-NTP:边界NTP服务器,用于同步外部时钟,同时对 ...
- [OC] 杂项
使用JSONModel的一个好处是,可以防止 [数据是NSNULL的时候,OC无法直接通过if(XX)来判空 ]引起的错误. 字符串与字符串对比不要使用 str1 != str2 这种写法,而用 ![ ...