java web 学习笔记四 使用ajax响应异步请求

ajax是Asynchronous Javascript + XML的缩写。

亦即是说，在js代码中向服务器发送异步请求，不刷新整个界面，只更改部分界面。

首先，要创建XMLHttpRequest对象，js代码：

// 创建XMLHttpRequest对象
	function createXMLHttpRequest(){
		// chrome, opera等
		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else {
			// 低版本的IE
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}

使用对象向服务器发送请求

// 发送请求
	function sendReq(){
		createXMLHttpRequest();
		// GET方法，在对应的Serlvet中调用doGet
		// SerlvetName?methodName=methodName
		// true：异步方式
		xmlhttp.open("GET", "TestAjax?methodName=doGet", true);
		// 设定响应函数
		xmlhttp.onreadystatechange = handleResponse;
		// 发送请求
		xmlhttp.send();
	}

响应函数：

// 处理服务器响应结果
	function handleResponse() {
		//readyState
		//0:未初始化，1:正在加载，2:已加载，3:交互中，4:已完成
		//status
		//200：OK，404，Not Found
		//responseXML：服务器响应回来的数据是xml格式
		//responseText：服务器响应回来的数据是文本格式
		if (xmlhttp.readyState == 4) {
			if (xmlhttp.status == 200) {
				var out = "";
				var res = xmlhttp.responseXML;
				var response = res.getElementsByTagName("response")[0].firstChild.nodeValue;
				// 将相应回来的值显示在id为myDiv的元素上
				document.getElementById("myDiv").innerHTML = response;
			}
		}
	}

页面有两个元素：

<div>
	<p id="myDiv">Let AJAX change this text</p>
</div>
<button type="button" οnclick="sendReq()">Change Content</button>

serlvet代码：

protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		System.out.println("test ajax!");
		// 设置相应的文本格式和字符编码格式
		resp.setContentType("text/xml; charset=UTF-8");
		resp.setHeader("Cache-Control", "no-cache");
		PrintWriter out = resp.getWriter();
		// 设置相应传回数据
		String output = "<response>this is from ajaxTest Serlvet</response>";
		// 传回
		out.print(output);
		out.close();
	}