Search code examples
javascriptajaxxmlhttprequest

XMLHttpRequest - freeing after use?


I'm writing a browser app that would be entirely AJAX-driven (first time in my life), that means:

  • it will be one page staying in the browser, loading program components as needed
  • browser history will be, well, none.
  • page will not be refreshed at all

My concern is what should I do about XMLHttpRequests, since I'm primarily C++ programmer, being taught that when you write a statement like

x = new XMLHttpRequest();

you need to delete it afterwards.

This question is entirely about memory management, whether this object, allocated with new stays in memory, even after it finishes it's "cycle" with readyState == 4 or is somehow released, freed, whatchacallit? Honestly, I have no idea at what point could it be freed, since the script creating these will be in HEAD and sit there potentially whole workday. Whether should I:

  • create one or several, reused objects of type XMLHttpRequest, program the app so that it won't need any more than this limit,
  • or it doesn't matter and I can allocate as many new XMLHttpRequests as I like?

Please include in your answers at what point and WHY those objects would be deleted, if they would at all, considering that the "frame" of my webpage will stay. Hope I made this question clear and thanks for any insightful answers.

EDIT:

Consider code (I removed many lines that were checking for unexpected return values for brevity) of an onClick event handler, that creates XMLHttpRequest and sends it:

function submitme(){  
  var p = document.getElementById('p'); //a text field being sent to server
  if(typeof p!='undefined' && p!=null){
    if(p.value!=""){
      //here XMLHttpRequest is created, this function
      //returns exactly object of this type or false, when failed
      var xhr=createXmlHttpRequestObject();
      if(xhr!=false){
        xhr.open("POST", "blablabla.php", true);
        xhr.onreadystatechange=function(){
          if(xhr.readyState==4){
             if(xhr.status==200){
               //result will be posted in this div below
               var adiv = document.getElementById('resultdiv');
               //extract the XML retrieved from the server
               xmlResponse = xhr.responseXML;
               //obtain the document element (the root element) of the XML structure
               xmlDocumentElement = xmlResponse.documentElement;
               //get the response text
               if(typeof adiv !='undefined' && adiv != null){
                  adiv.innerHTML=xmlDocumentElement.childNodes[0].firstChild.nodeValue;
               }
             }//end xhr.status
           }//end xhr.readyState
         };//end xhr.onreadystatechange
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         xhr.send(p.value);
       }//end xhr!=false
     }//end p.value!=""
   }//end typeof p!='undefined'
 }//end submitme()

When XMLHttpRequest object instance is created, if this handler is fired, it is referenced once by xhr variable until handler finishes to execute. At this point there are how many references to this object instance? If I understand articles linked in your answers correctly, the answer should be none, and browser just waits for this request to turn readystate==4, finish executing onreadystatechange function and object is unreachable? Please confirm.


Solution

  • JavaScript has an automatic built-in garbage collector.

    You might want to read this article: