ajax에서 비동기 속성 값의 동기화와 비동기 및 동기화와 비동기성의 차이점-JS 튜토리얼-php.cn

ajax에서 비동기 속성 값의 동기화와 비동기 및 동기화와 비동기성의 차이점

亚连

풀어 주다： 2018-05-24 15:26:18

원래의

1712명이 탐색했습니다.

Jquery의 ajax 메서드에서는 async를 사용하여 동기화 및 비동기성을 제어합니다. async 값이 true이면 비동기 요청이고, async 값이 false이면 동기 요청입니다. ajax의 async 속성은 데이터 요청 방식을 제어하는 데 사용됩니다. 기본값은 true입니다. 이는 기본적으로 데이터가 비동기식으로 요청된다는 의미입니다.

jquery의 ajax 메서드에는 동기화 및 비동기성을 제어하기 위한 async 속성이 있습니다. 즉, ajax 요청은 기본적으로 비동기 요청입니다. 이 동기화의 의미는 JS 코드가 현재 AJAX에 로드되면 페이지의 모든 코드가 로드를 중지하고 페이지가 일시 중단된 애니메이션 상태로 표시된다는 것입니다. AJAX가 완료되면 계속 실행됩니다. 다른 코드와 페이지의 일시 중지 상태가 해제됩니다. 이 AJAX 코드가 실행되는 동안 다른 코드가 비동기적으로 실행될 수 있습니다.

ajax의 async 속성은 데이터 요청 방식을 제어하는 데 사용됩니다. 기본값은 true입니다. 이는 기본적으로 데이터가 비동기식으로 요청된다는 의미입니다.

1. async 값은 true(비동기)입니다.

ajax가 요청을 보내면 서버가 반환될 때까지 프론트 데스크는 서버가 올바른 결과를 반환할 때까지 ajax 블록 뒤에서 스크립트를 계속 실행합니다. 성공하려면, 즉 이때 두 개의 스레드가 실행됩니다. ajax 블록 뒤의 한 스레드는 요청을 보내고 ajax 블록 뒤의 스크립트(다른 스레드)

예를 들어

$.ajax({  
     type:"POST", 
     url:"Venue.aspx?act=init", 
      dataType:"html", 
     success:function(result){  //function1()
       f1(); 
       f2();  
    } 
     failure:function (result) {  
      alert(&#39;Failed&#39;);  
     }, 
 } 
 function2();

로그인 후 복사

위의 예에서 ajax 블록이 요청을 하면 function1()에 머물며 서버가 반환될 때까지 기다리지만 동시에(이 대기 프로세스 동안) 포그라운드는 function2()를 실행합니다.

2. async 값이 false(동기)입니다.

현재 AJAX가 실행되면 다음 JS 코드의 실행이 중지되며, AJAX가 완료될 때까지 다음 JS 코드의 실행을 계속할 수 없습니다.

예를 들어

$.ajax({  
     type:"POST", 
     url:"Venue.aspx?act=init", 
     dataType:"html", 
     async: false,
    success:function(result){  //function1()
       f1(); 
       f2(); 
     } 
    failure:function (result) {  
      alert(&#39;Failed&#39;);  
     }, 
 } 
 function2();

로그인 후 복사

asyn이 false로 설정되면 ajax 요청은 동기식입니다. 즉, 이때 ajax 블록이 요청을 보낸 후 function1()에서 대기합니다. function2()는 function1() 부분이 실행될 때까지 실행되지 않습니다.

Ajax 동기화와 비동기성의 차이점

var returnValue = null; 
xmlhttp = createXmlHttp(); 
xmlhttp.onreadystatechange = function() { 
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
    if (xmlhttp.responseText == "true") { 
      returnValue = "true"; 
    } 
    else { 
      returnValue = "false"; 
    } 
  } 
}; 
xmlhttp.open("Post",url,true); //异步传输 
xmlhttp.setRequestHeader("If-Modified-Since","0"); //不缓存Ajax
xmlhttp.send(sendStr); 
return returnValue;

로그인 후 복사

xmlHttpReq.onreadystatechange 상태 값은 비동기적으로만 사용할 수 있습니다! 다음은 비동기식 및 동기식의 다양한 호출 방법입니다.

Java

xmlHttpReq.open("GET",url,true);//异步方式
  xmlHttpReq.onreadystatechange = showResult; //showResult是回调函数名
  xmlHttpReq.send(null);
function showResult(){  
  if(xmlHttpReq.readyState == 4){   
   if(xmlHttpReq.status == 200){
   ******
   }
  }
}

로그인 후 복사

Java

xmlHttpReq.open("GET",url,false);//同步方式  
      xmlHttpReq.send(null);  
      showResult(); //showResult虽然是回调函数名但是具体用法不一样~  
function showResult(){   
       //if(xmlHttpReq.readyState == 4){  这里就不用了，直接dosomething吧~  
        //if(xmlHttpReq.status == 200){  
          ******//dosomething  
        //}  
      //}  
}
xmlhttp.open("Post",url,true);

로그인 후 복사

동기식(false)인 경우 반환 값은 true 또는 false입니다. send가 실행된 후 onreadystatechange가 실행되기 시작합니다. 프로그램은 onreadystatechange가 완료될 때까지 기다린 후 responseText를 얻은 후 다음 명령문을 계속 실행하므로 returnValue에 값이 있어야 합니다.

비동기(true)인 경우 반환 값은 null이어야 합니다. 프로그램이 send를 실행한 후 xmlhttp의 응답을 기다리지 않고 다음 문을 계속 실행하므로 returnValue가 null을 반환하기 전에 null이 반환되었기 때문입니다. 변경되었습니다.

xmlhttp 반환 값을 얻으려면 동기화를 사용해야 합니다. 반환 값은 비동기적으로 얻을 수 없습니다.

xmlhttp 풀을 동기식 및 비동기식으로 사용할 때 주의하세요. xmlhttp를 얻을 때 새 xmlhttp만 생성할 수 있고 사용된 xmlhttp의 ReadyState가 4이므로 풀에서 사용된 xmlhttp를 꺼낼 수 없습니다. 동기식 및 비동기식으로 전송되지만 onreadystatechange를 실행하지는 않습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.