后端返回图片验证码数据流，前端ajax请求处理显示在页面

验证码后端返给前端的是一张图片，如下：

再看看response里的返回

此时前端用jquery的ajax请求如果直接去拿返回值，就会发现...额...乱码了啊（数据流）

于是就对这对数据流进行各种转换，发现都不能展示，最后换了使用XMLHttpRequest（js原生）发送Ajax请求方式进行如下操作

//html代码
<img src="" id="code" alt="" />

//js代码
//获取图片验证码
function getImgCode(){
  var windowUrl = window.URL || window.webkitURL;//处理浏览器兼容性
  var xhr = new XMLHttpRequest();
  var url = "/IGI/***";//验证码请求地址
  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  xhr.onload = function () {
    if (this.status == 200) {
      var blob = this.response;
      $("#code").attr("src", windowUrl.createObjectURL(blob));
    }
  }
  xhr.send();
}
getImgCode()

成功了~~~

别走了，下面用一个更简单的方法

看上面例子是不是会发现，接口在地址栏输入会是一张完整的图片验证码，那何不把接口地址放在img的src属性中呢？

<img id="loadcode" src="接口地址&"+Math.random() onclick="loadImg()" />
<script>
    function loadImg() {
        document.getElementById("loadcode").src="接口地址&" + Math.random();
        //Math.random()为了防止有缓存
    }
</script>

是不是超简单~~~