日期:2014-05-16  浏览次数:20633 次

ajax实例(一)
返回数据的页面content.html

Hello World!




<!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>
</head>
<body>

<script type="text/javascript">
	var xmlHttp;
	function createXMLHttp(){
		if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}else{
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE 
		}
	}
	function showMsg(){
		createXMLHttp();//建立xmlHttp核心对象
		xmlHttp.open("post","content.html");//设置一个请求
		xmlHttp.onreadystatechange = showMsgCallback;//设置请求完成后处理的回调函数
		xmlHttp.send();//发送请求,不传递任何参数
		
	}
	function showMsgCallback(){
		if(xmlHttp.readyState == 4 ){//数据返回完毕
			if(xmlHttp.status == 200){//HTTP操作正常
				var text = xmlHttp.responseText;//接受返回的内容
				//document.getElementById("msg").className="样式名称";//设置要使用的样式表
				//设置msg标签元素中要显示的内容为Ajax接收的返回值内容
				document.getElementById("msg").innerHTML = text;
			}
		}
	}
</script>
<input type="button" onclick="showMsg()" value="调用AJax显示内容"></input>
<span id="msg"></span>
</body>
</html>