3-ajax流程对象的创建和兼容处理 15:31

类似网站上浏览网页的行为，通过案例模拟该行为：

案例3.ajax-process.html

<input type="button" value="按钮" id="btn" />
<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 );
            }
        }
    }
  }
</script>

Ajax过程具体说明：

window.onload = function() {
    
    var oBtn = document.getElementById('btn');
    
    oBtn.onclick = function() {
        
        //打开浏览器
        /*
        1.创建一个ajax对象

            ie6以下new ActiveXObject('Microsoft.XMLHTTP')
            [ActiveXObject：IE6以下内置插件的总称；
            该插件是微软出的，所以前面写上Microsoft
            ]
        */
        // 1) 先定义一个对象
        var xhr = null;

        // 2) 然后兼容性处理：

        // 兼容性处理第一种方案：
        //我们拿一个IE6以下不存在的对象XMLHttpRequest做判断，依然会出错，可以在其前面加上window,这样就是判断window的属性是否存在，不存在会返回undefined，而不会报错
        /*if (window.XMLHttpRequest) { 
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }*/

        // 兼容性处理第2种方案：异常处理
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        //在地址栏输入地址
                /*
                2.创建一个新的HTTP请求，
                并指定该HTTP请求的方法、URL及验证信息
               */

        /*
        open方法
            参数：
            1.打开方式
            2.地址（发送请求的地址）
            3.是否异步
                异步:非阻塞 前面的代码不会影响后面代码的执行
                同步:阻塞 前面的代码会影响后面代码的执行
        */
        xhr.open('get','1.txt',true);
        //提交 发送请求
                //4.发送HTTP请求；
        xhr.send();
        
        //alert(1)
        
        //alert( xhr.responseText );
        
        //等待服务器返回内容
                //3.设置响应HTTP请求状态变化的函数；
        xhr.onreadystatechange = function() {
            //5.获取异步调用返回的数据；
            if ( xhr.readyState == 4 ) {
                alert( xhr.responseText );
            }
            
        }
        
    }
}

补充--异常处理机制：

异常处理机制：

小案例01

//alert(a); //控制台会报错，后面的代码无法执行
try {
  //代码尝试执行这个块中的内容,如果有错误，则会执行catch{}，  并且传入错误信息参数
  alert(a); //同样会有错误发生，但不会终止代码执行，会跳转到catch语句
} catch (e) {
  alert(2);
}

alert('到这里了'); //即使a未定义，后面的代码依然可以执行：2和到'到这里了'都可以弹出

效果图如下：

异常处理机制01.gif

小案例02 ：

try {
  alert(window);
} catch (e) {
  alert(2);
}

alert('到这里了');

效果图02：

异常处理机制02.gif

小案例03：

try {
  alert(a);
} catch (e) {
  alert(e);  //会弹出：ReferenceError: a is not defined
}

小案例04--手动抛错

try {
  // 手动抛错
  throw new Error('错了错了'); //了解
} catch (e) {
  alert(e);
}
alert(2);

效果图04：

异常处理机制04-手动抛错.gif