ajax基础入门
在上家公司，我自认为我ajax用的已经非常6,因为使用jquery的ajax已经能处理各种数据与错误，但感觉只是会用，但是并不能说出它的所以然，也并不能说出它的五个步骤：
- 准备发送请求 (调用 new XMLHttpRequest()) (readyState == 0)
- 打开一个请求 (调用open方法) (readyState == 1)
- 发送请求 (调用send方法,并且接收到响应头) (readyState == 2)
- 开始接受到请求 (readyState == 3)
- 接受完成 (readyState == 4)
所以我打算恶补一下ajax的基础，虽然它可能并没有多么高深，但是我认为以为合格的前端汪，
- 会看懂js语法会使用js才能算入门，
- 把语法基础基本弄明白把js的每个细胞研究一遍算初级，
- 能够思考js算中级
而此时我应该算入门到初级的中间。
Ajax核心对象XMLHttpRequest
这个对象最早在IE中被实现，不过它最早的时候是通过ActiveXObject实现的，如果不需要管兼容的话，IE9或者其他浏览器使用 newXMLHttpRequest() 就能创建了一个 XHR (XMLHttpRequest) 对象,IE中由于存在三个版本的XHR对象，所以如果需要兼容，需要对这三个版本进行处理，从中选出IE浏览器中最新支持对象：
var xhr = null;
if (typeof XMLHttpRequest != undefined){
xhr = new XMLHttpRequest();
}else if(typeof ActiveXObject != undefined){
xhr = (function(){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
for (var i =0,ilen = versions.length;i<ilen;i++) {
try{
//避免不支持当前版本报错
new ActiveXObject[versions[i]];
//保存当前支持的版本
argument.callee.ActiveXString = versions[i];
}
catch (e) {}
}
//返回一个当前浏览器支持的版本的XHR对象
return new ActiveXObject(argument.callee.ActiveXString);
})() ;
}
上面这段代码就做了第一阶段的事情，初始化一个请求
打开一个请求 open
xhr.open(); //xhr是通过new XMLHttpRequest()返回的对象 并没有发送请求，它只定义了请求的类型，url，以及是否异步，
如： xhr.open("get","index.html",false);
第一个参数：最常见的请求类型有post和get两种方法，
第二个参数：url如果没有指定完整的（带协议前缀的如: http://,https:// ）url地址，那么它的地址相对当前执行代码的页面，
第三个参数：Ajax最优秀的地方便是可以异步同步发送请求，第三个参数false代表同步，true代表异步。
post跟get的区别
对于前端，对它能体现对大的区别就是传参不同，get的参数放在url地址后面以 ?abc=1&bcd=2&dd=3&s=4 的形式传递，而post的参数放在请求主体内，通过 xhr.send() 发送， xhr.send("任何想发送给服务器的字符串");
url
url相对与执行当前代码的页面。
在页面http://mydomin.com/test/obj/index.html中调用了xhr.send()表示请求在index.html页面发送，那么url响应的地址就是http://mydomin.com/test/obj/我的请求的url地址。
如果是一个完整的地址，那么必须是同域的情况下才允许发送请求，否在会引发安全报错，同域：同端口同协议的url地址
http://baidu.com:80
协议:http
端口:80
同步与异步的区别
同步请求必须接收完(到达第四阶段)响应才会继续往下执行代码，
而异步请求会在发出一个请求继续执行不会阻碍流程，
不管是同步或在异步当接收完完响应之后会调用onreadystatechange方法，当xhr属性的readystate的值为4（第四阶段）的时候表示接受完成 xhr.onreadystatechange = function(e){} ，除了第零阶段，几乎每个阶段都对调用onreadystatechange方法，但取决于浏览器的实现。
发送一个请求 xhr.send()
xhr.send() 阶段才是真真的发起请求阶段，几乎可以用来发送任何数据，在这个阶段，
如果是异步请求，那么调用之后就会直接执行下面的代码，
如果是同步请求，那么需要等到readyState的值为4也就是接收完所有响应之后才会往下执行。
接受响应
xhr对象有四个关于响应的属性
- responseText (响应文本)
- responseXML （如果响应头是text/xml或在application/xml那么响应数据会添加到这个属性）
- status (响应状态码,200,304,404,500等等)
- statusText (响应状态说明)
无论响应的是什么样的内容，都会把服务器返回的内容存在 xhr.responseText 中，所以有时候只需关注 xhr.responseText ，
只有响应头的类型是text/xml或在application/xml的时候 xhr.responseXML 才会填充响应数据
status
不同的状态码表示响应的状态，
| 0 | 响应失败(老版的opear可能会错误的把204作为0处理) |
| 200 | 响应成功、缓存没有失效直接使用缓存(from cache)或者服务器响应成功 |
| 204 | 有些浏览器会错误的返回204，响应成功，但是没有数据 |
| 304 | 响应成功，直接读取缓存，与200(from cache)不同的是，304询问了服务器之后，服务器告知浏览器缓存没有失效可以直接使用 |
| 404 | 响应成功，但是没有找到对应的资源 |
| 500 | 响应成功，服务器内部出现错误 |
statusText：表示对响应状态的说明，不过有时候并不能准确解释状态，如我直接访问一个发起一个跨域的请求的时候，statusText为空，并且每个浏览器对状态的描述并不是所有的都一致。
虽然jQuery已经把所有的步骤都封装好，让技术员指需要关注成功与否，但很多时候了解其中的原理，处理问题会让人更加灵活并且得心应手。