gxhr API 常见用法

快来打我* 2022-07-28 00:29 190阅读 0赞

这里是介绍我们项目常见的XMLHttpRequest异步请求的用法，先来封装一下，让它和jquery ajax使用差不多,封装的文件为gxhr.js,在github上

https://github.com/liuxg2013/gxhr/

欢迎点赞，下面看看用法？？

get方式提交数据

用post方式提交数据

1.  提交json数据

1.  post提交表单

//前段代码
     <form id = "myform">
         <input type = "file" name = "file"/>
         <input type = "text" value = "lihua" name = "name" />
         <input type = "text" value = "32" name = "age" />
         <button type = "button" id = "mybutton">提交表单</button>
      </form>
    
    //js代码
    document.getElementById("mybutton").onclick = function(){
        window.gxhr({
                    url : "/whats/task/xmlHttpRequest",
                    data : new FormData(document.getElementById('myform')),
                    dataType : "json",
                    success : function(data,ev,xhr){
                        console.log("success");
                    },
                    error : function(ev){
                        console.log("error");
                    }
    
                });
    };
    
    //后台springmvc接收数据
    @RequestMapping("/xmlHttpRequest")
        @ResponseBody
        public String xmlHttpRequest(MultipartFile file ,String name,Integer age ,HttpServletRequest req ,HttpServletResponse res) throws IOException{
    
            File tfile = FileUtil.makefile("D:\\upload\\20160325\\color.png");
            FileUtils.copyInputStreamToFile(file.getInputStream(),  tfile);//保存上传的文件
            System.out.println(req.getContentType());
    
            JSONObject kk = new JSONObject();
            kk.put("name", name);
            kk.put("age", age);
    
            return kk.toString() ;
        }

1.  利用send(blod) ，直接读取input type = file 标签上传文件

//前段代码
      <input type = "file" name = "file" id = "myfile"/>
    //js代码
    
    var file = document.getElementById("myfile").files[0];  
        window.gxhr({
    
                    url : "/whats/task/xmlHttpRequest",
                    data : file, //file集成于blod
                    dataType : "json",
                    success : function(data,ev,xhr){ 
                        console.log("success");
                    },
                    error : function(ev){ 
                        console.log("error");
                    }
    
                });
    //后台用springmvc接收数据
    @RequestMapping("/xmlHttpRequest")
        @ResponseBody
        public String xmlHttpRequest(HttpServletRequest req ,HttpServletResponse res) throws IOException{
    
            File tfile = FileUtil.makefile("D:\\upload\\20160325\\color.png");
            FileUtils.copyInputStreamToFile(req.getInputStream(), tfile);
            System.out.println(req.getContentType());
    
            JSONObject kk = new JSONObject();
            kk.put("name", name);
            kk.put("age", age);
    
            return kk.toString() ;
        }

1.  利用send(blod) 以及FormData上传文件

//前段代码
      <input type = "file" name = "file" id = "myfile"/>
    //js代码
    
    var file = document.getElementById("myfile").files[0];  
    
    var fd = new FormData(); //formdata构造函数参数可以为空
    fd.append("file",file); //模拟表单提交
        window.gxhr({
    
                    url : "/whats/task/xmlHttpRequest",
                    data : fd, //file集成于blod
                    dataType : "json",
                    success : function(data,ev,xhr){ 
                        console.log("success");
                    },
                    error : function(ev){ 
                        console.log("error");
                    }
    
                });
    //后台用springmvc接收数据
    @RequestMapping("/xmlHttpRequest")
        @ResponseBody
        public String xmlHttpRequest(MultipartFile file,String name,Integer age ,HttpServletRequest req ,HttpServletResponse res) throws IOException{
    
            File tfile = FileUtil.makefile("D:\\upload\\20160325\\color.png");
            FileUtils.copyInputStreamToFile(file.getInputStream(), tfile);
            System.out.println(req.getContentType());
    
            JSONObject kk = new JSONObject();
            kk.put("name", name);
            kk.put("age", age);
    
            return kk.toString() ;
        }

1.  利用send(blod) ，利用FileReader.readAsArrayBuffer来获取二进制数据上传

