title: Running Javascript at the end of page load
body: <p>I am trying to request a page in Ajax and a normal GET request. My basic layout is like this:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      //css file
    &lt;/head&gt;
  
   **************
    &lt;body&gt;
  
    &lt;script&gt; &lt;/script&gt; // this script needs to be loaded at the end of the page load in both GET and AJAX
  
    &lt;/body&gt;
  
   *****************
    //js files (jQuery)
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>THE area in * is loaded by ajax</strong></p>
  
  <p>If I make a GET request, I get the complete page. And if I make an Ajax request, I get only the body part (no jQuery).</p>
  
  <p>Now, the body tag contains a script tag.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    window.onload = function() {
      $.getJSON("/loc", function (data) {
        // .......
      });
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>This code runs fine when I make a GET request. This script gets executed after the page loads. But when I make an Ajax request, the script doesn't execute, because the page is already loaded.</p>
  
  <p>So I tried:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
      $.getJSON("/loc", function (data) {
        .....
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>Now this works fine with Ajax, but doesn't work with a GET request, because jQuery is at the end of the page.</p>
  
  <p>script tag is inside the body tag and the jquery is after the body tag, so if i move it after the jQuery. So I need to make 2 designs for my page: 1 for my Ajax request and 1 for my GET request. If not in Ajax I will end up loading the jQuery script twice.</p>
  
  <p>So my question is can I have a single script that runs for both Ajax and GET requests?</p>