ajax 요청 배경, 반환 값 을 받 지 못 할 때 가 있 습 니 다.

어제 오후 에 프로젝트 를 하 다가 문제 가 하나 생 겼 는데, 붙 여 놓 으 면 나중에 뒤 져 볼 수 있 고, 여러분 에 게 도 참고 할 수 있 습 니 다.
질문:
구체 적 으로 하 는 것 은 파일 가 져 오 는 기능 입 니 다. 가 져 오 는 기능 은 성 공 했 지만 화면 은 반환 값 을 얻 지 못 했 습 니 다. 오후 내 내 검 사 를 했 습 니 다. 디 버 깅 할 때 돌아 올 수 있 지만 브 라 우 저 디 버 깅 인터페이스 를 끄 면 결 과 를 얻 지 못 했 습 니 다.
원인:
제 백 스테이지 프로그램 에 문제 가 있다 고 생각 하고 저녁 에 집에 돌아 와 서 야 ajax 의 문제 가 생각 났 습 니 다. ajax 의 비동기 처 리 를 동기 화 하 는 것 으로 바 꾸 면 효과 가 나 왔 습 니 다. 구체 적 인 원인 은 다음 글 을 보 세 요.
jquery 에서 ajax 방법 은 동기 화 와 비동기 화 를 제어 하 는 속성 이 있 습 니 다. 기본 값 은 true 입 니 다. 즉, ajax 요청 은 기본적으로 비동기 요청 입 니 다. 때로는 프로젝트 에서 AJAX 동기 화 를 사용 합 니 다.이 동기 화 는 JS 코드 를 현재 AJAX 에 불 러 올 때 페이지 에 있 는 모든 코드 를 불 러 오지 않 고 페이지 에 가사 상태 가 나타 나 이 AJAX 가 실 행 된 후에 야 다른 코드 페이지 의 가사 상태 가 해 제 됩 니 다.이 보 는 이 AJAX 코드 가 실 행 될 때 다른 코드 처럼 실 행 될 수 있 습 니 다.
ajax 에서 async 라 는 속성 은 요청 데 이 터 를 제어 하 는 데 사 용 됩 니 다. 기본 값 은 true 입 니 다. 즉, 기본 값 은 비동기 방식 으로 데 이 터 를 요청 합 니 다.
1. async 값 은 true (비동기)
ajax 가 요청 을 보 낸 후에 server 단 이 돌아 오 기 를 기다 리 는 과정 에서 프론트 데스크 는 ajax 블록 뒤의 스 크 립 트 를 계속 실행 합 니 다. server 단 이 정확 한 결 과 를 되 돌려 야 success 를 실행 할 수 있 습 니 다. 즉, 이때 실 행 된 것 은 두 스 레 드 입 니 다. ajax 블록 이 요청 한 다음 스 레 드 와 ajax 블록 뒤의 스 크 립 트 (다른 스 레 드) 입 니 다.

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

상례 에서, aax 블록 이 요청 을 보 낸 후, 그 는 function 1 () 에 머 물 러 서버 의 귀환 을 기다 리 지만, 동시에 (이 기다 리 는 과정 에서) 프론트 데스크 에서 function 2 () 를 실행 합 니 다.
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('Failed');  
     }, 
 } 
 function2(); 

asyn 을 false 로 설정 할 때 ajax 의 요청 이 동기 화 되 었 습 니 다. 즉, 이때 ajax 블록 이 요청 을 한 후에 그 는 function 1 () 이 있 는 곳 에서 function 2 () 를 실행 하지 않 고 function 1 () 부분 이 실 행 될 때 까지 기다 릴 것 입 니 다.
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   ！               ：

xmlHttpReq.open("GET",url,true);//    
  xmlHttpReq.onreadystatechange = showResult; //showResult      
  xmlHttpReq.send(null);
function showResult(){  
  if(xmlHttpReq.readyState == 4){   
   if(xmlHttpReq.status == 200){
   ******
   }
  }
}

 

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 로 돌 아 왔 습 니 다.
모든 xmlhttp 반환 값 을 얻 으 려 면 동기 화 를 사용 해 야 합 니 다. 비동기 적 으로 반환 값 을 얻 을 수 없습니다.
동기 화 비동기 화 xmlhttp 풀 을 사용 할 때 주의해 야 합 니 다. xmlhttp 를 가 져 올 때 xmlhttp 만 새로 만 들 수 있 습 니 다. 풀 에서 사용 한 xmlhttp 를 꺼 낼 수 없습니다. 사용 한 xmlhttp 의 ready State 는 4 이기 때문에 동기 화 비동기 화 는 send 이지 만 onreadystatechange 를 실행 하지 않 습 니 다.
원문:https://yq.aliyun.com/ziliao/107005
다음으로 전송:https://www.cnblogs.com/laoyeye/p/6955210.html