原生Ajax的多种简单封装

方法一、不封装

window.onload  = function(){
        var btns = document.getElementsByTagName("button");
        var tbls = document.getElementsByTagName("tbody");
            //处理数据
            function handlerData(data){

                //反序列化  将字符串解析为对象
                var stus = JSON.parse(data);

                //遍历删除tbody中所有的子元素
                Array.prototype.slice.call(tbls[0].children,0).forEach(
                function(item){
                    tbls[0].removeChild(item);
                });

                //stus纯数组直接用forEach遍历出数组元素
                stus.forEach(function(stu){
                //每遍历出一个学生创建一个tr
                //{ id,name,age,gender}  遍历出来的是一个学生对象
                var newTr = document.createElement("tr");
                //每个学生继续遍历其属性  因为每个学生当中的属性占一个td
                for( var key in stu){
                    //每遍历一个属性创建一个td
                    var  newTd = document.createElement("td");
                    //把属性的值(内容)拿出来放入td当中
                    newTd.innerHTML = stu[key];  //属性值 innerText
                    //把td追加到tr
                    newTr.appendChild(newTd);
                } 
                    tbls[0].appendChild(newTr);
            });
        }   
                //点击get请求按钮，像服务器发送请求
                btns[0].onclick = function(){
                //ajax
                //1 实例化XMLHttpReuquest
                var  request = new XMLHttpRequest();
                //2 指定请求
                request.open("GET","data.json"); //后期-服务器技术-"getAllstudents.action?class =1"
                //加斜杠为服务器的根目录 绝对路径
                //3 设定请求头     
                request.setRequestHeader("Content-type","text/plain;charset=UTF-8");
                //4 发送请求头
                request.send();

                 //处理响应
                //绑定一个on事件 监听请求完成，然后处理数据
                request.onreadystatechange = function(){
                    console.log(request.readyState);   //2,3,4
                    if(request.readyState === 4 && request.status ===200){
                        //获取到响应的文本数据
                        var text = request.responseText; //获取到字符串类型的json  打印在控制台的字符串
                        console.log(text);
                        // 封装 （回调）
                        handlerData(text);  //回调
                        //var stus = JSON.parse(text);
                        //反序列化  将字符串解析为对象
                        // var stus = JSON.stringify(text);
                        //console.log(stus);                    
                }
        };
    };
};

方法二、封装ajax请求

window.onload = function(){
    var btns = document.getElementsByTagName("button");
    var tbody = document.getElementsByTagName("tbody")[0];
    btns[0].onclick = function(){
        //初始化表格
        Array.prototype.slice.call(tbody.children,0).forEach(function(item){
            item.parentNode.removeChild(item);  
        });
        //加载数据
        getXMLData("data/students.xml"
        ,function(data){
            var stus = data.children[0].children;
            stus = Array.prototype.slice.call(stus,0);
            stus.forEach(function(stu){
                var newTr = document.createElement("tr");
                var id = stu.getAttribute("id");
                var idTd =  document.createElement("td");
                idTd.textContent = id;
                newTr.appendChild(idTd);
                var attrs = stu.children;
                for(var i=0;i<attrs.length;i++){
                    var newTd =  document.createElement("td");
                    newTd.textContent = attrs[i].textContent;
                    newTr.appendChild(newTd);
                }
                tbody.appendChild(newTr);
            });
        });
        /*
        getTextData("data/students.json"
        ,function(data){
            console.log(data); //Document
        });
        */
    };
};
//封装 get请求-XML
function getXMLData(url,callback){
    //发送请求
    var request =new XMLHttpRequest();
    request.open("GET",url);
    request.send();
    //处理响应
    request.onreadystatechange = function(){
        if(request.readyState === 4 && request.status === 200){
            //获取到响应的XML格式
            var dom = request.responseXML;
            callback(dom);
        }
    };
}
//封装 get请求
function getTextData(url,callback){
    //发送请求
    var request =new XMLHttpRequest();
    request.open("GET",url);
    request.setRequestHeader("Content-type","text/plain;charset=UTF-8");
    //json数据格式          
    //request.setRequestHeader("Content-Type","application/json");
    request.send();
    //处理响应
    request.onreadystatechange = function(){
        if(request.readyState === 4 && request.status === 200){
            //获取到响应的文本数据
            var text = request.responseText;
            callback(text);
        }
    };
}