jQuery Ajax CORS Example

by Jason Aden

HTML

<div id="container">
    
    <h2>Photos</h2>
    
    <p>Loading...</p>
    
</div>

CSS

img{
    width:20px;
    height:20px;
    float:left;
    margin:2px;
}

JavaScript

var photoLimit = 50;

var prom = $.ajax({
    url: "http://jsonplaceholder.typicode.com/photosx",
    type: "GET"
});
prom.done(function(response) {
    
    $("p", "#container").hide();
    
    console.log(response);
    
    var $container = $("#container");
    
    var photos = [];
    
    response.length = photoLimit;
    response.forEach(function(val, i) {
		
        var $newPhotoEl = $("<img>");
        
        $newPhotoEl.attr("src", val.thumbnailUrl);
        
        photos.push($newPhotoEl);
        
    });
    
    $container.append(photos);
    
});