Ajax2

  1. 创建ajax对象。
  2. 连接到服务器
  3. 告诉服务器要哪个文件(发送请求)
  4. 接收返回值
<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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值