初学Ajax

时间：2020-06-02 16:10:22 收藏：0 阅读：71

封装一个简单的Ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="ajax.js"></script>
    <script>
       window.onload = function(){
           var btn = document.getElementById(‘btn‘);
           btn.onclick = function(){
                ajax(‘ab.txt‘,function(str){
                    alert(str);
                },function(failed){
                    alert(failed);
                })
           }
       }
    </script>
</head>
<body>
    <button id="btn">发送</button>
</body>
</html>

function ajax(url,fnSucc,fnFaild){
            // 1.创建ajax对象
            if(window.XMLHttpRequest){
                var ajax = new XMLHttpRequest();
            }
            else{
                // IE6, IE5 浏览器执行代码
                var ajax = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 2.连接服务器
            // open(方法，文件名，异步传输)
            ajax.open(‘GET‘,url,true);
            // 3.发送请求
            ajax.send();
            // 4.接收返回值
            ajax.onreadystatechange = function(){
                // 有0,1,2,3,4值
                if(ajax.readyState==4){
                    // 请求成功
                    if(ajax.status==200)
                    {
                        fnSucc(ajax.responseText);
                    }
                    else{
                        if(fnFaild){
                            fnFaild(ajax.status);
                        }
                    }
                }
            }
        }