封装Ajax
/**
* method:向服务器发送请求的方式:get(请求数据)、post(提交数据)
* url:文件路径或者接口地址
* asy:true:异步;false:同步
* fn:处理服务器返回数据的函数
* */
function ajax(method,url,asy,fn){
// function ajax(method,url,asy){
// 1.创建Ajax对象
if(window.XMLHttpRequest){
var objAjax=new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
var objAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接到服务器 open(方法,文件名,同步异步)
objAjax.open(method,url,asy);
//3.发送请求 send()
objAjax.send();
//4.接收返回值--回调函数
objAjax.onreadystatechange=function(){
//判断
if(objAjax.readyState==4 && objAjax.status==200){
fn(objAjax.responseText); //调用函数fn,将服务器返回的数据传给fn进行处理
}
}
}
使用无刷新来获取数据:(数据存储在data/student.txt文件中)
<body>
<div id="box">
</div>
<button >request data one</button><br/>
<button >request data two</button><br/>
<script src="js/ajax1.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
<script type="text/javascript">
document.getElementsByTagName("button")[0].onclick=function(){
ajax('get','data/student.txt',true,function(res){
alert(res);
});
}
document.getElementsByTagName("button")[1].onclick=function(){
ajax('get','data/test.txt',true,function(res){
document.getElementById("box").innerHTML=res;
});
}
</script>