Correct usage of ajax response, ajaxStart and ajaxComplete

Note: I am using jQuery 1.9

I am not sure if this is the correct way to make an ajax request and do the typical loading/processing gif/animation while processing is happening and displaying the response.

I pieced together the code using some questions and answers on stackoverflow.

HTML:

<!-- start content -->
<div class='content'>

    <!-- start setup section -->
        <div class='photo-setup'>

            <div class='setup-head'>
                <div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name' value='Untitled'></div>
            </div>

            <div class='photo-section'>
                <img src="<?php echo 'tmp/' . $imgUpload->getFileName() . $imgUpload->getType() ?>" alt='photo'>
            </div>

            <div class='tag-section'>
                Photo Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
            </div>

            <div class='ajax-loading'>
                <img src='ajax-loader.gif'>
            </div>

            <div class='response'>
            </div>

            <div class='commit-section'>
                <a class='save' href='#'>Save</a><a class='cancel' href='upload.php'>Cancel</a>
            </div>

        </div>
    <!-- end setup section-->

</div>
<!-- end content -->

CSS:

img { border: none; }
input { padding: 0.30em; }

.photo-setup {
    width: 600px;
    height: auto;
    margin: 0 auto;
    font-weight: 200;
    font-size: 0.9em;
    letter-spacing: 1px;
}

.setup-head {
    border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
    border-top: 1px solid #cacece;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 1em;
    overflow: hidden;
}

.photo-name { float: left; }

.photo-section {
    border: 1px solid #cacece;
    text-align: center;
}

.tag-section {
    padding: 1em 0 1em 1em;
}

.tag-section input {
    width: 81%;
    display: inline-block;
}

.ajax-loading {
    text-align: center;
    margin: 1em;
    display: none;
}

.response {
    display: none;
    text-align: center;
}

.commit-section {
    text-align: center;
}

.commit-section a {
    margin-left: 1em;
}

jQuery:

$(document).ready(function() {

    $('.save').on('click', function(e) {
        e.preventDefault();
        save();
    });

    $(document).ajaxStart(function() {
        $('.commit-section .save').hide();
        $('.ajax-loading').fadeIn();
    });

    $(document).ajaxComplete(function() {
        setTimeout(function() {
            $('.ajax-loading, .commit-section').hide();
            $('.response').fadeIn();
        }, 500);
    });

});

// collect all photo data and send to php for database storage
function save() {

    // regex to parse hashtags
    var regex = /[#]+[A-Za-z0-9-_]+/g;
    var name = $.trim($('.photo-name input').val());
    var tags = $.trim($('.tag-section input').val()).match(regex);
    var photo = $.trim($('.photo-section img').attr('src'));

    $.ajax({

        url: 'save_photo.php',
        method: 'POST',
        dataType: 'html',
        data: {
            title: name,
            hash_tags: tags,
            filename: photo
        }

    })
    .done(function(response) {
        $('.response').html(response);
    })
    .fail(function() {
        alert('Something went wrong!')
    });
}