参考: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" οnclick="loadXMLDoc()">Change Content</button>
</body>
</html>
684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
