class="com.zdsoft.action.UserIsExistAction"method="userIsExist">
4.编写javascript响应函数进行善后工作
首先定义一个响应函数test，关键代码如下：
functiontest（）{
}
然后在函数test中使用XMLHttpRequest对象的readyState属性判断后台是否执行（取值为4表示执行完毕），使用XMLHttpRequest对象的status属性判断执行是否成功（取值为200表示执行成功），关键代码如下：
if（xmlHttpReq.readyState==4）{//判断对象状态
if（xmlHttpReq.status==200）{//信息已经成功返回，开始处理信息
//善后工作的代码在此处编写
}else{//页面不正常
window.alert（"您所请求的页面有异常。
"）;
}
}
接着，在判断后台执行成功之后的if语句里边使用XMLHttpRequest对象的responseText属性获得后台返回的结果（得到的是一个字符串），关键代码如下：
varreturnParam=xmlHttpReq.responseText;
最后，根据得到的结果，在该if语句中编写善后工作的代码（提示用户名存在或不存在），关键代码如下：
if（returnParam=="true"）{
alert（'用户名已经存在!
'）;
}else{
alert（'用户名不存在，可以使用!
'）;
}
到此，整个任务就完成了。
运行的效果如图2.1-1a、2.1-1b所示。
根据任务提出问题（45-55分钟）
●ajax是什么？
●如何实现ajax？
问题解析（45-55分钟）
1.关于ajax
ajax是网页可以异步提交的一种技术。
异步提交的解释：
异步是相对于同步（如图2.1-2a所示）而言的，一般的网页，在提交到后台处理的时候是整个页面都提交的，在提交到后台进行处理的过程中，用户除了等待结果以外什么也做不了。
异步提交表现在于页面并不是全部提交的，只是局部提交，在局部提交进行后台处理的过程中，用户在页面没有进行提交的部分还可以操作，无需等待局部提交的完成，这样提高了用户的操作效率（如图2.1-2b所示）。
图2.1-2a经典Web应用模型（同步）
图2.1-2bAjaxWeb应用模型（异步）
Ajax技术的实现原理：
是使用XMLHttpRequest对象来实现。
XMLHttpRequest对象是系统对象，它的作用是：
负责局部提交到后台；负责跟踪后台的执行情况，并获得后台的执行结果；当后台执行完毕后，负责返回到前台调用用户定义的javascript函数进行善后操作。
2.实现ajax技术
Ajax技术运行的一般程序流程：
●前面页面触发事件调用javascript函数（通常自定义的函数）
●在javascript函数中编写代码创建XMLHttpRequest对象，提交部分数据到后台进行处理
●后台中使用java代码完成指定的业务逻辑并输出结果
●XMLHttpRequest获得后台执行的结果，及时调用程序员定义的javascript响应函数进行善后工作
根据这个流程，下面以一个“用户你好”的小例子来说明整个过程的代码编写。
【例子2.1-1】制作一个输入用户名的界面（界面中有一个用户名输入框和确定按钮）（如图2.1-3a所示）；当用户输入用户名之后点击确定按钮，弹出一对话框提示“xxx，你好！
”（xxx为用户输入的用户名）（如图2.1-3b所示）。
在整个过程中要求使用ajax技术局部提交到后台（后台处理：
仅仅在控制台输出用户名），而整个页面不能提交（不能跳转页面）。
图2.1-3a用户你好-输入用户名
图2.1-3b用户你好-提交结果
例子2.1-1步骤1：
根据流程“前面页面触发事件调用javascript函数”，编写本例子的页面（一个输入框和一个按钮）；触发事件为点击按钮的onclick事件，关键代码如下：
用户名：
代码中onclick="sendhelloworld（f1.username.value）;"的sendhelloworld（f1.username.value）就是本例要自定义的javascript函数。
我们需要通过此函数实现ajax。
例子2.1-1步骤2：
根据流程“在javascript函数中编写代码创建XMLHttpRequest对象，提交部分数据到后台struts2的action进行处理”，我们首先定义一个全局变量XMLHttpReq，接着定义一个名为sendhelloworld（）的函数，参数有一个，为需要传值的用户名，关键代码如下：
varxmlHttpReq;//全局变量，是XMLHttpRequest类型的对象
functionsendhelloworld（name）{
}
然后，在函数中编写代码创建XMLHttpRequest对象，关键代码如下：
//下面代码含义：
判断浏览器类型，根据不同浏览器调用系统函数创建XMLHttpRequest的对象到xmlHttpReq。
代码固定，照搬即可
if（window.XMLHttpRequest）{
xmlHttpReq=newXMLHttpRequest（）;
if（xmlHttpReq.overrideMimeType）{
xmlHttpReq.overrideMimeType（"text/xml"）;
}
}elseif（window.ActiveXObject）{
try{
xmlHttpReq=newActiveXObject（"Msxml2.XMLHTTP"）;
}catch（e）{
xmlHttpReq=newActiveXObject（"Microsoft.XMLHTTP"）;
}
}
if（!
xmlHttpReq）{
window.alert（"该浏览器不支持XMLHttpRequest！
"）;
return;
}
XMLHttpRequest对象xmlHttpReq创建完毕后，接下来就是使用对象xmlHttpReq的相关方法进行提交，具体提交过程有三个小步骤。
①设置提交参数。
调用XMLHttpRequest对象open方法来设置提交参数。
语法格式：
XMLHttpRequest对象.open（"提交方式","提交地址"）;
参数说明：
提交方式取值为get或post与表单提交方式相同，为避免乱码，建议用post；提交地址是action的名称。
本例的代码如下：
（其中helloworld1是action的名称）
xmlHttpReq.open（"POST","helloworld1"）;
②指定响应函数。
给XMLHttpRequest对象的onreadystatechange属性指定响应函数。
语法格式：
XMLHttpRequest对象.onreadystatechange=响应函数名;
响应函数是我们一般需要自定义的一个javascript函数，它会在程序提交到后台执行action完毕后被XMLHttpRequest对象自动调用执行，该函数是为了进行ajax处理完毕后的善后工作。
本例的代码如下：
（响应函数的名字取名为callbackhelloworld）
xmlHttpReq.onreadystatechange=callbackhelloworld;
③进行提交。
使用XMLHttpRequest对象的send方法进行提交。
语法格式：
xmlHttpReq.send（“参数名1=参数值1&参数名2=参数值2&…参数名n=参数值n”）;
send方法里边的参数是前台传递给后台的数据，以参数名=参数值的形式给出，多个数据之间用&符号隔开。
附加的一个小步骤：
中文乱码的处理。
由于send方法中可以传递数据到后台，如果数据中有中文，则需要增加对中文编码格式的处理语句，该语句设置提交的数据格式，必须在提交的代码之前加入：
（代码固定不变，照搬即可）
xmlHttpReq.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）;
最后，本例第三小步骤代码如下，将用户名作为参数传递到后台，参数名为username。
xmlHttpReq.send（"username="+name）;
例子2.1-1步骤3：
根据流程“后台中使用java代码完成指定的业务逻辑并输出结果”编写后台代码。
后台代码的业务逻辑是根据参数名username获得前台提交的用户名数据，然后打印到控制台，然后将获得的用户名再返回给前台。
编写action执行业务逻辑，并使用通过struts2提供的ServletActionContext类获得能响应信息给客户端的PrintWriter对象，并通过print方法将处理结果返回给前台，关键代码如下（类名为HelloWorld1Action，方法名为execute）：
Stringusername;
publicStringexecute（）throwsException{
//编码转换
Stringstr=newString（username.getBytes（"ISO8859_1"）,"UTF-8"）;
System.out.println（str）;
//输出信息：
获得response对象
HttpServletResponseresponse=ServletActionContext.getResponse（）;
//设置response的编码格式
response.setCharacterEncoding（"UTF-8"）;
//得到输出对象pw
PrintWriterpw=response.getWriter（）;
//使用输出对象pw输出信息
pw.print（str）;
returnnull;
}
publicStringgetUsername（）{
returnusername;
}
同时在struts.xml中声明该action，配置关键代码如下：
注：
因为在action的方法中已经调用了response对象来将处理后的信息从服务器端返回给客户端，所以在action方法中也没有必要再返回一个字符串对象给struts2框架让它做页面跳转（示范代码中返回的就是null）。
同时在struts.xml里该action的配置中,也不需要对该action配置任何result项，Ajax是异步传输，配置中加上result项是没有意义的。
例子2.1-1步骤4：
根据流程“XMLHttpRequest获得后台执行的结果，及时调用程序员定义的javascript响应函数进行善后工作”，首先定义一个在步骤2的第二个小步骤所指定的响应函数，本例为callbackhelloworld，关键代码如下：
functioncallbackhelloworld（）{
}
然后在函数callbackhelloworld中使用XMLHttpRequest对象的readyState属性判断后台是否执行（取值为4表示执行完毕），使用XMLHttpRequest对象的status属性判断执行是否成功（取值为200表示执行成功），关键代码如下：
if（xmlHttpReq.readyState==4）{//判断对象状态
if（xmlHttpReq.status==200）{//信息已经成功返回，开始处理信息
//善后工作的代码在此处编写
}else{//页面不正常
window.alert（"您所请求的页面有异常。
"）;
}
}
接着，在判断后台执行成功之后的if语句里边使用XMLHttpRequest对象的responseText属性获得后台返回的结果（得到的是一个字符串），关键代码如下：
varres=xmlHttpReq.responseText;
最后，根据得到的结果，在该if语句中编写善后工作的代码，本例是弹出提示“用户xxx，你好”，关键代码如下：
if（res.length>0）{
alert（res+",你好!
"）;
}
到此，整个ajax技术的实现过程就完成了。
本例运行的效果如图2.1-3a、2.1-3b所示。
任务实施（95-110分钟）
任务小结（5分钟）
作业
完成课堂任务
完成实验报告
升级会员 