Ajax2

最新推荐文章于 2022-03-14 13:52:49 发布

蔡蔡动起来

最新推荐文章于 2022-03-14 13:52:49 发布

阅读量209

点赞数

分类专栏：智能社_js AJAX 文章标签： Ajax

本文链接：https://blog.csdn.net/weixin_40512519/article/details/82728007

版权

智能社_js 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

AJAX

3 篇文章 0 订阅

订阅专栏

创建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>