jQuery AJAX calls

by Alon Rotem

HTML

<input type="button" id="callService" value="Make a service call!"></input>
<div id="loadingPanel"> <i>Please wait...</i>
    <br/>
    <img src="http://www.sharegif.com/wp-content/uploads/2013/09/21/pacman-gif-5.gif"></img>
</div>
<div id="responseArea"></div>

CSS

#loadingPanel {
    display: none;
}

JavaScript

$(function () {
    $("#callService").click(buttonClicked);
});

function buttonClicked() {
    $("#loadingPanel").show();
    $.ajax({
        url: '/gh/get/response.html/zalun/jsFiddleGithubDemo/tree/master/Demo/',
        type: 'post',
        data: {
            'delay': 10
        },
        async: true,
        success: function (response) {
            $("#responseArea").html("<b>Response from the server:</b><br/>" + response.substring(0, response.indexOf("<" + "script")));
        },
        error: function () {
            $("#responseArea").text("An error has occurred...");
        },
        complete: function (data, status) {
            $("#loadingPanel").hide();
        }
    });
}