Ajax学习笔记-入门笔记

入门实例

<!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() {
		//获取a结点,并未其添加onclick响应函数
		document.getElementsByTagName("a")[0].onclick = function() {
			var request = new XMLHttpRequest();
			//加上时间戳可以起到禁用缓存的效果
			var url = this.href + "?time=" + new Date();
			var method = "GET";
			request.open(method, url);
			request.send(null);
			//为XMLHttpRequest对象添加onreadystatechange响应函数
			request.onreadystatechange = function() {
				//判断相应是否完成
				if (request.readyState == 4) {
					if (request.status == 200 || request.status == 304) {
					//当readyState为4的时候,responseText才可用 
						alert(request.responseText);
					}else if(request.status == 404){
						alert("请求的页面不存在");
					}
				}
			}
			return false;
		}
	}
</script>
</head>
<body>
	<a href="helloAjax2.txt">helloAjax.txt</a>
</body>
</html>

发送POST请求

<!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() {
		//获取a结点,并未其添加onclick响应函数
		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='umgsai'");//设置请求参数
			//为XMLHttpRequest对象添加onreadystatechange响应函数
			request.onreadystatechange = function() {
				//判断相应是否完成
				if (request.readyState == 4) {
					if (request.status == 200 || request.status == 304) {
						alert(request.responseText);
					}else if(request.status == 404){
						alert("请求的页面不存在");
					}
				}
			}
			return false;
		}
	}
</script>
</head>
<body>
	<a href="helloAjax2.txt">helloAjax.txt</a>
</body>
</html>

开发中多用JQuery,不用考虑浏览器的兼容性。

你可能感兴趣的:(function,request,method,title)