title: JavaScript Document.Write Replaces All Body Content When Using AJAX
body: <p>I am creating a simple ajax call that retrieves the content of a specified url and writes it to the page.  The problem I am having is that it replaces the entire body contents with this information</p>
  
  <p>here is the JS:</p>
  
  <pre><code>(function(){
      var mb = window.mb = {};
  
      function get_ad(url, parameters){
          var result = "";
          var http_request = false;
  
          if (window.XMLHttpRequest) { // Mozilla, Safari,...
              http_request = new XMLHttpRequest();
              if (http_request.overrideMimeType) {
                  http_request.overrideMimeType('text/html');
              }
          } else if (window.ActiveXObject) { // IE
              var avers = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"];
              for (var i = avers.length -1; i &gt;= 0; i--) {
                  try {
                      http_request = new ActiveXObject(avers[i]);
                      if (http_request){
                          break;  
                      }
                  } catch(e) {}
              }
          }
          if (!http_request) {
              alert('Cannot create XMLHTTP instance');
              return false;
          }
  
          http_request.onreadystatechange = function(){
                                                if (http_request.readyState == 4) {
                                                   if (http_request.status == 200) {
                                                      gen_output(http_request.responseText);
                                                   } else {
                                                      alert('Error');
                                                   }
                                                }
                                             }
  
          http_request.open('GET', url + parameters, true);
          http_request.send(null);
      }
  
      function gen_output(ad_content){
          document.write("&lt;div id=\"mb_ad\"&gt;");
          document.write(ad_content);
          document.write("&lt;/div&gt;");
      }
  
      get_ad("http://localhost/test/test.html", "");
  })();
  </code></pre>
  
  <p>and here is the html:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      i am text before &lt;br/&gt;
      &lt;script type="text/javascript" src="mb.js"&gt;&lt;/script&gt;
      &lt;br /&gt;
      i am text after 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>using firebug to inspect, i do not see the text before or the text after, just the <code>&lt;div id="mb_ad"&gt;</code> and the content from the test.html page.  If i remove the ajax call and just do 3 <code>document.writes</code> the text before and the text after will display properly.  jQuery is not an option, I have to do this without the help of a large library as size and speed are of the essence.</p>