在上篇笔记中，我们主要谈了一些概述和跨域的问题，这一次我们聊聊请求和响应的具体内容。
向服务器发起请求
我们在创建了XHR对象后，接着需要用两个方法来发送请求：open()和send()，这两个方法有点像赛跑前的两个步骤：预备、跑。在open()中，并没有实际发送请求，只是一个“预备”动作，真正的发送要到send()中了。
open和send
open()可以传递三个参数：
- method：请求的类型，GET或POST之类；
- url：文件在服务器的位置；
- async：同步或是异步，默认异步，当选择默认时，我们可以选择不填这个参数。
send()的参数只有一个，是运用在post方式的请求中，以string的形式。
以下是一个例子：
xhr.open("GET","example.PHP",true);
xhr.send();
//post不需要传递参数；
xhr.open("POST",true);
xhr.send();
//post需要传递参数；
xhr.open("POST",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlcoded");
xhr.send("fname=henry&lname=ford")
get和post
get常用于查询数据，有时候，需要我们用某种指定的格式把参数追加到url的末尾。如果格式不正确的话，会出现错误。
举一个例子：
xhr.open("get","example.PHP?name1=value1&name2=value2",true");
xhr.send();
post多用于向服务器提交应该被保存的数据。与get不同的是，post应该以发送的数据作为请求的主体。参数则不需要写在url里了，而是写在send里，在这里，可以传递XML DOM文档也可以传递字符串。当然，要注意的是，如果只是简单的，没有数据传递的POST请求，那么和GET请求一样，在send()中不需要添加什么。如果需要POST数据，我么要用setRequestHeader()来添加HTTP头，然后在send()中用参数的形式添加数据传递。
HTTP头部信息
每个HTTP请求都带有头信息，所以我们发送一个AJAX请求时，实际上也会发送相关的头信息。默认情况下，下列的头信息会被发送出去：
- Accept；
- Accept-Charset；
- Accept-Ending；
- Accept-Language；
- Connection；
- Cookie；
- Host；
- Refer；
- User-Agent；
使用setRequestHeader()可以设置自定义的头信息。这个方法接收两个参数：头部字段的名称和值。例如：
xhr.setRequestHeader("Content-type","application/x-www-form-urlcoded");
xhr.setRequestHeader("MyHeader","MyValue");
要注意的是：setRequestHeader方法需要在open()和send()中间设置，这样才能成功发送请求的头部信息。
服务器响应
当我们发送请求后，一切顺利，服务器也顺利发回了响应，那么我们要怎么来获取这些响应呢？
responseText和responseXML
这是获取两种不同格式的响应，esponseText是字符串形式，responseXML则是XML形式。
举一个例子：
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
xhr.open("get",true);
xhr.send();
就是这样。
XHR 2级
XHR的发展也促使W3C着手制定更为完善的2级规范。在这套规范里，有一些内容需要了解。
FormData
为了实现表单数据的序列化，在Web应用中更方便地传输数据，2级规范定义了FormData类型。
下面是一个创建FormData实例的例子：
<form id="myForm" action="" method="post">
<input type="text" name="name">名字
<input type="password" name="psw">密码
<input type="submit" value="提交">
</form>
var data=new FormData();
//直接添加键值对
data.append("nama","Mike");
//通过向构造函数中传入表单元素也可
//这是一个表单元素
var form=document.getElementById("myForm");
//传入
var data=new FormData(form);
xhr.send(data);
//获取
var name=data.get("name");
var psw=data.get("psw");
创建了FormData的实例后，可以直接传到send中。
关于更详细的FormData知识，请参考这篇文章：
系统学习前端之FormData详解 - 前端与生活 - SegmentFault
超时设置
最早是IE8为XHR添加了timeout属性，后来被XHR 2级规范收入。
当给timeout设置了数值后，规定时间内没有响应，就会触发timoeout事件，进而调用ontimeout。
这是一个例子：
var xhr;
...
xhr.open("get",true);
xhr.timeout=1000;
xhr.ontimeout=function(){
alert("Request is not return in a second"
};
xhr.send();
进度事件
XHR 2的进度事件定义了XHR在请求的不同阶段触发不同的事件，具体的有6个事件：
- loadstart；
- progress；
- error；
- abort；
- load；
- loadend；
每个浏览器所支持的事件不完全相同，比如IE8就支持load事件。有了这些不同的事件支持，开发者可以免去检查readyState之类的工作，更加的方便。
其中load事件和progress事件比较重要。load事件会在接收到完整的响应数据时触发，因此我们就不需要再检查readyState属性了，只要确保XHR的status为200就可以了。
而progress事件则会为XHR在浏览器接收数据期间周期性地触发。在触发时，它会额外地提供三个属性：
- lengthComputable；表示进度信息是否可用
- position；表示已经接收的字节数
- totalSize；表示响应头确定的预期字节数
有了这些信息，我们可以创造一个进度指示器：
var xhr=createXHR();
xhr.onload=function(event){
...
}
xhr.onprogress=function(event){
var divstatus=document.getElementById("status");
if(event.lengthcoputable){
divstatus.innerHTML="Reiceived"+event.position+"of"+event.totalSize+"bytes";
}
};
这里要注意的是：必须在调用open()方法之前添加progress事件处理程序。