Ajax技术的核心是XMLHttpRequest对象，简称XHR。
一、XMLHttpRequest对象
XHR最早由IE引入并实现，原生的XHR仅支持IE7以上版本。如果要兼容IE6，需作另外处理(ActiveXObject对象)。
1、简单ajax函数的封装：
function ajax( method , url , data ){
var xhr = null ;
if( window.XMLHttpRequest ){ xhr = new XMLHttpRequest() ; }
else{ xhr = new ActiveXObject("Microsoft.XMLHTTP") ; }
if( method.toLowerCase() = "get" ){ url = url + "?" + data ; }
xhr.open( method , url ,true );
xhr.onreadystatechange = function(){
if( xhr.readyState===4 ){
if( xhr.status ===200){
oMsg.innerHTML = xhr.responseText ;
}else{
console.log( xhr.statusText , xhr.status );
}
}
}
if( method.toLowerCase() = "get"){ send() ; }
else{
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded" );
xhr.send( data ) ;
}
}
2、XHR的用法
xhr.open()：调用open()方法并不会真正发送请求。
参数：请求类型 , 请求URL , 是否异步请求。
xhr.send(): 调用send()方法后，请求会被分发到服务器。
参数：如果不需要发送数据，则必须传入null。 //对某些浏览器是必须的。
xhr.readyState ：表示请求/响应过程中的当前活动阶段。值为0 1 2 3 4 :
- 值为0：未初始化。尚未调用open()方法。
- 值为1：启动。已经调用open()方法，尚未调用send()方法。
- 值为2：发送。已经调用send()方法，但尚未收到回应数据。
- 值为3：接收。开始接收到响应数据。
- 值为4：完成。已经接收到所有响应数据。
每次readyState值的变化，都会触发readystatechange事件。可以利用这个事件来检测每次状态变化后readystate的值。
3、get请求与post请求
get请求：get请求需要将数据放在url中，通过open()的URL参数一起提交给后台。
get请求在open传递url的时候，键值对(key/value)需要进行encodeURIConent()编码。
post请求：post请求需要将数据放在send()中，提交给后台。
数据为经过序列化之后的字符串。
post请求需要模仿表单提交数据：设置头部信息。
xhr.setRequestHeader( " Content-Type " , " application/x-www-form-urlencoded " );
get请求与post请求的区别：
- get请求将数据放在url中，适用于隐私性要求低的请求。
- post请求需要设置请求头信息。
- posty请求比get请求更消耗资源。
- url长度限制决定了get请求的大小，post请求对数据大小更宽松。
二、升级版XML:XMLHttpRequest 2.0
1、FormData
创建了FormData的实例后，可以将它直接传给XHR的send()方法。
1 var data = new FormData( document.forms[0] ) ; 2 xhr.send( data );
使用FormData发送post请求，就不用再设置请求头了。