封装函数
//要不要参数
//要:传输的方式,路径,数据,毁掉函数
function ajax(method,url,data,fnsuccess){
//1号线:创建ajax对象
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}
else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
//2号线:发送http请求(准备数据,正真的发送)
if(method=='GET'&&data){
//如果是get方式,并且有data:传数据到服务器
url=url+'?'+data;
}
xhr.open(methos,url,true);
if(method=='GET'){
xhr.send(null);
}
else{
xhr.setRequestHeader('Content','application/x-www-form-urlencoded');
xhr.send(data);
}
//4号线:拿到的数据返回给调用ajax函数的地方
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
if(fnsuccess){
fnsuccess(xhr.responText);
//注意这里只能接受字符串,json和html数据
}
}
else{
alert('出差了,出错状态是:'+xhr.status)
}
}
}
}
html传递函数
使用封装的函数记得写完四个参数值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('btn');
oBtn.onclick=function(){
ajax('GET','aa.txt','',function(str){
console.log(str);
});
}
}
</script>
</head>
<body>
<input type="button" name="" id="btn" value="获取数据" />
<div></div>
</body>
</html>