해당 콘텐츠가 Ajax 호출에서 나온 경우 div 콘텐츠에 액세스하는 데 문제가 있습니다.

StackOverflow https://stackoverflow.com/questions/75181

  •  09-06-2019
  •  | 
  •  

문제

다음은 매우 간단한 프로토타입 예제입니다.

그것이 하는 일은 창 로드 시 일부 HTML을 div에 추가하는 Ajax 호출입니다.

<html>
    <head>
        <script type="text/javascript" src="scriptaculous/lib/prototype.js"></script>
        <script type="text/javascript">
            Event.observe(window, 'load', function(){
                new Ajax.Request('get-table.php', {
                    method:  'get',
                    onSuccess:  function(response){
                        $('content').innerHTML = response.responseText;
                        //At this call, the div has HTML in it
                        click1();
                    },
                    onFailure:  function(){
                        alert('Fail!');
                    }
                });
                //At this call, the div is empty
                click1();
            });

            function click1(){if($('content').innerHTML){alert('Found content');}else{alert('Empty div');}}
        </script>
    </head>
    <body><div id="content"></div></body>
</html>

혼란스러운 점은 Prototype이 div에 실제로 내용이 포함되어 있음을 이해하는 컨텍스트입니다.

ajax 호출의 onSuccess 부분을 보면 $('content').innerHTML에 내용이 포함되어 있음을 알 수 있습니다.

그러나 Ajax 호출 직후 $('content').innerHTML을 확인하면 비어 있는 것으로 보입니다.

이것은 내 입장에서 근본적인 오해가 있어야합니다.나한테 설명해주실 분 계신가요?

편집하다
나는 단지 뭔가를 명확히하고 싶습니다.Ajax 호출이 비동기식이라는 것을 알고 있습니다.

작업이 실행되는 실제 순서와 이것이 혼란스러운 이유는 다음과 같습니다.

  1. 페이지가 로드됩니다.
  2. get-table.php에 대한 Ajax 요청이 이루어졌습니다.
  3. click1() INSIDE onSuccess에 대한 호출이 발생합니다.div에 콘텐츠가 있다는 경고가 표시됩니다.
  4. Ajax 호출이 발생한 후 click1()에 대한 호출입니다.div가 비어 있다는 경고가 표시됩니다.

따라서 코드는 작성된 순서대로 실행되지만 DOM은 동일한 순서로 업데이트되지 않는 것과 같습니다.

편집 2따라서 짧은 대답은 onSuccess에 코드를 넣는 것이 올바른 위치라는 것입니다.

고려해야 할 또 다른 경우는 Ajax 호출을 수행한 다음 다음과 같이 첫 번째 호출의 onSuccess에서 또 다른 Ajax 호출을 수행하는 경우입니다.

new Ajax.Request('foo.php',{
  method:  'get',
  onSuccess:  function(response){
    doAnotherAjaxCall();
  }
  });

function doAnotherAjaxCall(){
  new Ajax.Request('foo.php',{
    method:  'get',
    onSuccess:  function(response){
      //Anything that needs to happen AFTER the call to doAnotherAjaxCall() above
      //needs to happen here!
    }
  });
}

});

도움이 되었습니까?

해결책

AJAX의 첫 글자는 "비동기"를 의미합니다.이는 AJAX 호출이 백그라운드에서 수행됨을 의미합니다.AJAX 요청 호출 즉시 반환.이는 실제로 정상적으로 실행된 직후의 코드를 의미합니다. ~ 전에 onSuccess 핸들러가 호출됩니다(그리고 AJAX 요청이 완료되기도 전에).

편집된 질문을 고려하면 다음과 같습니다.일부 브라우저(예:Firefox), 경고 상자는 생각만큼 모달이 아닙니다.비동기 코드는 다른 경고 상자가 이미 열려 있는 경우에도 경고 상자를 표시할 수 있습니다.이 경우 최신 경고 상자(비동기 코드의 경고 상자)가 이전 경고 상자 위에 표시됩니다.이는 비동기 코드가 먼저 실행되었다는 착각을 불러일으킵니다.

다른 팁

코드를 시도하지 않고:AJAX 호출은 비동기적으로 실행됩니다.Ajax.Request가 실행된 다음 div가 비어 있음을 알려주는 click1() 호출로 이동한다는 의미입니다.그 후 어느 시점에서 Ajax 요청이 완료되고 콘텐츠가 실제로 div에 저장됩니다.이 시점에서 onSuccess 함수가 실행되고 예상한 내용을 얻습니다.

비동기식 Ajax 호출입니다.이는 해당 요청 호출 직후 응답이 아직 돌아오지 않았음을 의미합니다. 이것이 바로 $('content')가 여전히 비어 있는 이유입니다.

AJAX 호출을 처리하기 위해 만들고 있는 함수 호출의 onSuccess 요소는 get-table.php에서 응답을 받을 때 실행됩니다.이것은 get-table.php에서 응답을 얻을 때 브라우저에 호출하도록 지시하는 별도의 Javascript 함수입니다.AJAX.Request 호출 아래의 코드는 AJAX.Request 호출이 이루어지자마자 액세스되지만 반드시 get-table.php가 호출되기 전에는 액세스할 수 없습니다.그렇습니다. AJAX의 작동 방식에 대해 약간의 근본적인 오해가 있다고 생각합니다. 아마도 세부 사항을 숨기기 위해 라이브러리를 사용하기 때문일 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top