ajax javaweb项目实例,ajax在java+web中的应用实例.doc

ajax在javaweb中的应用实例

AJAX在Java Web中的应用实例

AJAX在Java Web中的实际应用：

实例一：会员注册唯一性检查TestAjax1

实例二：动态更新下拉列表TestAjaxXml6

实例三：刷新页面局部内容(TestAjaxUpdateCounter)7

实例四：交互式电子相册(TestAjaxPhoto)9

实例五：访问Web服务(TestAjaxWebService)11

实例六：创建工具提示(TestAjaxTool)12

实例一：会员注册唯一性检查TestAjax

会员注册唯一性检查的业务逻辑由一个名为CheckUser.java(见例程1)的HttpServlet来实现，CheckUser在web.xml中配置(见例程2)，然后在会员注册页index.htm(见例程3)中使用AJAX技术异步调用CheckUser完成会员注册有效性的检查。

操作步骤如下：

1. 首先，创建一个Web工程TestAjax，步骤如下图所示：

2. 然后，创建一个index.htm页面，在index.htm中放置一个表单用于提交验证数据，见例程3。

例程3　使用AJAX技术的测试页面index.htm

注册用户唯一性检查

//定义一个变量用于存放XMLHttpRequest对象

var xmlHttp;

//该函数用于创建一个XMLHttpRequest对象

function createXMLHttpRequest() {

if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

}

}

//这是一个启动AJAX异步通信的方法

function beginCheck(){

var tempLoginName = document.all.loginName.value;

if (tempLoginName == ""){//如果尚未输入注册名

alert("对不起，请您输入注册名!");

return;

}

//创建一个XMLHttpRequest对象

createXMLHttpRequest();

//将状态触发器绑定到一个函数

xmlHttp.onreadystatechange = processor;

//通过GET方法向指定的URL建立服务器的调用

xmlHttp.open("GET", "CheckUser?loginName="+tempLoginName);

//发送请求

xmlHttp.send(null);

}

//这是一用来处理状态改变的函数

function processor () {

//定义一个变量用于存放从服务器返回的响应结果

var responseContext;

if(xmlHttp.readyState == 4) { //如果响应完成

if(xmlHttp.status == 200) {//如果返回成功

//取出服务器的响应内容

responseContext = xmlHttp.responseText;

//如果注册名检查有效

if (responseContext.indexOf("true")!=-1){

alert("恭喜您，该注册名有效！");

}else{

alert("对不起，该注册名已被使用！");

}

}

}

}

请输入用户名：