Как сбросить загрузку 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() в секунду ( или третье и т. д.) время ( ссылка ).