MooTools 요청이 실패했습니다.

MooTools를 사용하여이 작업을 수행하려고합니다.MooTools 요청이 실패했습니다.

설명 :

나는 세 개의 버튼이있다. myDiv 외부 버튼 두 개와 myDiv 버튼 하나.
이 버튼 중 하나를 클릭하면 AJAX 요청이 시작되고 (button 변수를 "button.php"로 전달) 응답 문안에 따라 myDiv 콘텐츠가 업데이트됩니다.
업데이트 후 myDiv은 Button3 링크 + 클릭 한 메시지를 보여줍니다.

는 문제 :

다 잘하지만, 몇 번의 클릭 후, myDiv이 loader.gif 이미지를 보여줍니다 정지 것을 어떻게 작동하는 것 같다. 그 후에 잠시 기다리면 브라우저가 작동을 멈추는 경우가 있습니다 (차단됨).
IE6에서이 문제점을 발견했습니다.

누군가가이 문제의 의미와 피할 수있는 점을 말할 수 있습니까?

index.html을

<html> 
<head> 
<script type="text/javascript" src="mootools/mootools-1.2.4-core-nc.js"></script> 
<script type="text/javascript" src="mootools/mootools-1.2.4.4-more.js"></script> 
<script type="text/javascript"> 
window.addEvent('domready', function() { 
    $("myPage").addEvent("click:relay(a)", function(e) { 
    e.stop(); 
    var myRequest = new Request({ 
     method: 'post', 
     url: 'button.php', 
     data: { 
     button : this.get('id'), test : 'test' 
     }, 
     onRequest: function() { 
     $('myDiv').innerHTML = '<img src="images/loader.gif" />'; 
     }, 
     onComplete: function(response) { 
     $('myDiv').innerHTML = response; 
     } 
    }); 
    myRequest.send(); 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="myPage"> 
    <a href="#" id="button1">Button1</a> 
    <a href="#" id="button2">Button2</a> 
    <div id="myDiv"> 
    <a href="#" id="button3">Button3</a> 
    </div> 
</div> 
</body> 
</html>

있는 button.php

<a href="#" id="button3">Button3</a> 
<br><br> 
<?php echo 'You clicked ['.$_REQUEST['button'].']'; ?>

출처

2010-06-09 acoder

IE에서만 발생합니까? +1 잘 쓰여진 질문 – Anurag

이 샘플 코드를 Firefox 3.6.3 및 Opera 10.53에서 테스트했지만 비정상적인 동작을 발견하지 못했습니다. 문제는 IE6에서만 발생합니다. – acoder

음, 코드 자체에 아무 문제가 없습니다. 여기에 당신이 시도 할 수있는 작업은 다음과 같습니다

사용 onSuccess 대신 onComplete 및 console.log 응답 - 무슨 의심스러운 일이 있는지 확인합니다. 아마도 IE에서 JS 오류를 일으키는 나쁜 반응을 보였을 것입니다 (인라인 하나에 블록 요소를 삽입하지 않거나 의미없는 기발함을 삽입하려고하지 않습니까?)
그냥 사용하는 경우 el.set('html', response)el.innerHTML
확인의 Element.Delegation는 어떤 점

에서을 상실하지 않는 경우에 우리가 코드보다 디버그 주변에 찌를 수 http://jsfiddle.net에 작업 예제를 만듭니다.

출처

2010-06-09 19:06:15

onSuccess 및 el.set ('html', response)이 문제를 해결하지 못했습니다. console.log를 사용하는 방법이나 Element.Delegation이 손실되지 않는지 확인하는 방법을 잘 모르겠습니다. 앞에서 말한 것처럼 문제는 잘못된 응답 일 수 있습니다. 몇 번 다음 메시지가 나타납니다. "잘못된 요청 브라우저가이 서버에서 이해할 수없는 요청을 보냈습니다 .또한 요청을 처리하기 위해 ErrorDocument를 사용하려고 시도하는 동안 404 찾을 수 없음 오류가 발생했습니다." – acoder

정확히 무슨 일이 일어나는지 보려면'console.log (response)'를 추가하십시오. IE의 개발자 도구 (또는 무엇이든 그것을 호출하는)를 열어야합니다. 응답에 대한 유효성 검사를 수행하십시오. 이상한 응답을 받으면이 응답에서 추가 작업을 수행하지 마십시오. 그렇지 않으면 오류가 발생합니다. if 문이 여기에 충분합니다. –

http://www.jsfiddle.net/dimitar/VZuGz/

가 잘 작동 - 내가 클릭 한 상태를 저장하는 부울을 추가 한 알 - 그것은 단지 문제가되는 한 경우 한 번에 1 개 아약스 요청의 처리 수 (최대 대기 요청 수).

이 방식에서는 동기가없는 동기식입니다.아무리 빨리 클릭해도 모든 클릭을 기록해야한다면 http://mootools.net/docs/more/Request/Request.Queue을 사용할 수 있지만 중계되는 요소의 출력은 클릭 할 수 없도록 설정할 수 있습니다 (클릭 가능).

p.s. 나는 최근에 mootools에서 히트 맵 로깅을위한 클래스를 작성했다. 당신이하는 일과 비슷한 일을한다. 내가 향하고있는 방향으로 알려주면 코드를 공유하게되어 기쁘다.

(function() { 
    var clicked = false;  
    $("myPage").addEvent("click:relay(a)", function(e) { 
     e.stop(); 
     if (clicked) 
      return; // do 1 ajax at a time. 

     new Request.HTML({ 
      method: 'POST', 
      url: '/ajax_html_echo/', 
      data: { 
       button : this.get('id'), test : 'test', 
       html: '<a href="#" id="button3">Button3</a><br><br>You clicked id ' + this.get("id") 
      }, 
      onRequest: function() { 
       $('myDiv').set("html", 'loading...'); 
       clicked = true; 
      }, 
      onComplete: function() { 
       $('myDiv').set("html", this.response.text); 
       clicked = false; 
      } 
     }).send(); 
    }); 
})();

출처

2010-06-10 10:15:08

MooTools 요청이 실패했습니다.

답변

관련 문제