//前段代码
    <input type = "file" name = "file" id = "myfile"/>
    
    //js代码
    var $file = document.getElementById("myfile");
    var reader = new FileReader();
    
    reader.onload = function(ev){  //读取完成触发
      var result = reader.result;
      window.gxhr({
    
            url : "/whats/task/xmlHttpRequest",
            data : result,
            dataType : "json",
            success : function(data,ev,xhr){ 
                this.getAllResponseHeaders();//获取所有响应头
                this.getResponseHeader("content-type"); //根据key获取响应头
                console.log("success");
            },
            error : function(ev){ 
                console.log("error");
            }
    
        });
    }
    
    $file.onchange = function(){ 
    
        var file = $file.files[0]; //获取文件对象file,file继承Blob对象 
        reader.readAsArrayBuffer(file); //已文本的方式读取
    
    };
    
    //后台用springmvc
    @RequestMapping("/xmlHttpRequest")
        @ResponseBody
        public String xmlHttpRequest(HttpServletRequest req ,HttpServletResponse res) throws IOException{
    
            File tfile = FileUtil.makefile("D:\\upload\\20160325\\color.png");
            FileUtils.copyInputStreamToFile(req.getInputStream(), tfile);
            System.out.println(req.getContentType());
    
            JSONObject kk = new JSONObject();
            kk.put("name", name);
            kk.put("age", age);
    
            return kk.toString() ;
        }

1.  利用progress上传文件，并读进度

//前段代码
     <form id = "myform">
         <input type = "file" name = "file" id = "myfile"/>
         <button type = "button" id = "mybutton">点击执行</button>
         <button type = "button" id = "abort">停止执行</button>
      </form>
      <div class = "pb">
         <div class = "progress" ></div>
      </div>
    
    //js代码
    var progress = document.querySelector(".progress");
    var $file = document.getElementById("myfile");
    var xhr = null;
    document.getElementById("mybutton").onclick = function() {
        var file = $file.files[0];
        xhr = window.gxhr({
    
            url : "/whats/task/xmlHttpRequest",
            data : file,
            dataType : "json",
            progress : function(data, flag, ev) {
                if(flag == "upload"){
       //根据flag判断是上传还是下载进度
                    progress.style.width = data;
                    progress.innerHTML = flag + "- >" + data;
                }
                console.log("progress data为：" + data + "--flag为：" + flag
                        + " -- readystatechange为： -- " + this.status);
            }
    
        });
    };
    document.getElementById("abort").onclick = function() {
        xhr.abort();
    }
    
    //springmvc代码
    @RequestMapping("/xmlHttpRequest")
        @ResponseBody
        public byte[] xmlHttpRequest(HttpServletRequest req ,HttpServletResponse res) throws IOException{
    
            File tfile = FileUtil.makefile("D:\\upload\\20160325\\color.zip");
          FileUtils.copyInputStreamToFile(req.getInputStream(), tfile);
    
        }

1.  利用progress下载文件，并读取下载进度

//前段代码
     <form id = "myform">
         <button type = "button" id = "mybutton">点击执行</button>
         <button type = "button" id = "abort">停止执行</button>
      </form>
      <div class = "pb">
         <div class = "progress" ></div>
      </div>
    
    //js代码
    var progress = document.querySelector(".progress");
    var xhr = null;
    document.getElementById("mybutton").onclick = function() {
        xhr = window.gxhr({
    
            url : "/whats/task/xmlHttpRequest",
            data : {},
            dataType : "blob",
            success : function(data, flag, ev) {
       //获取二进制数据流，通过URL.createObjectURL可以获取文件链接，
    
                if(flag == "download"){
       //手动触发下载
                    var aLink = document.createElement('a');
                    var evt = document.createEvent("HTMLEvents");
                    evt.initEvent("click", false, false);
                    aLink.download = "color.png";
                    aLink.href = URL.createObjectURL(data);
                    aLink.dispatchEvent(evt);
                }
                console.log("success data为：" + data + "--flag为：" + flag
                    + " -- readystatechange为： -- " + this.status);
            },
            progress : function(data, flag, ev) {
                if(flag == "download"){
       //根据flag判断是上传还是下载进度
                    progress.style.width = data;
                    progress.innerHTML = flag + "- >" + data;
                }
                console.log("progress data为：" + data + "--flag为：" + flag
                        + " -- readystatechange为： -- " + this.status);
            }
    
        });
    };
    document.getElementById("abort").onclick = function() {
        xhr.abort();
    }
    //springmvc代码
    @RequestMapping("/xmlHttpRequest")
        @ResponseBody
        public byte[] xmlHttpRequest(HttpServletRequest req ,HttpServletResponse res) throws IOException{ return FileCopyUtils.copyToByteArray(new File("D:\\SOFEWARE\\color.png")); }

1.  请求参数为xml