title: External API GET() request using jQuery
body: <p>I am using the <a href="http://www.imdbapi.com/" rel="noreferrer">IMDb API v2.0</a> located here and I decided to test it. I can't. I think it's beacuse of cross-browser AJAX request from external sites.. but I don't know any other way. For example, here's a test at <a href="http://www.imdbapi.com/?t=Avatar" rel="noreferrer">imdbapi avatar</a></p>
  
  <p>See? Here's my code.</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" xml:lang="en" lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /&gt;
  
  
      &lt;title&gt;IMDB api&lt;/title&gt;
  
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
      $(document).ready(function()
  {
      $('#movie').keyup(function() {
  
         var yourMovie = $("#movie").val();
    $("#debug").append("You are searching for ... "+yourMovie+"\n");
  
  dataString = "t=Avatar";
  
  $.ajax({
  type: "GET",
  url: "http://www.imdbapi.com/",
  cache: false,
  data: dataString,
  
  success: function(html){
  //$("#more").after(html);
  alert("Success!");
  }
  
  });
  });
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;form action="#" method="get" enctype="text/html" &gt;
  &lt;input type="text" id="movie" maxlength="50" /&gt;
  
  &lt;/form&gt;
  
  &lt;div id="other"&gt;
    Trigger the handler
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;textarea id="debug" style="width: 500px;height:150px;border:1px solid black;font-face:typewriter;"&gt;&lt;/textarea&gt;&lt;br /&gt;
  &lt;textarea id="more" style="width: 500px;height:150px;border:1px solid red;font-face:typewriter;"&gt;&lt;/textarea&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am using Google Chrome. </p>
  
  <p>Here's what worked for me:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      $(document).ready(function()
  {
      $('#movie').keyup(function() {
  
         var yourMovie = $("#movie").val();
    $("#debug").append("You are searching for ... "+yourMovie+"\n");
  
  dataString = "callback=?&amp;t=Avatar";
  
  $.getJSON('http://www.imdbapi.com/', dataString, function(html){
  //$("#more").after(html);
  alert("Success!");
  });
  
  
  });
  });
  &lt;/script&gt;
  </code></pre>