2014年12月23日15:36:10 天氣陰 心情極度低落
ajaxGet2014122301.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {
//1.獲取a節點,併爲其添加onclick響應函數
document.getElementsByTagName("a")[0].onclick = function() {
//3.創建一個XMLHttpRequest對象
var request = new XMLHttpRequest();
//4.準備發送請求的數據： url
var url= this.href + "?time = " + new Date();
var method = "GET";
//5.調用XMLHttpRequest 對象的open方法
request.open(method,url);
///6.調用XMLHttpRequest 對象的send方法
request.send(null);
//7.爲XMLHttpRequest對象添加onreadystatechange響應函數
request.onreadystatechange = function() {
//8.判斷響應是否完成：XMLHttpRequest對象的readyState 屬性爲4的時候
if (request.readyState == 4) {
//9.再判斷響應是否可用：XMLHttpRequest 對象的 status 爲200
if (request.status == 200 || request.status == 304) {
//10.打印響應結果：responseText;
alert(request.responseText);
}
}
}
//2.取消a節點的默認行爲
return false;
}
}
</script>
</head>
<body>
<a href="HelloAjax.txt">helloAjax2014122301</a>
</body>
</html>ajaxPost2014122301.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function() {
var request = new XMLHttpRequest();
var url= this.href + "?time = " + new Date();
var method = "POST";
request.open(method,url);
request.setRequestHeader("ContentType", "application/x-www=form-urlencoded")
request.send("name='atguigu'");
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
alert(request.responseText);
}
}
}
return false;
}
}
</script>
</head>
<body>
<a href="HelloAjax.txt">helloAjax2014122301</a>
</body>
</html>對於post請求必須執行完request.setRequestHeader("ContentType", "application/x-www=form-urlencoded")而後再執行request.send("name='atguigu'");，否則異步提交不起作用。