原生JavaScript封装ajax

最新推荐文章于 2021-08-05 19:37:34 发布

GY_U_YG

最新推荐文章于 2021-08-05 19:37:34 发布

阅读量532

点赞数

分类专栏：前端数据结构与算法文章标签： javascript ajax 服务器数据对象

本文链接：https://blog.csdn.net/GY_U_YG/article/details/71630025

版权

前端同时被 2 个专栏收录

61 篇文章 6 订阅

订阅专栏

数据结构与算法

3 篇文章 0 订阅

订阅专栏

从服务器取数据需要几步？

创建一个ajax对象；
连接到服务器；
告诉服务器要哪个东西，（发送请求）；
接收返回值；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>GuoYu-ajax</title>
</head>
<body>
    <input type="button" value="读取" id="btn1">

    <script type="text/javascript">
        var oBtn = document.getElementById('btn1');
        oBtn.onclick = function() {
            //1,创建一个ajax，IE6
            //var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
            //1,创建一个ajax,非IE6
            //var oAjax = new XMLHttpRequest();
            /*
                同步：一件一件来
                异步：多个事情一起做，ajax天生就为异步而生，除非你网速快的很，同步也可以
            */
            /*
                js中：
                1，用没有定义的变量  -- 报错；
                2，用没有定义的属性  --  undefined；
                所以，有时候为了避免报错，使用window.做前缀。
            */

            if (window.XMLHttpRequest) {
                var oAjax = new XMLHttpRequest();
            } else {
                var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
            }


            //2,连接服务器,open(方法, 文件名, 同步/异步);
            oAjax.open('GET', './zepto.js');




            //3，发送请求
            oAjax.send();





            /*4,接收返回的东西，ajax发送请求后，干其他的事去了,
                等到返回了以后再处理，返回后以事件的形式来处理数据,
                onreadystatechange就是跟服务器交互的时候发生的事件
            */
            /*
                reayState:
                0：未初始化，还没调用open()方法；
                1：载入，已经调用open()方法，正在发送请求；
                2：载入完成，send()方法完成，浏览器已经收到全部响应内容（数据可能是加密的，压缩的，ajax还没法用）；
                3：解析，正在解析响应内容（解析的是服务端返回的数据）；
                4：完成，响应内容解析完成，可以在客户端调用了。完成不代表成功，比如读取出错了，文件不存在等等
                怎么进一步判断是成了还是败了呢，status:状态码！
            */
            oAjax.onreadystatechange = function() {
                //我怎么知道跟服务器交互的过程完没完呢？readyState:浏览器和服务器交互到哪一步了
                if (oAjax.readyState == 4) {
                    if (oAjax.status == 200) {
                        alert('success');
                        alert(oAjax.responText);//弹出zepto.js文件内容
                    } else {
                        alert('failed');
                        alert(oAjax.status);
                    }
                }
            };


        };
    </script>
</body>
</html>

zepto.js是真实存在于本目录中的，会alert出success，如果换成个不存在的文件，比如zepto1.js，则会弹出failed和404

ajax.js

以上的代码要封装成一个ajax函数以供调用，每次要读的文件肯定不同，不可能都是zepto.js，所以这是一个参数，每个人读到文件要做的事情不一样，所以，需要一个success的回调，把oAjax.responseText返回数据传进去，失败了，error，需要因为什么原因失败了，所以，oAjax.status当参数传递一下

function params(data) {
    var arr = [];
    for(var i in data) {
        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
    }
    return arr.join('&');
}

function ajax(obj) {
    var xhr = new XMLHttpRequest();
    // obj.url = obj.url + '?rand='+Math.random();
    obj.data = params(obj.data);
    if (obj.type === 'get') {
        obj.url += obj.url.indexOf('?')==-1 ? '?'+obj.data : '&'+obj.data;
    }
    alert(obj.url);
    if(obj.async === true) {
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status == 200) {
                    obj.success(xhr.responseText);
                } else {
                    console.error('errNumber: '+xhr.status+', errMessage: ' + xhr.statusText);
                }
            }
        };
   }
    xhr.open(obj.type, obj.url, obj.async);
    if (obj.type === 'post') {
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(obj.data);
    } else {
        xhr.send(null);
    }
    if(obj.async === false) {
        if(xhr.status == 200) {
            obj.success(xhr.responseText);
        } else {
            console.error('errNumber: '+xhr.status+', errMessage: ' + xhr.statusText);
        }
    }
}