Ajax流程对象的创建和兼容处理（笔记）

 ajax的大致流程是这样的：

1. 创建XMLHttpRequest对象；
2. 设置http请求状态变化回调函数；
3. 打开http请求，并且设置请求方法、url和验证信息；
4. 发送请求；
5. 在响应的回调函数中，根据改变的状态和请求状态码，获取异步请求返回的数据；
6. 渲染返回的数据；

function ajaxProcess() {
  var xhr = null;
  xhr = window.XMLHttpRequest? new XMLHttpRequest(): new ActiveObject('Microsoft.XMLHTTP');
  xhr.onreadystatechange = function() {
    if(xhr.readystate === 4) {
      if(xhr.state == 200) {
        successFn();
      }
    }
  };
  xhr.open("get", "www.baidu.com", true);
  xhr.send();
}

 在上面中readyState标识当前XMLHttpRequest对象处于什么状态：

0：未初始化，new操作之后；

1：请求已经建立（已经打开），但是还没有调用发送；

2：请求已经发送；

3：正在接收；

4：接收完成；

xhr.state ==>响应的http状态码：

 

 <button id="btn">查询</button>
  <script>
    window.onload = function() {
      var oBtn = document.getElementById('btn');
      oBtn.onclick = function() {
          var xhr = new XMLHttpRequest();//打开流浪器
          xhr.open('get','1.txt',true);//在地址栏中输入地址
          xhr.send();//提交
          xhr.onreadystatechange = function() {//等待服务器返回内容
          if(xhr.readyState == 4) {
            alert(xhr.responseText);
            responseText: Ajax请求返回的内容就被存放到这个属性下面(字符串来的)
            readyState：ajax工作的状态（有五个值，）
            onreadyStatechange(当状态值发生改变的时候，触发事件)
          }
        }
      }
    }

1、var xhr = new XMLHttpRequest() //创建ajax对象 （该对象在ie6以下有兼容性问题，ie6以下为 new ActiveXObject('Microsoft.XMLHTTP'))，以下方式可以兼容ie6：

       var xhr = null;
        try {
          xhr = new XMLHttpRequest();
        }catch(e) {
          xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

var xhr = null;
if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
}else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

2、open()方法有三个参数，第一个参数是打开方式、第二个参数是地址、第三个参数是指是否异步；