- 创建ajax对象。
- 连接到服务器
- 告诉服务器要哪个文件(发送请求)
- 接收返回值
<script>
//用没有定义的变量--报错
//用没有定义的属性--undefined
alert(a)//报错
alert(window.a)//undefined
</script>
- 同步:多件事一起 js中 事情一件件来
- 异步:一件一件来 多个事情可以一起做
readyState可能出现5种值:
- 0 (未初始化)还没有调用open()方法
- 1 (载入)已调用send()方法,正在发送请求
- 2 (载入完成)send()方法完成,已收到全部响应内容
- 3 (解析)正在解析响应内容
- 4 (完成)响应内容解析完成,可以在客户端调用了
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
//1.创建ajax对象。
/*//只兼容非IE6的浏览器
/!*var oAjax=new XMLHttpRequest();
alert(oAjax);//[object XMLHttpRequest]*!/
//IE6
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
alert(oAjax);//IE6下 object*/
if(window.XMLHttpRequest){//XMLHttpRequest会报错。IE6下没有XMLHttpRequest
var oAjax=new XMLHttpRequest();
}else{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器 open(方法,文件名,异步传输)
oAjax.open('GET','aaa.txt?t='+new Date().getTime(),true);
//3.发送请求
oAjax.send();
//4.接收返回
oAjax.onreadystatechange=function(){//onreadystatechange当Ajax和服务器又通信的时候执行该事件
//oAjax.readyState //浏览器和服务器进行到哪一步了
if(oAjax.readyState==4){//读取完成
if(oAjax.status==200){//oAjax.status成功还是失败 值为200成功 除了200以外都失败
alert('成功:'+oAjax.responseText);
}
else{
alert('失败'+oAjax.status);
}
}
}
}
}
</script>
</head>
<body>
<input type="button" id="btn1" value="获取"/>
</body>
封装ajax:
function ajax(url,fnSucc,fnFail){
if(window.XMLHttpRequest){//XMLHttpRequest会报错。IE6下没有XMLHttpRequest
var oAjax=new XMLHttpRequest();
}else{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器 open(方法,文件名,异步传输)
oAjax.open('GET',url,true);
//3.发送请求
oAjax.send();
//4.接收返回
oAjax.onreadystatechange=function(){
//oAjax.readyState //浏览器和服务器进行到哪一步了
if(oAjax.readyState==4){//读取完成
if(oAjax.status==200){//oAjax.status成功还是失败 值为200成功 除了200以外都失败
fnSucc(oAjax.responseText);
}
else{
if(fnFail){
fnFail(oAjax.status);
}
}
}
}
}
使用ajax:
<title></title>
<script src="js/ajax1.js"></script>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
ajax('aaa.txt',function(str){
alert(str);
})
}
}
</script>
</head>
<body>
<input type="button" id="btn1" value="获取"/>
</body>