2.封装简单的Ajax

Posted 2020-12-22 lanshanxiao

<script>
        //简单的封装一个ajax
        /**
         * ajax: async javascript and json
         *  主要用来实现前后端的数据交流
         * A要发送一个信息给B
         *  请求当中需要有的基本信息
         *      1.B的地址
         *      2.请求方式
         *      3.请求数据
         *      4.状态码（B是否正常接收数据）
         *      5.响应数据
         *  XMLHttpRequest对象
         * 五层网络模型：
         *  物理层
         *  数据链路层
         *  网络层
         *  传输层
         *  应用层
         */
        function ajax(options){
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{//兼容IE6
                xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
            }
            
            xhr.onreadystatechange = function(){//监听响应事件
                //readyState的几个值
                //0:当前代理已经被创建，还没有调用open方法
                //1:调用了open方法,建议连接
                //2:send方法已经被调用
                //3:代表正在接收相应信息
                //4:代表响应数据全部发送完成
                //status的几个值
                //200:正常响应
                if(xhr.readyState == 4 && ){
                    if(xhr.status == 200){
                        options.success(JSON.parse(xhr.responseText));
                    }else{
                        console.log(‘error‘);
                    } 
                }
            }

            if(options.type == ‘GET‘){
                xhr.open(options.type, options.url + ‘?‘ + options.data, options.flag);
                xhr.send();
            }else if(options.type == ‘POST‘){
                xhr.open(options.type, options.url, options.flag);
                xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);//请求头的编码类型：key=value&key1=value1
                xhr.send(options.data);
            }
        } 
    </script>

Ajax.js