CORS Page Load Demo

Load content into div container with jQuery AJAX.

by Steve Tsiopanos

HTML

<button>Examample CORS</button>
<p>Request URL: <span id="requestUrl"></span></p>
<p>Total Time: <span id="totalTime"></span></p>
<h2><span id="title"></span></h2>
<h3><span id="version"></span></h3>
<div id="output"></div>

CSS

h2 {
  font-family:Helvetica;
}
#output{
  margin:5px;
  font-family:Helvetica;
}
p {
  font-family:Helvetica;
  font-size: 11pt;
}

JavaScript

jQuery('button').on('click', function() {
        var requestUrl= "https://www.annatech.com/api/v1/slim/swagger";
        var start = new Date().getTime();
        jQuery.ajax({
            url: requestUrl,
            type: "GET",
            success: function (resultData) {
            		totalTime = new Date().getTime() - start;
            		jQuery( "#title" ).empty();
                jQuery( "#requestUrl" ).empty();
                jQuery( "#totalTime" ).empty();
            		jQuery( "#output" ).empty();
                jQuery( "#version" ).empty();
                
                jQuery( "#output" ).append(resultData.info.description).html;
                jQuery( "#version" ).append('Version '+resultData.info.version).html;
                jQuery( "#title" ).append(resultData.info.title).html;
                jQuery( "#requestUrl" ).append(requestUrl).html;
                jQuery( "#totalTime" ).append(totalTime+ 'ms').html;
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('error');
            },

            timeout: 120000
        });
    });