JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<button id="get-list">Получить список элементов</button>
<span>
<label for="cache-id">Запретить кэширование</label>
<input id="cache-id" type="text" name="cache" value="">
</span>
</div>
<span id="status" class="status"></span>
<div id="list-wrap" class="list-wrap"></div>
CSS
.status {
float: right;
color: red;
}
JavaScript
/**
* Created by Valera Siestov on 02.12.13.
*/
var AJAX_DEMO = (function() {
var controls = {},
handlers = {
insertContent: function (data) {
controls.listWrap.html(data.list);
},
buttonClick: function () {
var cache = true;
if (controls.check.is(':checked')) {
cache = false;
}
$.ajax({
url: 'http://demo3.frondevo.com/ajax-cache/php/ajax.php',
data: 'flag=get',
type: 'get',
dataType: 'json',
cache: cache,
success: function (serverAnswer, status, xhr) {
if (xhr.status === 200) {
handlers.insertContent(serverAnswer);
} else {
alert(xhr.responseText);
}
},
error: function (xhr) {
alert(xhr.responseText);
}
});
}
},
getControls = function () {
controls.button = $('#get-list');
controls.listWrap = $('#list-wrap');
controls.status = $('#status');
controls.check = $('#cache-id');
},
addEventList = function () {
controls.button.on('click', handlers.buttonClick);
};
return {
init: function() {
$(document).ready(function () {
getControls();
addEventList();
});
}
};
})();
AJAX_DEMO.init();