> 웹 프론트엔드 > JS 튜토리얼 > jQuery의 ajax 속성 async에 대한 자세한 예

jQuery의 ajax 속성 async에 대한 자세한 예

黄舟
풀어 주다: 2017-12-04 16:48:25
원래의
2202명이 탐색했습니다.

일상적인 개발 작업에서 Ajax는 우리 모두가 배워야 하는 것입니다. 따라서 jquery의 ajax에서 동기화 또는 비동기성을 달성하려면 비동기 발생을 true 또는 false로 직접 설정할 수 있습니다. . 오늘은 jQuery의 ajaxpropertyasync 예제를 소개하겠습니다!

예제 1, jquery+ajax/" target="_blank">jquery ajax 동기화 방법

코드는 다음과 같습니다.

$.ajax({
url : 'test.php',
type : 'post',
async: false,//使用同步的方式,true为异步方式
data : {'act':'addvideo', 'videoname':videoname},//这里使用json对象
success : function(data){
//code here...
},
fail:function(){
//code here...
}
});
로그인 후 복사

예제 2

코드는 다음과 같습니다

//javascript
function test()
{
 var a= 1;
 $.ajax({
  type   : 'GET',
  url    : 'test.php',
  data   : 'page=112',
  success:function(msg)
  {
   alert(msg);
   a= msg;
  }
 })
 alert(a);
}
//test.php
sleef('5'); //休息五分钟
echo 'in';
/*
 这个程序运行情况是  先打印1(a=1) 然后五秒过后 打印 in
 根据这个情况就可以知道 jquery 的ajax的执行流程 
 因为是异步调用
 以前就是这样给一个变量赋值  不管怎么弄都是不对的。最后就发现这个问题
 参数async改为false就为同步调用 当ajax返回结果后程序才继续执行
*/
로그인 후 복사

여기서, async의 기본 설정 값이 true인 경우 이 상황은 비동기식입니다. 즉, Ajax가 요청을 보낸 후 서버가 반환될 때까지 기다리는 동안 프론트 데스크는 Ajax 블록 뒤에서 스크립트를 계속 실행하며 성공할 때까지 실행하지 않습니다. 즉, 이때 두 개의 스레드가 실행됩니다. ajax 블록 뒤의 한 스레드는 요청을 보내고 ajax 블록 뒤의 스크립트(다른 스레드)는
예제 3

코드는 다음과 같습니다:

$.ajax({  
          type:"POST", 
         url:"Venue.aspx?act=init", 
           dataType:"html", 
          success:function(result){   //function1()
             f1(); 
             f2(); 
        } 
         failure:function (result) {  
            alert('Failed');  
         }, 
  } 
  function2();
로그인 후 복사

위의 예에서 ajax 블록이 요청을 보낸 후 function1()에 머물며 서버에서 반환을 기다리지만 동시에(이 대기 프로세스 동안) 프론트 데스크는 function2()를 실행할 것입니다. 즉, 이번에는 두 개의 스레드가 나타날 것입니다. 여기서는 function1()과 function2()라고 부르겠습니다.
asyn이 false로 설정되면 ajax 요청은 동기식입니다. 즉, ajax 블록이 요청을 보낸 후 function1() 부분이 실행될 때까지 function2()를 실행하지 않습니다.

요약:

동기화는 의미합니다. JS 코드가 현재 AJAX에 로드되면 페이지의 모든 코드가 로드를 중지하고 페이지가 일시 중지된 애니메이션 상태에서 벗어나며 이 페이지가 실행된 후에도 다른 코드가 비동기적으로 계속 실행됩니다. 이 AJAX 코드가 실행되는 동안에도 실행될 수 있습니다. ES6의 비동기 솔루션

자바스크립트에서 비동기 사용법에 대한 자세한 설명

위 내용은 jQuery의 ajax 속성 async에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