Как оптимизировать AJAX запрос?

Есть два связанных option поля в форме для фильтрации автомобилей по маркам и моделям: mark -> model. При выборе марки подгружаются модели. Проблема в том что марки не подгрудаются с сервера с заранее, а только в момент клика на первое поле с марками при помощи $('#mark').focus, и получается что при каждом клике на выпадающее меню марок отправляется запрос, что создает лишнюю нагрузку на сервер.

Как можно исправить эту проблему не меняя код сервера а только модифицировав логику ajax запросов?

Сама форма:

<div>
    <select id="mark" name="mark" data-url="get_all_proposes/get_all_marks">
        <option value="">Select mark</option>
    </select>
</div>
<div>
    <select id="model" name="model" data-url="get_all_proposes/get_model_by_mark">
        <option value="">Select model</option>
    </select>
</div>

Код js:

$(document).ready(function () {
    //Get marks set.
    $('#mark').focus(function(event) {
        $.ajax({
            url : 'get_all_proposes/get_all_marks',
            type : 'get',
            dataType: 'json',
            success: function (data) {
                var select = $('#mark');
                $.each(data, function(index, value) {
                    var optionMark = $('<option>');
                    optionMark.val(value).text(value).appendTo(select);
                });
            }
        });
    });
    //Get models set.
    $('#mark').change(function() {
        $.ajax({
            url : 'get_all_proposes/get_model_by_mark',
            type : 'get',
            data : {
                'mark' : this.value
            },
            dataType: 'json',
            success : function(data) {
                var optionModel = $('#model');
                $.each(data, function(index, value) {
optionModel.append($('<option>').val(value).text(value));
                });
            }
        });
    });
});