Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
12
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
5
  <meta charset="utf-8">
6
  <title>XHR requests to external data</title>
7
</head>
8
<body>
9
<p>The JS in this bin does all the work, but the actual data that's used to respond to the ajax request is stored in a completely separate bin.</p>
10
  <ul id="out"></ul>
11
</body>
12
</html>
6
 
1
body {
2
  background: white;
3
  font-family: sans-serif;
4
  font-size: 18px;
5
  font-weight: 200;
6
}
17
 
1
var $out = $('#out');
2
​
3
setTimeout(function () {
4
  var request = $.ajax('//jsbin.com/megax.json', {
5
     dataType: 'json'
6
   });
7
8
  request.then(function (result) {
9
    var html = '<li><strong>Loaded from external bin: <code><a href="http://jsbin.com/megax/edit?js">megax</a></code></strong></li>';
10
    $.each(result, function (key, value) {
11
      html += '<li>' + key + ': ' + value + '</li>';
12
    });
13
    $out.html(html);
14
  }, function () {
15
    alert('The request failed');
16
  });
17
}, 1000);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x