How to unset an ajax loading.

Question

Hi, I have this script which loads external content:

<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>

This is the select that retrieves the content:

<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>

And this is the container div:

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

All I whish to know is how I can unset the ajax loading when I change the selection to "Select one...". I wish to say, how restoring the Default content once the "Select one..." option is selected.

Answer 1

If you use the same XMLHttpRequest object every time, instead of making a new instance at every call, the pending connection will be aborted, the event handler will be disconnected and the object will be reset when calling http_request.open() a second (or third, etc.) time (reference).

Answer 2

I think something like this would be what you want:

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);
  }
}