首页 > 上网技巧 > 电脑小技巧 > js实现ajax读取服务器端数据

js实现ajax读取服务器端数据

时间:2018-08-07 10:48 作者:QQ地带 我要评论

<script src="ajax.js"></script>
function ajax(url,fnSucc, fnFaild){
    // 1·创建Ajax对象
    if(window.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){//成功
                fnSucc(oAjax.responseText);
            }else{
                if(fnFaild){
                    fnFaild();
                }
            }
        }
    }
}
<script>
        window.onload=function(){
            var oBtn=document.getElementById("btn");
            var oUl=document.getElementById("ul1");
            oBtn.onclick=function(){
                ajax('try.txt?t='+new Date().getTime(),function(str){
                    var arr = eval(str);
                    for(var i=0; i<arr.length;i++){
                        var oLi=document.createElement("li");
                        oLi.innerHTML='用户名:'+arr[i].user+ ' 密码:'+arr[i].pass;
                        oUl.appendChild(oLi);
                    }
                },function(){
                    alert('失败');
                })
            }
        }
    </script>
 
try.txt
[{user:'张三',pass:'12344'},{user:'admin',pass:'14343'},{user:'username',pass:'1ssss'},{user:'李四',pass:'2323211'}]
<input type="button" id="btn" value="读取">
    <ul id="ul1"></ul>

标签: JS ajax
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告