在AJAX响应后重新触发javascript默认事件

Question

我有一个基于选项卡的设置，并且标签内容是异步加载的。

<nav> 
    <ul> 
    <li><a href="/default" class="handle current" data-handle="default">OVERVIEW</a></li> 
    <li><a href="/services" class="handle" data-handle="services">SERVICES</a></li> 
    <li><a href="/clients" class="handle" data-handle="clients">CLIENTS</a></li> 
    </ul> 
</nav> 
</div> 
    <div class="tab selected" data-handle="default" data-populated="true">Some stuff in here.</div> 
    <div class="tab unselected" data-handle="services" data-source="/services-snipet" data-populated="false"></div> 
    <div class="tab unselected" data-handle="clients" data-source="/clients-snipet.html" data-populated="false"></div> 
</div> 

我已附加事件到handle类，使得它可以移动current类和适当地切换selected/unselected类。但是，在进行切换之前，它将在新选项卡上检查dataset["populated"]。如果这是false，它将通过AJAX加载dataset["source"]并填充。

此外，我使用event.preventDefault()作为该过程的一部分，以免跟随标签本身的链接。

所有这一切都工作得很好。

问题是我想能够重新触发默认事件 - 链接 - 如果AJAX请求失败或超时。有没有某种方式暂停/延迟默认事件，直到我有异步AJAX响应，所以可以决定，如果我想防止它呢？有没有一种替代机制可以让我在开始时阻止它，然后在AJAX失败或超时时重新触发它？或者，我是唯一选择阅读this的href并在失败情况下重定向页面？

（无jQuery的，请）

Answer 1

在你的Ajax调用以填充failiure你可以改变document.location.href强制重定向：

DEMO

function ajax(event) { 
    console.log(event); 
    if(event.detail === 1) { 
     event.preventDefault(); 
     var target = event.target; 
     var xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4) { 
       if(xmlhttp.status == 200){ 
        //Do normal stuff 
       } 
       else 
       { 
        //Do the same event but without prevetion 
        target.click(); 
       } 
      } 
     } 

     xmlhttp.open("GET", "ajax.php", true); 
     xmlhttp.send(); 
    } 
}; 

var elements = document.querySelectorAll("li a"); 
for(i=0; i<elements.length; i++) { 
    elements[i].addEventListener("click", ajax, false); 
}