又是一个第一次，第一次接触AJAX
突然发现有了AJAX网络交互的方式好像完全被颠覆了，习惯了点击请求后的等待，突然用到异步交互感觉不可思议，传统在一次被颠覆。
第一次AJAX程序，老套图直接上代码。
代码环境：Struts2 + Ajax
页面代码
<html>
<head>
<script type="text/javascript">
var xmlHttp;//定义个XMLHttp
//创建一个XMLHttprequest
function createXMLHttpRequest() {
//IE系列的浏览器
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//firefox等浏览器
else if (window.XMLHttpRequest) {
//实例化一个XMLHttprequest。
xmlHttp = new XMLHttpRequest();
}
}
//启动Ajax请求--GET
function startRequestGet() {
createXMLHttpRequest();
//注册回调方法
xmlHttp.onreadystatechange = handleStateChange;
var userName = document.getElementById("names").value ;
//设置提交方式，此处用的是GET
xmlHttp.open("GET", "ajaxAction?name="+userName, true);
xmlHttp.send(null);
}
//启动Ajax请求--POST
function startRequestPost() {
createXMLHttpRequest();
//注册回调方法
xmlHttp.onreadystatechange = handleStateChange;
var userName = document.getElementById("names").value ;
//设置提交方式，此处用的是GET
xmlHttp.open("GET", "ajaxAction", true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("name="+userName);
}
function handleStateChange() {
//判断是否和服务器端的交互完成，还要判断服务器段是否正确返回数据
if(xmlHttp.readyState == 4) {
//表示和服务器端的交互以完成
if(xmlHttp.status == 200) {
var message = xmlHttp.responseText;
//获得值的显示位置
var div = document.getElementById("message");
//在该位置显示值
div.innerHTML = message;
}
}
}
</script>
</head>
<body>
This is my Test AJAX page!!
<br>
<form action="ajaxAction" method="get">
<table>
<tr>
<td>
<input type="text" name="name" id="names" value="" onblur="startRequestGet()">
</td>
<td ><div id="message"></div> </td>
<td>
<input type="submit" value="submit">
</td>
<td>
<input type="button" value="button" onclick="startRequest()">
</td>
</tr>
</table>
</form>
</body>
</html>
Action代码
public class AjaxAction extends ActionSupport{
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String execute() throws Exception {
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=gbk");//解决乱码问题
response.setCharacterEncoding("GBK");//解决乱码问题
PrintWriter out = response.getWriter();
if(name.equals("cht")){
out.println(name+"用户名被占用");
System.out.println(name+"用户名被占用");
}else{
out.println(name+"该用户名可用");
System.out.println(name+"该用户名可用");
}
out.close();
return super.execute();
}
}
配置文件省略
分享到：
相关推荐
ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习...
### AJAX学习笔记 #### 一、引言 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。...
在这份超详细的Ajax学习笔记中，我们将深入探讨以下几个关键知识点： 1. **基础概念**：Ajax的核心是JavaScript对象XMLHttpRequest，它使得前端和后端能够进行异步通信。异步意味着用户在等待服务器响应时可以执行...
AJAX学习笔记。内含Java调用的两个实例，及JavaScript的ajax工具函数，可快速入门，也可当手册使用。个人精心整理，值得收藏。 更多：http://download.csdn.net/user/daillo/all
### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心，它负责在客户端与服务器之间发送异步请求，无需刷新整个页面即可实现局部数据更新。要使用 ...
**Ajax学习笔记代码详解** Ajax，全称Asynchronous JavaScript and XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这种技术的...
### Ajax学习笔记精要 #### 一、Ajax概述 ##### 1.1 什么是Ajax？ Ajax，全称为Asynchronous JavaScript and XML（异步的JavaScript和XML），是一种用于改善网页应用性能的技术。它允许网页在无需重新加载整个...
**标题：“AJAX学习笔记1”** 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。AJAX的核心是利用...
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
jQuery+AJAX学习笔记
以下是一份详细的Ajax学习笔记，涵盖了其基本概念、工作原理、优势与限制，以及实际应用。 ### 一、基本概念 Ajax的核心是JavaScript对象XMLHttpRequest（XHR），它允许浏览器在后台与服务器进行通信，而不会打断...
web前端开发AJAX学习笔记
### Head First Ajax 学习笔记知识点总结 #### 一、异步请求与AJAX概念 - **异步请求**：允许页面在发送请求时继续执行后续任务，无需等待服务器响应，提高了用户体验。 - **AJAX (Asynchronous JavaScript and ...
Ajax 学习笔记(1).rtf
从给定的文件信息来看，这是一份详细的ZK-AJAX学习笔记，记录了从准备环境、下载运行ZK到深入学习各个组件的过程。ZK是一款基于Ajax的开源Web应用框架，它允许开发者使用类似桌面应用的组件来构建Web应用，而无需...
以下是夏玉保整理的Ajax学习笔记的关键点： 1. **处理IE缓存问题**： Internet Explorer浏览器在执行Ajax请求时，有时会缓存请求结果，导致即使服务器上的数据已更新，客户端仍显示旧的数据。为解决这个问题，通常...
AJAX学习笔记忘记了看一眼