How Ajax works
AJAX即Asynchronous Javascript And XML（异步JavaScript和XML），是改善用户体验的网页开发技术；
XHR objects:
XMLHttpRequest 对象方法如下：
about() 停止当前的请求。
getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header") 返回指定首部的串值
open("method","URL",[asyncFlag]) ：
建立对服务器的调用。method参数可以是GET、POST。url参数可以是相对URL或绝对URL。这个方法还包括可选的参数，是否异步(true或者false)。
send(content) 向服务器发送请求。send接收一个参数，即作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必须的。调用send()之后，请求就会分派到服务器。
setRequestHeader("header", "value"): Set the specified header to the provided value. You must call open() before setting any headers. Set the header and send it with the request (the'post' method must be)
XMLHttpRequest object property description:
onreadystatechange：状态改变的事件触发器，每个状态改变时都会触发这个事件处理器.
readyState: 请求的状态。
有5个可取值：
0: 未初始化。尚未调用open()方法。
1：启动。已经调用open()方法，但尚未调用send()方法。
2：发送。已经调用send()方法，readyState上面的值就是HEADERS_RECEIVED,已经发送并且已经接收到响应头和响应状态了。
3：接收。已经接收到部分相应数据。
4：完成。已经接收到全部相应数据，而且已经可以在客户端使用了。
responseText： 服务器的响应，返回数据的文本。
responseXML：服务器的响应，返回数据的兼容DOM的XML文档对象 ，这个对象可以解析为一个DOM对象。
status：服务器的HTTP状态码（如：404 = "文件末找到" 、200 ="成功" ，等等）
statusText: 服务器返回的状态文本信息 ，HTTP状态码的相应文本（OK或Not Found（未找到）等等。
XHR创建对象：
所有现代浏览器(IE7,firefox,Opera,chrome和safari都支持原生的XMLHttpRequest对象)。
创建XMLHttpRequest对象的语法如下：
xhr = new XMLHttpRequest();
老版本的浏览器IE7以下的使用ActiveX对象。
xhr=new ActiveXObject("Microsoft.XMLHTTP");
为此，综合以上，可以创建跨浏览器下的XHR对象，如下所示：
function getXhr(){
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('MicroSoft.XMLHTTP');
}
return xhr;
}
XMLHttpRequest对象用于和服务器交换数据实列如下：
一：未调用open和send方法之前，xhr.readyState输出为0，也就是未初始化，未调用open方法。
二：当把xhr.open方法打开时候，xhr.readyState输出为1，也就是启动了open方法，但尚未调用send()方法。
三：当把xhr.send(null) 代码打开时候，xhr.readyState输出为4，说明接收到全部数据，且xhr.responseText输出为ajax.txt的内容了。
Is GET or POST used in the request?
与post相比，get更简单也更快，并且在大部分情况下可以使用，然后在以下情况下，请使用post请求：
1. 无法使用缓存文件(更新服务器上的文件或者数据库)。
2. 向服务器发送大量数据(POST没有数据量限制)。
3. 发送包含未知字符的用户输入时，post比get更稳定也更可靠。
使用GET请求会有缓存，所以为了避免这种情况，需要在url后面增加唯一的id，比如可以加一个时间戳。
GET请求存在安全性，也就是说安全性不高，且传输的数据有限制，所以要发送大量的数据如上所说，请使用POST请求。
注意：使用GET请求经常会发生一个错误，就是查询字符串格式会有问题，查询字符串中每个参数的名称和值必须使用encodeURIComponent()进行编码，然后才能放到url的末尾，而且所有名-值对必须由和号(&)分隔，如下面所示：
Xhr.open(“GET”,”ajax.txt?name1=value1&name2=value2”,true);
不过我们可以使用下面的函数可以辅助现有的url的末尾添加查询字符串参数。
<script type="text/javascript">
function getXhr(){
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('MicroSoft.XMLHTTP');
}
return xhr;
}
document.getElementById("username").onfocus=function(){
document.getElementById("sp1").innerHTML="<font color='greenyellow'>请输入用户名</font>";
}
document.getElementById("username").onblur=function(){
var username = document.getElementById("username").value;
if(username != ""){
document.getElementById("sp1").innerHTML="<font color='red'></font>";
var xhr = getXhr();
xhr.open("GET","/login?username="+username);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var msg = xhr.responseText;
if(msg.indexOf("ok")!=-1){
document.getElementById("sp1").innerHTML="<font color='greenyellow'>√用户名可以使用</font>";
}else{
document.getElementById("sp1").innerHTML="<font color='red'>×该用户名已存在</font>";
}
}
}
xhr.send();
}else{
document.getElementById("sp1").innerHTML="<font color='red'>用户名不能为空</font>";
}
}
</script>
As follows:
POST请求：
一个简单的post请求如下：
xhr.open('POST','checkName');
xhr.send(null);
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：如下所示：
xhr.open('POST','checkName');
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("username="+username);
<script type="text/javascript">
function getXhr(){
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('MicroSoft.XMLHTTP')
}
return xhr;
}
document.getElementById("username").onfocus=function(){
document.getElementById("sp1").innerHTML="<font color='greenyellow'>请输入用户名</font>";
}
document.getElementById("username").onblur=function(){
var username = document.getElementById("username").value;
if(username != ""){
document.getElementById("sp1").innerHTML="<font color='red'></font>";
var xhr = getXhr();
xhr.open("POST","/checkName");
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var msg = xhr.responseText;
if(msg.indexOf("ok")!=-1){
document.getElementById("sp1").innerHTML="<font color='greenyellow'>√用户名可以使用</font>";
}else{
document.getElementById("sp1").innerHTML="<font color='red'>×该用户名已存在</font>";
}
}
}
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("username="+username);
}else{
document.getElementById("sp1").innerHTML="<font color='red'>用户名不能为空</font>";
}
}
</script>
HTTP header information:
每个http请求和相应都会带有相应的头部信息，其中有的对开发人员有用，有的没有什么用，XHR对象也提供了操作这两种头部(即请求头部和相应头部)信息的方法。
默认情况下，在发送XHR请求的同时，还会发送下列头部信息。
Accept： 浏览器能够处理的内容类型。
Accept-Charset：浏览器能够显示的字符集。
Accept-Encoding：浏览器能够处理的压缩编码。
Accept-Language：浏览器当前设置的语言。
Connection：浏览器与服务器之间连接的类型。
Cookie: 当前页面设置的任何cookie。
Host： 发出请求的页面所在的域。
Referer：发出请求的页面的URL。
User-Agent: 浏览器的用户代理的字符串。