ajax原理

1 捡电话                         创建ajax链接                                          
2 拨号                             打开链接
3 说话                             发送请求
4 听                                接收响应

ajax的核心

                                   XMLHttpRequest

GET 情况下

创建ajax链接

不兼容IE6
var oAjax = new XMLHttpRequest();
兼容IE6 7 8
var oAjax = new ActiveXObject('Microsoft.XMLHTTP')
兼容写法
if(window.XMLHttpRequest){
  var oAjax = new XMLHttpRequest()
}else{
  var oAjax = new ActiveXObject('Microsoft.XMLHTTP')
}

打开链接

oAjax.open('打开方式','url？data',是否异步)
                      异步能同时做很多事
                      同步一次只能做一件事
oAjax.open('GET','xxx？xxx=xxx'，true)

发送请求

oAjax.send();

接收响应

ajax状态码：

0 准备成功 未发送

1 发送成功

2 接收原始数据成功

3 解析数据成功

4 完成

http状态码;3位数

2字头代表成功

304 重定向（Not Modify）

oAjax.onreadystatechange = function(){
          判断ajax状态码
          if(oAjax.readyState==4){
                    判断http码 
                  if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){                              
                             成功
                        oAjax.responseText
                         响应文本       
            }else{
                          失败
}
      }  
}

POST 情况下

创建ajax链接

不兼容IE6
var oAjax = new XMLHttpRequest();
兼容IE6 7 8
var oAjax = new ActiveXObject('Microsoft.XMLHTTP')
兼容写法
if(window.XMLHttpRequest){
  var oAjax = new XMLHttpRequest()
}else{
  var oAjax = new ActiveXObject('Microsoft.XMLHTTP')
}

打开链接

oAjax.open('打开方式','url？data',是否异步)
                      异步能同时做很多事
                      同步一次只能做一件事
oAjax.open('POST','url'，true)

设置请求头部

oAjax.setRequestHeader('content-Type','application/x-www-form-urlencoded');

发送请求

oAjax.send(data);

接收响应

ajax状态码：

0 准备成功 未发送

1 发送成功

2 接收原始数据成功

3 解析数据成功

4 完成

http状态码;3位数

2字头代表成功

304 重定向（Not Modify）

oAjax.onreadystatechange = function(){
          判断ajax状态码
          if(oAjax.readyState==4){
                    判断http码 
                  if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){                              
                             成功
                        oAjax.responseText
                         响应文本       
            }else{
                          失败
}
      }  
}