2-ajax 异步-非阻塞 / 同步-阻塞

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-ajax</title>
<!--<script src="jquery-1.10.1.min.js"></script>-->
<script>
// $(function(){}) //阻塞--同步

// 非阻塞--异步
/*setTimeout(function(){
alert(1);
},2000);

alert(2);*/

window.onload = function(){

　　var oBtn = document.getElementById('btn');

　　oBtn.onclick = function(){

　　　　//打开浏览器
　　　　/*
　　　　1.创建一个ajax对象
　　　　e6以下new ActiveXObject('Microsoft.XMLHTTP')

　　　　*/
　　　　var xhr = null;

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

　　　　//在地址栏输入地址
　　　　/*
　　　　　　open方法
　　　　　　参数
　　　　　　　　1.打开方式
　　　　　　　　2.地址
　　　　　　　　3.是否异步
　　　　　　　　　　异步:非阻塞 true 前面的代码不会影响后面代码的执行
　　　　　　　　　　同步:阻塞 false 前面的代码会影响后面代码的执行
　　　　*/
　　　　xhr.open('get','1.txt',true);
　　　　//提交

　　　　xhr.send();

　　　　//alert(1);

　　　　//alert(xhr.responseText);

　　　　//等待服务器返回内容

　　　　xhr.onreadystatechange = function(){

　　　　　　if (xhr.readyState == 4) {
　　　　　　　　alert(xhr.responseText);
　　　　　　}

　　　　}

　　}
}

</script>
</head>
<body>
　　<input type="button" value="按钮" id="btn"/>
</body>
</html>

posted @ 2017-05-14 17:54  少海  阅读(570)  评论(0)    收藏  举报