AJAX基础教程-优快云博客

参考:http://www.w3school.com.cn/ajax/index.asp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax基础</title>
<script type="text/javascript">
///loadXMLDoc(url,callback)
function loadXMLDoc(){
	var xmlhtml;
	if(window.XMLHttpRequest){
		xmlhtml=new XMLHttpRequest;
	}else{
		//兼容IE5,IE6
		xmlhtml=new ActiveXObject("Microsoft.XMLHTTP");
	}
	///如果是异步,需要写onreadyStatechange函数,如果不是,则不要写,document放到 send() 语句后面即可
	xmlhttp.onreadyStatechange=function(){
		//服务器响应 当 readyState 改变时，就会触发 onreadystatechange 事件
		// onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
		// readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
				//0: 请求未初始化
				//1: 服务器连接已建立
				//2: 请求已接收
				//3: 请求处理中
				//4: 请求已完成，且响应已就绪
		//status 请求结果状态 200: "OK"  //404: 未找到页面
		
		///此if可以放到callback函数中使用
		if(xmlhttp.readyState==4&&xmlhttp.status==200){
			///服务器响应的数据
			///1.responseText 字符串形式
			//document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
			///2.responseXML xml形式,而且需要作为 XML 对象进行解析
			xmlDoc=xmlhttp.responseXML;
			txt='';
			x=xmlDoc.getElementsByTagName("ARTIST");
			for(i=0;i<x.length;i++){
				txt=txt+x[i].childNodes[0].nodeValue+"<br/>";	
			}
			document.getElementById("myDiv").innerHTML=txt;
		}
	}
	//get不能大于2k,'ajax_test.asp?t='+Math.random()可以避免缓存
	///post在数据量大,要求安全性高,发送未知字符,无发使用缓存文件时使用
	// url 参数是服务器上文件的地址
	//第三个async 参数是否使用异步
	xmlhttp.open('POST','ajax_test.asp',true);
	//post表单数据时使用,setRequestHeader用于添加http头,然后在send中规定发送的数据;					 
	//xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	xmlhttp.send('fname=Bill$lname=Gates');
	//如果不使用异步,document代码放在send后面
	//document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>
</head>

<body>
<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>