title: API AJAX Get Request
body: <p>I would like to make an API <code>GET</code> request with ajax. I have a jquery function take an api key value from the 1st input field  and then display a concatenate result on input field #2 <code>url + api key</code>. I need to make the get request to the value displayed in the 2nd input field. How can I accomplish this get request? The target server is setup to allow for cross-domain scripting <a href="http://webprolearner.ueuo.com/concatenate/" rel="nofollow">SITE</a></p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function () {
      $(document).ready(function() {
  
    /** get the inputs we might need */
    var $result = $('#result');
    var $input = $('#input');
  
    $result.data('url', $result.val());
    var timer;
  
    /** function to submit data to the server and
        update the result input on success */
    function submitForm( input, newValue) {
      $.ajax({
        type: "POST",
        url: "/concatenate/index.php",
        data: {input:input},
        success: function (data) {
          $result.val(newValue);
        }
      });
    };
  
    /** on key up, fill #result with the url + input */
    $input.bind('keyup', function() {
      var $this = $(this);
      var inp = $this.val();
      var url = $result.data('url');
      var newValue = url + inp + '/';
  
      if(timer) { clearTimeout(timer); }
      timer = setTimeout(function(){
        submitForm(inp, newValue) ;
      }, 40);
      return false;
    });
  
  });
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;Enter a word:&lt;/h1&gt;
  
  &lt;form action="index.php" method="post"&gt;
  API Key: &lt;input type="text" id="input" name="input"&gt;&lt;/br&gt;
  Concatenated Url + API: &lt;input type="text" style="width:200px;" id="result" name="result" value="http//www.example.com/"&gt;&lt;/br&gt;
  &lt;/form&gt;
  </code></pre>