ajax学习（一）小例子

Ajax实现点击页面上的按钮，触发页面每隔1秒就自动添加一个文本框并在文本框中显示0~100的随即数，一共显示10次。
prompt.jsp中的代码

var promptValue;//后台产生的随即值
var xmlhttpreq = false;//页面request对象
var promptKey;
//创建xmlhttprequest对象    
function createxmlhttprequest() {
	//alert('createxmlhttprequest');
        xmlhttpreq = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            xmlhttpreq = new XMLHttpRequest();
            if (xmlhttpreq.overrideMimeType) {
                xmlhttpreq.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                xmlhttpreq = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlhttpreq = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!xmlhttpreq) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
}

//发送请求函数
function getprompt() {
	//alert('getprompt');
	createxmlhttprequest();
	var url = "ajaxTest.action";//我使用的是struts2的Action
	xmlhttpreq.open('GET', url, true);
	xmlhttpreq.onreadystatechange = processresponse;//指定响应函数
	xmlhttpreq.send(null);  // 发送请求
}

// 处理返回信息函数
function processresponse() {
	//alert('processresponse');
	//alert(xmlhttpreq.readyState);
	if (xmlhttpreq.readyState == 4) { // 判断对象状态
		if (xmlhttpreq.status == 200) { 
                   // 信息已经成功返回，开始处理信息
			alert(xmlhttpreq.responseXML.xml);
			setprompt(xmlhttpreq.responseXML);
		} else { //页面不正常
			window.alert("\u60a8\u6240\u8bf7\u6c42\u7684\u9875\u9762\u6709\u5f02\u5e38\u3002");
		}
	}
}

// 设置新值
function setprompt(xmlValue) {
	//alert('setprompt');
	var val = 
               xmlValue.getElementsByTagName('promptKey');
	promptValue = val[0].text;
	addTableRow();
}
var counter = 0;
function addinput(){
	//alert('addinput');
	timer=window.setTimeout(addinput,1000);//每隔1秒就递归调用
	getprompt();
	counter++;
	if(counter==10){	
	     window.clearTimeout(timer);//停止自动调用
	}	
}

var a = false;
function addTableRow(){//插入一行html
	if(a==false){
            a = document.getElementById("mytable").rows.length
	}
	//alert('addTableRow');
	//alert(a);
	//找到表节点
	var tableNode = document.getElementById("mytable");
	//插入到多少行（从0开始）
	var trNode =  tableNode.insertRow(a);
	var tdNode = trNode.insertCell(0);
	var inputNode = document.createElement("input"); 
    //inputNode.setAttribute("name",text);
   //如果是新创建的
    inputNode.setAttribute("type","text");   
    inputNode.setAttribute("value",promptValue); 
    alert(promptValue);
 	tdNode.appendChild(inputNode);     
	//自增长
	a++;
}

下面是prompt.jsp中的部分html代码：

<table id="mytable">
<input type="button" id="but" onclick="addinput()" value="start"/>

后台java处理类，生成一个随机数包装成xml格式返回到客户端。
下面是代码，我用的是struts2的Action来代替一般的Servlet：

public class TestAjax extends ActionSupport {
	
	/*
	 * (non-Javadoc)
	 * 
	 * @see com.opensymphony.xwork2.ActionSupport#execute()
	 */
	public String ajaxTest() throws Exception {
		// TODO Auto-generated method stub

		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/xml; charset=UTF-8");

		response.setHeader("Cache-Control", "no-cache");

		final PrintWriter out = response.getWriter();
		
		out.println("<response>");
		
		double num= Math.round(Math.random() * 100 );
		
		out.println("<promptKey>" + num + "</promptKey>");
		
		System.out.println(num);
		
		out.println("</response>");
		
		out.close();
		
		return null;
		//return SUCCESS;
	}

个人小练习 如有错误欢迎指正