//1. prepare request
xmlHttpRequest.open("GET", "AjaxServlet", true);
// XMLHttpRequest.prototype.open = function(method,url,async,user,password) {};
为了模拟服务器的响应,并且不使用缓存内容,我们把服务器代码改成如下,加了5秒延时:
public class HelloAjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doGet invoked!");
//mock the processing time of server
try {
Thread.sleep(5000L);
} catch (InterruptedException e) {
e.printStackTrace();
}
//no cache
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
PrintWriter out = response.getWriter();
out.println("Hello World");
out.flush();
}
}
下面就可以比较出同步和异步的差别了:
<body>
<input type="button" value="get content from server" onclick="ajaxSubmit();"><br>
<input type="text" value="value1" id="value1Id">
<input type="text" value="value2" id="value2Id">
<div id="div1"></div>
</body>
public class HelloAjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doGet invoked!");
process(request, response);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("doPost invoked!");
process(req, resp);
}
private void process(HttpServletRequest request, HttpServletResponse response) throws IOException {
System.out.println("process invoked!");
String v1 = request.getParameter("v1");
String v2 = request.getParameter("v2");
String result = String.valueOf(Integer.valueOf(v1) + Integer.valueOf(v2));
//mock the processing time of server
// try {
// Thread.sleep(5000L);
// } catch (InterruptedException e) {
// e.printStackTrace();
// }
//no cache
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
PrintWriter out = response.getWriter();
out.println("Hello World: " + result);
out.flush();
}
}
xmlHttpRequest.open("GET", "AjaxServlet?v1=" + value1 + "&v2=" + value2, true);//GET
xmlHttpRequest.send(null);//GET
xmlHttpRequest.open("POST", "AjaxServlet", true);//POST
xmlHttpRequest.send("v1=" + value1 + "&v2=" + value2);//POST requset needs params here, for GET, just leave params empty or set it to null.
注意,使用POST方法提交,在请求发送之前,必须要加上如下一行:
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
完整index.jsp代码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Hello Ajax</title>
<script type="text/javascript">
var xmlHttpRequest;
function ajaxSubmit() {
if (window.XMLHttpRequest) {//in JavaScript, if it exists(not null and undifine), it is true.
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// code for IE6, IE5
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
//very rare browsers, can be ignored.
}
//also, we can handle IE5,6 first using:
/*
if (window.ActiveXObject) {
//code for IE6, IE5
}
else {
//code for others
}
*/
//send request
if (null != xmlHttpRequest) {
//get parameters from DOM
var value1 = document.getElementById("value1Id").value;
var value2 = document.getElementById("value2Id").value;
//1. prepare request
// xmlHttpRequest.open("GET", "AjaxServlet?v1=" + value1 + "&v2=" + value2, true);//GET
xmlHttpRequest.open("POST", "AjaxServlet", true);//POST
// XMLHttpRequest.prototype.open = function(method,url,async,user,password) {};
//2. set callback function to handle events
xmlHttpRequest.onreadystatechange = ajaxCallback;
//3. do sending request action
// xmlHttpRequest.send(null);//GET
//POST
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send("v1=" + value1 + "&v2=" + value2);//POST requset needs params here, for GET, just leave params empty or set it to null.
}
}
function ajaxCallback() {
//alert("test");//this alert will show several times when click the button.
if (4 == xmlHttpRequest.readyState && 200 == xmlHttpRequest.status) {
var responseText = xmlHttpRequest.responseText;
document.getElementById("div1").innerHTML = responseText;
}
}
</script>
</head>
<body>
<input type="button" value="get content from server" onclick="ajaxSubmit();"><br>
<input type="text" value="" id="value1Id">
<input type="text" value="" id="value2Id">
<div id="div1"></div>
</body>
</html>
原文：http://www.cnblogs.com/liu-Gray/p/4916531.html