如何取消ajax加载

Question

我有一个加载外部内容的脚本：

<script type="text/javascript">
var http_request = false;
function makePOSTRequest(url, parameters) {
    http_request = false;
    if (window.XMLHttpRequest) {
        http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {
            http_request.overrideMimeType('text/html');
        }
    } else if (window.ActiveXObject) {
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
    if (!http_request) {
        alert('Cannot create XMLHTTP instance');
        return false;
    }
    http_request.onreadystatechange = alertContents;
    http_request.open('POST', url, true);
    http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http_request.setRequestHeader("Content-length", parameters.length);
    http_request.setRequestHeader("Connection", "close");
    http_request.send(parameters);
}

function alertContents() {
    if (http_request.readyState == 4) {
        if (http_request.status == 200) {
            result = http_request.responseText;
            document.getElementById('opciones').innerHTML = result;            
        } else {
            alert('Hubo un problema con la operación.');
        }
    }
}

function get(obj) {
  var poststr = "port_post=" + encodeURI( document.getElementById("port-post").value );
  makePOSTRequest('http://www.site.com/inc/metaform.php?opcion='+ encodeURI( document.getElementById("port-post").value ), poststr);
}
</script>

这是检索内容的选择：

<select name="port_post" id="port-post" onchange="get(this.parentNode);">
    <option value="1">Select one...</option>
    <option value="2">Pear</option>
    <option value="3">Pineapple</option>
</select>

这是容器 div：

<div id="opciones">Default content</div>

我想知道的是，当我将选择更改为“选择一个...”时，如何取消 ajax 加载设置”。我想说的是，一旦选择“选择一个...”选项，如何恢复默认内容。

Answer 1

我认为这样的事情就是你想要的：

function get(obj) {
  var selObj = document.getElementById('port_post');
  var selectedVal = selObj.options[selObj.selectedIndex].value; //this is more Xbrowser compatible than your previous method
  if (selectedVal == 1){
      if (http_request)
         http_request.abort();
      document.getElementById('opciones').innerHTML = 'Default content';
  } else {
      var poststr = "port_post=" + encodeURI( selectedVal );
      makePOSTRequest('http://www.site.com/inc/metaform.php?opcion='+ encodeURI(selectedVal ), poststr);
  }
}

Answer 2

如果每次都使用相同的 XMLHttpRequest 对象，而不是在每次调用时创建一个新实例，则挂起的连接将被中止，事件处理程序将被断开，并且在调用 http_request.open()< 时该对象将被重置/code> 第二次（或第三次等）时间 (参考）。