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();
}