title: why this jquery ajax doesn't work?
body: <p>if i run this, i get the "sending" messages but "received" message doesn't show up. why? the error message is No Transport in the fail and error block.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="http://www.hotmail.com"&gt;hotmail.com&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.google.com"&gt;google.com&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $("a").each(function (index) {
              var sUrl = 'http://tinyurl.com/api-create.php?url=' + $(this).attr('href')
              alert('sending: ' + sUrl);
              $.ajax({
                  url: sUrl,
                  crossDomain: true
              }).fail(function (data) {
                  alert('failed: ' + data.statusText);
              }).error(function (data) {
                  alert('error: ' + data.statusText);
              }).done(function (data) {
                  alert('received: ' + sUrl);
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>edit: the accepted answer uses $.getJSON which calls $.ajax internally. for those who may be interested in low level $.ajax, here you go.</p>
  
  <pre><code>$('a').each(function (index) {
      var app = 'http://json-tinyurl.appspot.com/';
      var sUrl = app + '?url=' + $(this).attr('href') + '&amp;callback=?';
      $.ajax({
          url: sUrl,
          dataType: 'json',
          success: function (data) {
              alert('ajax:' + data.tinyurl);
          },
          error: function (jqXHR, textStatus, errorThrown) {
              alert("jqXHR=" + jqXHR.responseText + "\ntextStatus=" + textStatus + "\nerrorThrown=" + errorThrown);
          }
      });
  });
  </code></pre>