javascript - 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类，以便它可以移动当前类并切换选中/未选中 适本地类。但是，在进行切换之前，它会检查新选项卡上的dataset["populated"]。如果这是false，它将通过AJAX加载数据集[“source”]并填充。

此外，我使用 event.preventDefault() 作为流程的一部分，以免点击选项卡本身上的链接。

所有这些都运行良好。

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

(请不要使用 jQuery)

Answer 1

在失败时填充的 ajax 调用中，您可以更改 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);
}