《研磨struts2》第十四章 对Ajax的支持 之 14.1 Ajax基础
14.1 Ajax基础
14.1.1 Ajax概述
Ajax（Asynchronous JavaScript And XML）技术，通常翻译成“异步JavaScript和xml”，它能让应用程序以异步的方式连接到服务器，等待服务器处理后获取返回值，从而实现无需刷新页面就可以与后台通讯的方式。
Ajax技术其实是一个非常老的技术，2000年左右就已经有了，只不过一直没有得到重视，直到Google把这个技术应用到Gmail和Google Maps里面，其异步的功能特性迅速走红，从而引起业界广泛的关注，得到更多的应用。到了web2.0的时代，Ajax成为了web2.0的核心技术之一。
Ajax的核心技术包括：
- XMLHttpRequest对象：用来实现异步通讯的组件对象，是Ajax的核心技术
- Javascript：Ajax的编程脚本，可以通过Javascript来操作Ajax
- Dom（Document Object Model）模型：Javascript通过Dom跟页面进行交互
- XML：可扩展标记语言，用来封装交互的数据
虽然xml是Ajax的核心技术之一，但是完全可以不使用xml，而且现在在实际项目开发中，也大有使用JSON来代替xml的趋势。
14.1.2 XMLHttpRequest对象
这里简单的介绍一下Ajax的这个核心对象的基本用法：
1：如何初始化
要使用XMLHttpRequest对象，首先就是要初始化这个对象，示例代码如下：
<script language="javascript">
var myReq;
function t1(){
//对于IE浏览器,第一种方式
myReq = new ActiveXObject("Msxml2.XMLHTTP");
//对于IE浏览器,第二种方式
myReq = new ActiveXObject("Microsoft.XMLHTTP");
//对于Mozilla浏览器
myReq = new XMLHttpRequest();
}
</script> 2：XMLHttpRequest对象的属性
3：XMLHttpRequest对象的方法
14.1.3 Ajax示例
虽然不详细去讲述Ajax的知识，还是通过一个基本的示例来看看如何使用Ajax技术。更多Ajax的知识，有需要的朋友请参阅相应的Ajax资料。
使用Ajax来实现一个输入校验的功能，用户填写数据，当光标离开输入框后，自动到后台去校验输入是否正确，并给出相应的提示信息。
1：先来实现后台的功能
为了演示的简洁性，直接就在jsp里面实现。功能也很简单，就是判断用户的输入是否重复了，如果不重复，提示用户“输入正确”；如果重复了，提示用户“输入不正确，请重新输入”。
后台文件的名称为server.jsp，示例代码如下：
<%@ page contentType="text/html; charset=gb2312"%>
<%@ page import="java.util.*"%>
<head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>
<%
String account = request.getParameter("account");
//准备已经注册的数据,测试使用
Set<String> set = new HashSet<String>();
set.add("account1");
set.add("account2");
set.add("account3");
if(set.contains(account)){
out.print("输入不正确，请重新输入");
}else{
out.print("输入正确");
}
%> 2：实现前台页面的功能
在页面上除了简单的输入框之外，就是要实现Ajax的功能，当帐号信息输入完毕，光标离开的时候，提交到后台进行校验。
文件的名称为client.jsp，示例代码如下：
<%@ page contentType="text/html; charset=gb2312"%>
<head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>
<script language="javascript">
var myRequest;
function t1(){
//准备向后台传输的数据
var account = document.getElementById("account").value;
//Ajax
myRequest = new ActiveXObject("Msxml2.XMLHTTP");
myRequest.onreadystatechange = t2;
myRequest.open("GET","server.jsp?account="+account,true);
myRequest.send(null);
}
function t2(){
if(myRequest.readyState==4){
var ret = myRequest.responseText;
//后续处理
document.all("myDiv").innerHTML = ret;
}
}
</script>
<form action="" medhot="post">
<table>
<tr>
<td colspan=3 align=center>新用户注册</td>
</tr>
<tr>
<td>用户帐号：</td>
<td><input type="text" id="account" name="account" onblur="t1();"><font color=red>*</font></td>
<td><div id="myDiv"></div></td>
</tr>
<tr>
<td>用户密码：</td>
<td colspan=2><input type="password" id=""password" name="password"></td>
</tr>
<tr>
<td>重复密码：</td>
<td colspan=2><input type="password" id=""password2" name="password2"></td>
</tr>
<tr>
<td colspan=3 align=center><input type="submit" value="保存注册信息"></td>
</tr>
</table>
</form> 3：运行测试一下
先输入一个正确的，运行结果如下：
图14.1 Ajax示例一
再来输入一个重复的，比如“account1”之类的，运行结果如下：
图14.2 Ajax示例二
通过上面的示例，大家可以初步体会一下Ajax实现的方式，以及无需刷新页面即可与后台交互的实现。
私塾在线网站原创《研磨struts2》系列
转自请注明出处：【http://sishuok.com/forum/blogPost/list/0/4128.html】
欢迎访问http://sishuok.com获取更多内容
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo