1. 在eclipse创建一个动态web项目
2. 创建一个ajaxPost.html，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//创建XMLHttpRequest对象
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) { //浏览器兼容性
xmlhttp = new XMLHttpRequest();
} else { //兼容iE6一下的版本
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//结果返回后，页面处理
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
//发送请求
xmlhttp.open("post", "demoPost.jsp", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
xmlhttp.send("city=北京&name=xiaohua");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" οnclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
3. 再创建一个接受请求的demoPost.jsp，内容如下：
<%
//设置编码方式
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String fname=request.getParameter("name");
String fcity=request.getParameter("city");
out.print("Dear " + fname + ".");
out.print("Hope you live well in " + fcity + ".");
%>
4. 启动Tomcat，在浏览器中输入:http://localhost:8080/AJAX/ajaxPost.html,回车可以看到下面信息：
5. 点击“请求数据”按钮，我们看到有数据返回到页面上来了，详见下图：
6. AJAX的具体实现见文章粗体部分。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
