封装ajax兼容

最新推荐文章于 2021-09-04 10:22:42 发布

竹节虫T

最新推荐文章于 2021-09-04 10:22:42 发布

阅读量165

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43623871/article/details/99412054

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<body>
    <button id="button">点击</button>
    <script>
        // 浏览器
        // Ajax对象
        // ajax.open(method,url,true)
        // ajax.send();
        //onreadystatechange 4//判读响应的状态
        //status == 200 404 503//判断返回的响应的数据是否是自己想要的

        document.getElementById('button').onclick = function () {
            ajaxFn('GET', 'data.txt', '', showList, true);
        }
        //请求方式，请求地址，参数，处理响应的数据的回调函数，设置为异步或者同步请求（flag=true表示为异步请求）
        function ajaxFn(method, url, data, callback, flag) {
            var xhr = null;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                //兼容IE。
                xhr = new ActiveXObject("Microsoft.XMLHttp");
            }
            method = method.toUpperCase();
            if (method == "GET") {
                //get请求的参数是附在url后面的。
                xhr.open(method, url + '?' + data, flag);
                xhr.send();
            } else if (method == 'POST') {
                //post请求要设置请求头，并且它的参数是放在send()发送里面的。
                xhr.open(method, url, flag);
                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                xhr.send(data);
            }
            //监听响应码的状态，每一次响应码的转变都会触发onreadystatechange函数。
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        callback(xhr.responseText);
                    }
                }
            }
        }

        function showList(data) {
            console.log(data)
        }
    </script>
</body>