XHR2通信基础

xhr2于xhr最大的区别在于xhr只支持字符串类型的数据，而xhr2支持任意类型的数据。使用XHR2向服务器请求一张图片。

 1 <script>
 2   var xhr=new XMLHttpRequest();
 3   xhr.open('get','image.jpg',true);
 4   //处理返回类容的类型
 5   xhr.responseType='blob';
 6   xhr.onload=function(e){
 7        if(this.status==200){
 8           var url=window.URL.createObjectURL(this.response);
 9           var img=new image();
10           img.src=url;
11           document.body.appendChild(img);
12        }
13   }
14   xhr.send();
15 </script>

ArrayBuffer

ArrayBuffer是一种数据类型，存放原始的固定长度的二进制数据，但ArrayBuffer无法操作它的类容，必须创建一个代表固定格式的ArrayBufferView来 读取具体的二进制数据。 实例

 var buffer=new ArrayBuffer(16);

 var int32View=new Int32Array(buffer);

同一块内存buffer可以被多个视图所超控。

FormData

XHR2的新类型，使用FormData提交表单

1：常见的提交表单
var formdata=new FormData();
formdata.append('username','frienr');
var xhr=new XMLHttpRequest();
xhr.open('post','/server',true);
xhr.send(formdata);

2:直接提交表单元素
function sendForm(form){
  var formData=new FormData(form);
  //在以知的表单后添加
  formdata.append('token','1233');
   xhr.send(formdata);
}
sendForm(document.getElementById('form1'));

xhr2新增了个upload属性，并可以为之绑定一个onprogress事件，检测上传的速度

<progress></progress>
<script>
  var xhr=new XMLHttpRequest();
  xhr.open('POST','/SERVER',true);
  xhr.onload=function(){......}
  //配合HTML5的progress一起使用
  var progressBar=document.querySelector('progress');
  xhr.upload.onprogress=function(e){ 
     if(e.lengthComputable){
       progressBar.value=(e.loaded/e.total)*100;
     }
  };
  xhr.send(blobOrFile)
}
var int16Array=new Int16Array(16)
var blob=new Blob([int16Array])
upload(blob);
</script>

xhr不能跨越，但xhr2新增了跨源资源共享的能力在服务器设置一些标头实现真正的跨域Ajax请求 可以跨某个域的http标头

Access-Control-Allow-Origin:http://example.com 

可以来自所有域的访问

Access-Control-Allow-Origin:*

让跨域的http请求带上cookie等 Access-Control-Allow-Credentials:true

在客户端发送请求时需要在发送请求前将xhr的对象withCredentials设置为true eg xhr.withCredentials=true;