How to make an AJAX call immediately on document loading <p>I want to execute an ajax call as soon as a document is loaded. What I am doing is loading a string that contains data that I will use for an autocomplete feature. This is what I have done, but it is not calling the servlet. </p> <p>I have removed the calls to the various JS scripts to make it clearer. I have done several similar AJAX calls in my code but usually triggered by a click event, I am not sure what the syntax for doing it as soon as the document loads, but I thought this would be it (but it's not):</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;script src="../js/jquery.js" type="text/javascript"&gt; &lt;/script&gt; &lt;link rel="stylesheet" href="../css/styles.css" type="text/css"&gt; &lt;link rel="stylesheet" href="../css/jquery.autocomplete.css" type="text/css"&gt; &lt;script type="text/javascript" src="../js/jquery.bgiframe.min.js"&gt; &lt;/script&gt; &lt;script type="text/javascript" src="../js/jquery.dimensions.js"&gt; &lt;/script&gt; &lt;script type="text/javascript" src="../js/jquery.autocomplete.js"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $.ajax({ type: "GET", url: "AutoComplete", dataType: 'json', data: queryString, success: function(data) { var dataArray = data; alert(dataArray); } }); $("#example").autocomplete(dataArray); }); &lt;/script&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; API Reference: &lt;form&gt;&lt;input id="example"&gt; (try "C" or "E")&lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><b>EDIT:</b> my code now looks more like Karim's:</p> <pre><code>$(document).ready(function(){ $.ajax({ type: "GET", url: "../AutoComplete", success: function(data) { $("#example").autocomplete(data); } }); }); </code></pre> <p>Nonetheless the autocomplete still doesn't work (admittedly another question altogether, so I will also post another question so it has an appropriate title).</p> <p>My variable "data" that is being sent back looks like ... "Manuscript|Text|Information Object|Basketball|Ball|Sporting Equipment|Tarantula".split("|");</p> <p>If I do </p> <pre><code>var dataArray = "Manuscript|Text|Information Object|Basketball|Ball|Sporting Equipment|Tarantula".split("|"); </code></pre> <p>and then</p> <pre><code>$("#example").autocomplete(dataArray); </code></pre> <p>It all works fine, but when I get the value of dataArray from the server it doesn't.</p>