iframe 대신 AJAX를 사용하는 방법

Question

GUI가로드되면 모든 요청에 ​​대해 JS, Prototype 및 AJAX를 사용하여 적절한 웹 응용 프로그램을 만들려고합니다. 앱은 간단합니다. iframe처럼 링크가 가리키는 것을 표시하는 링크 집합과 컨테이너 요소 집합입니다. 다음은 대략적인 HTML 코드는 다음과 같습니다

<a class="ajax" href="/somearticle.html">An article</a> 
<a class="ajax" href="/anotherarticle.html">Another article</a> 
<a class="ajax" href="/someform.html">Some form</a> 
<div id="ajax-container"></div> 

다음과 같습니다 (이 조금 긴이이야 죄송합니다) 위의 함께 제공된 JS :

document.observe('dom:loaded', function(event) { 
    ajaxifyLinks(document.documentElement); 
    ajaxifyForms(document.documentElement); 
}); 

function ajaxifyLinks(container) { 
    container.select('a.ajax').each(function(link) { 
     link.observe('click', function(event) { 
      event.stop(); 
      new Ajax.Updater($('ajax-container'), link.href, { 
       method: 'get', 
       onSuccess: function(transport) { 
        // Make sure new ajax-able elements are ajaxified 
        ajaxifyLinks(container); 
        ajaxifyForms(container); 
       } 
      }); 
     }); 
    }); 
} 

function ajaxifyForms(container) { 
    console.debug('Notice me'); 
    container.select('form.ajax').each(function(form) { 
     form.observe('submit', function(event) { 
      event.stop(); 
      form.request({ 
       onSuccess: function(transport) { 
        $('ajax-container').update(transport.responseText); 
        // Make sure new ajax-able elements are ajaxified 
        ajaxifyLinks(container); 
        ajaxifyForms(container); 
       } 
      }); 
     }); 
    }); 
} 

링크를 클릭, 응답이 용기에 표시됩니다. 나는 어떤 점에서 JS를 통해 서로 통신 할 수 있도록 페이지의 모든 요소를 ​​원하기 때문에 컨테이너의 iframe을 사용하지 않습니다. 이제 하나의 큰 문제와 하나의 이상한 현상이 있습니다 :

문제점 : 양식이 컨테이너에 반환되고 표시되는 경우 위의 JS는 양식에 동일한 동작을 적용하려고 시도하므로 제출 후 응답을받습니다. 컨테이너에 표시됩니다. 제출 이벤트가 포착되지 않으므로 실패합니다. 왜? 리턴 된 모든 양식 요소에는 class = "ajax"속성이 있습니다.

현상 : ajaxifyForms()의 console.debug() 문에 유의하십시오. 페이지가로드 된 후 콘솔로 출력되고 컨테이너가 양식으로 업데이트 될 때마다 출력됩니다. 사실은 폼을 가리키는 링크를 클릭 할 때마다 콘솔 출력 수가 두 배로 늘어나는 것입니다. 왜?

Answer 1

내가 원하는 것을 얻기 위해 다른 방법을 찾았습니다. 사실 그렇게하기위한 코드는 작고 오류가 발생하기 쉽습니다. 주어진 시간에 페이지의 각 링크와 양식 요소를 확인하려고하는 대신 이벤트 버블 링을 사용하고 문서 자체 만 듣습니다. 거품이 나는 각 사건을 조사하면서, 그것이 AJAX 요청의 대상인지 여부를 결정할 수 있습니다. 여기에 새로운 JS이다 : 마법처럼

document.observe('submit', function(event) { 
    if (event.target.hasClassName('ajax')) { 
     event.stop(); 
     event.target.request({ 
      onSuccess: function(transport) { 
       $('ajax-container').update(transport.responseText); 
      } 
     }); 
    } 
}); 

document.observe('click', function(event) { 
    if (event.target.hasClassName('ajax')) { 
     event.stop(); 
     new Ajax.Updater($('ajax-container'), event.target.href, { 
      method: 'get' 
     }); 
    } 
}); 

작품 :