title: AJAX loop, calling function onload vs. manually in the console/code
body: <p>I have 2 functions:</p>
  
  <pre><code>function find_existing_widgets(){
      xmlHttp = new XMLHttpRequest();
      xmlHttp.open('GET', './_includes/check-load-user-settings.php', true);
      xmlHttp.onreadystatechange = open_existing_widgets;
      xmlHttp.send(null);
  }
  
  
  function open_existing_widgets(){
      if(xmlHttp.readyState==4 &amp;&amp; xmlHttp.status==200)
      {
          xmlResponse = xmlHttp.responseXML;
          root = xmlResponse.documentElement;
  
          var widget_id = root.getElementsByTagName('widget_id');
          var name = root.getElementsByTagName('name');
          var type = root.getElementsByTagName('type');
          var value = root.getElementsByTagName('value');
  
          for(i= 0; i&lt; name.length; i++)
          {
              nameText = name.item(i).childNodes[0].nodeValue;
              widgetID = widget_id.item(i).childNodes[0].nodeValue;
              //var value = name.item(i).firstChild.data;
              alert(nameText);
              nameText = nameText.replace(/\s+/g,'_');
              //alert(value); WORKS
              widget_creator();
              load = "./widgets/"+nameText+"/index.php?widget_id="+widgetID;
              //alert(load);  WORKS
              $('.wrapper:first .main_sec').load(load);
              $('.wrapper:first').fadeIn(1000);
          }
  
      }
  }`
  </code></pre>
  
  <p>4 scenarios:</p>
  
  <p><strong>one.</strong> running the function <code>find_existing_widgets()</code> onload on the <code>&lt;body&gt;</code> tag and works perfect. runs once and shows data accordingly</p>
  
  <p><strong>two.</strong> running same function before the <code>&lt;/body&gt;</code> tag like: <code>&lt;script&gt;find_existing_widgets()&lt;/scripts&gt;</code> and this causes an infinite loop.</p>
  
  <p><strong>three.</strong> running the same function as <code>window.onload = find_existing_widgets();</code> in JS code. and this cause the same issue as two, infinite loop.</p>
  
  <p><strong>four.</strong> if I run it manually from the console it works perfectly.</p>
  
  <p>Why the loop? what's the difference ?</p>
  
  <p>Once there you'll see the execution that is looping. I am using AJAX, all the javascript can be seen in the dev tools in chrome. </p>
  
  <p><strong>Example:</strong> </p>
  
  <p>josesebastianmanunta.com/animated3/login.php   user: smanunta pass: password</p>