ajax加载本地json和xml文件

封装的js文件：

var RES=(function () {
    var list={};
    return {
        DATA_FINISH_EVENT:"data_finish_event",
        init:function (imgDataList,basePath,type) {
            if(imgDataList.length===0) return;
            if(!type) type="json";
            RES.imgDataList=imgDataList.reverse();
            RES.basePath=basePath;
            RES.type=type;
            RES.ajax(basePath+imgDataList.pop()+"."+type)
        },
        ajax:function (path) {
            var xhr=new XMLHttpRequest();
            xhr.addEventListener("load",RES.loadHandler);
            xhr.open("GET",path);
            xhr.send();
        },
        loadHandler:function (e) {
            this.removeEventListener("load",RES.loadHandler);
            var key,obj;
            if(RES.type==="json"){
                obj=JSON.parse(this.response);
                key=obj.meta.image.split(".png")[0];
                list[key]=obj.frames;
            }else if(RES.type==="xml"){
                obj=this.responseXML.children[0];
                key=obj.getAttribute("imagePath").split(".png")[0];
                list[key]=obj;
            }

            if(RES.imgDataList.length===0){
                var evt=new Event(RES.DATA_FINISH_EVENT);
                evt.list=list;
                document.dispatchEvent(evt);
                return;
            }
            RES.ajax(RES.basePath+RES.imgDataList.pop()+"."+RES.type);
        },
        getNameJSONData:function (name) {
            var fileName=RES.basePath;
            for(var key in list){
                var arr=list[key].filter(function (t) {
                    return t.filename===name;
                });
                if(arr.length>0){
                    fileName+=key+".png";
                    break;
                }
            }
            if(arr.length===0){
                return false;
            }else{
                return {
                    file:fileName,
                    w:arr[0].frame.w,
                    h:arr[0].frame.h,
                    x:arr[0].frame.x,
                    y:arr[0].frame.y
                };
            }
        },
        getNameXMLData:function (name) {
            var fileName=RES.basePath;
            for(var key in list){
                var elem=list[key].querySelector("[n="+name+"]");
                if(elem){
                    fileName+=list[key].getAttribute("imagePath");
                    break;
                }
            }
            if(!elem) return false;
            return {
                file:fileName,
                w:elem.getAttribute("w"),
                h:elem.getAttribute("h"),
                x:elem.getAttribute("x"),
                y:elem.getAttribute("y")
            }
        },
        getImage:function (name) {
            var obj;
            if(RES.type==="json"){
               obj=RES.getNameJSONData(name);
            }else if(RES.type==="xml"){
                obj=RES.getNameXMLData(name)
            }
            if(!obj)return;
            var div=document.createElement("div");
            Object.assign(div.style,{
                width:obj.w+"px",
                height:obj.h+"px",
                backgroundImage:"url("+obj.file+")",
                backgroundPositionX:-obj.x+"px",
                backgroundPositionY:-obj.y+"px",
                position:"absolute"
            });
            return div;
        },
        changeImg:function (elem,name) {
            var obj;
            if(RES.type==="json"){
                obj=RES.getNameJSONData(name);
            }else if(RES.type==="xml"){
                obj=RES.getNameXMLData(name)
            }
            if(!obj)return;
            Object.assign(elem.style,{
                width:obj.w+"px",
                height:obj.h+"px",
                backgroundImage:"url("+obj.file+")",
                backgroundPositionX:-obj.x+"px",
                backgroundPositionY:-obj.y+"px",
                position:"absolute"
            });
        }
    }
})();

html文件

  <script>
        document.addEventListener(RES.DATA_FINISH_EVENT,initHandler);
        
       
        RES.init(["img数据1","img数据2"],"img/","xml");

        function initHandler(e) {
            var div=RES.getImage("img1");
            document.body.appendChild(div);
            RES.changeImg(div,"img2");
        }
    </script>