深入理解ajax同步和异步的区别

Posted 2020-10-31

1. 说明：

   同步可以改变外部定义的变量值，异步可以提高加载效率

2. 示例：
   a. 说明：
   
   b. 原代码：

   <script>
   var a = 0
   function loadDoc(file,async=true){
   if(window.XMLHttpRequest){  // code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
   }else{  // code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   if(async === true){
       xmlhttp.onreadystatechange = function(){
           if(xmlhttp.readyState < 4){
               // 加载中
           }else if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
               // 成功
               xmlDoc=xmlhttp.responseText;
               a = 1
               return xmlDoc
           }else{
               // 失败
               xmlhttp.abort()
               return
           }
       }
   }
   xmlhttp.open("GET",file,async);
   xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xmlhttp.send();
   if(async === false){
       xmlDoc=xmlhttp.responseText;
       a = 1
       return xmlDoc
   }
   }
   var ret = loadDoc(‘http://localhost/test.php‘,true)
   console.log(a)
   var ret = loadDoc(‘http://localhost/test.php‘,false)
   console.log(a)
   </script>