JavaScript实现Struts2+Ajax返回文本字符串

小白我最近开始研究Ajax，从头开始，用到Struts2+Ajax返回文本字符串的时候发现网上用原生JavaScript实现的并不是很多，多半是Struts2+Ajax+JQuery+JSON等实现的。所以小白写了一篇小文，献丑了。

如果有什么不妥的地方，请各位大神批评指正，谢谢。

本文例子主要是实现用户输入用户名之后，当输入框失去焦点的时候检测用户名是否已经存在。

用户页面， register.html：

Html代码

1. <li>
2. <div class="inputInfo">
3. <span>帐号</span>
4. <input type="text" value="" class="inputText" id="name"/>
5. </div>
6. </li>
7. <li>
8. <div class="inputInfo">
9. <span>密码</span>
10. <input type="password" class="inputText" id="password"/>
11. </div>
12. </li>
14. <!-- 显示返回文本字符串 -->
15. <div id="showResponseText"></div>

<li>
	<div class="inputInfo">
		<span>帐号</span>
                <input type="text" value="" class="inputText" id="name"/>
        </div>
</li>
<li>
	<div class="inputInfo">
		<span>密码</span>
                <input type="password" class="inputText" id="password"/>
	</div>
</li>

<!-- 显示返回文本字符串 -->
<div id="showResponseText"></div>

工具包utils.js用来获取请求request。 utils.js：

Js代码

1. // JavaScript Document
2. utils={
3. createRequest:function(){
4. var request ;
5. try{
6. request = new XMLHttpRequest();
7. }catch(tryMS){
8. try{
9. request = new ActiveXObject("Msxml2.XMLHTTP");
10. }catch(otherMS){
11. try{
12. request = new ActiveXObject("Microsoft.XMLHTTP");
13. }catch(failed){
14. request = null;
15. }
16. }
17. }
18. return request;
19. }
20. };

// JavaScript Document
utils={
	createRequest:function(){
		var request ;
		try{
			request = new XMLHttpRequest();
			}catch(tryMS){
				try{
					request = new ActiveXObject("Msxml2.XMLHTTP");
					}catch(otherMS){
						try{
							request = new ActiveXObject("Microsoft.XMLHTTP");
							}catch(failed){
								request = null;
								}
						}
				} 
		return request;
		}
	};

脚本操作， register.js

Js代码

1. // JavaScript Document
3. register={
4. init:function(){
5. document.getElementById('name').onblur = register.checkUserName;
6. },
7. checkUserName:function(){
8. request = utils.createRequest();
9. if(request == null){
10. alert("create request failed");
11. }
12. else{
13. var nameValue = document.getElementById('name').value;
14. var url = "ajax_register!checkUserName?userName="+nameValue;
15. request.onreadystatechange = register.showUserNameStatus;
17. request.open("post",url,true);
19. request.send(null);
20. }
21. },
23. showUserNameStatus:function(){
24. if(request.readyState == 4){
25. if(request.status ==200){
26. document.getElementById("showResponseText").innerHTML=request.responseText;
27. }
28. }
29. }
30. };
32. window.onload = register.init;

// JavaScript Document

register={
	init:function(){
		document.getElementById('name').onblur = register.checkUserName;
		},
	checkUserName:function(){
		request = utils.createRequest();
		if(request ==  null){
			alert("create request failed");
			}
		else{
			var nameValue = document.getElementById('name').value;
			var url = "ajax_register!checkUserName?userName="+nameValue;		
			request.onreadystatechange = register.showUserNameStatus;
			
			request.open("post",url,true);
			
			request.send(null);
			}
		},
	
	showUserNameStatus:function(){
		if(request.readyState == 4){
			if(request.status ==200){
				document.getElementById("showResponseText").innerHTML=request.responseText;
				}
			}
		}
	};

window.onload = register.init;

Struts2的配置文件编写， Struts.xml：

Xml代码

1. <action name="ajax_register" class="customer.action.Ajax_RegisterAction">
2. <result type="stream">
3. <param name="contentType">text/plain</param>
4. <param name="inputName">inputStream</param>
5. </result>
6. </action>

<action name="ajax_register" class="customer.action.Ajax_RegisterAction">
		<result type="stream">
			<param name="contentType">text/plain</param>
			<param name="inputName">inputStream</param>
		</result>
</action>

action的编写， Ajax_RegisterAction.java：

Java代码

1. import java.io.InputStream;
2. import java.io.StringBufferInputStream;
4. import com.opensymphony.xwork2.ActionSupport;
6. import customer.service.Register;
7. import customer.service.RegisterImpl;
9. public class Ajax_RegisterAction extends ActionSupport {
11. /**
12. *
13. */
14. private static final long serialVersionUID = 1L;
16. private InputStream inputStream;
19. public InputStream getInputStream() {
20. return inputStream;
21. }
24. public void setInputStream(InputStream inputStream) {
25. this.inputStream = inputStream;
26. }
29. // service类
30. private Register register = new RegisterImpl();
32. private String userName;
35. public String getUserName() {
36. return userName;
37. }
39. // 检查userName是否重复
40. public String checkUserName(){
41. String text ="";
42. if(!register.checkNameExist(userName)){
43. text = "yes";
44. }else{
45. text = "no";
46. }
47. getResponseText(text);
48. return SUCCESS;
49. }
51. // 获取返回文本
52. public void getResponseText(String text){
53. inputStream = new StringBufferInputStream(text);
54. }