Дружній AJAX (завершення)

До цього я розповідав про підвищення юзабіліті сайтів, що використовують AJAX. Нагадаю, шо було написано javascript, що дозволяє відображати індикатор завантаження і виводити повідомлення про перевищення часу очікування на результат завантаження. Однак я жодним словом не сказав про сам AJAX. Настав, час викправити цей недолік.

Коротко та просто

Я вирішив результати попередньої праці зв`язати з системою деградабельного AJAX, також описану мною раніше. Щож до цього потрібно зробити? Для початку одразупысля завантаження документу потрібно виконати не лише ініціалізацію посилань призначених для деградабельного AJAX, а ще й ініціалізувати елементи для відображення повідомлення, затемнення і т.д.:

window.onload = function() {
initAjaxLinks();
createLoading();
}

Далі слід додати моживість виводу індикатору для функцій, що виконують запити до серверу:
/* Initialize get request */
function getRequest(request, url, handleResponse, animate) {
request.onreadystatechange = function() { responseHandle(request, handleResponse, animate); }
request.open('get', url, true);
request.send(null);
if (animate != 'no')
dark();
}
/* Initialize post request */
function postRequest(request, url, handleResponse, params, animate) {
p = [];
if (("" + typeof(params)).toLowerCase() == "object") {
for (var k in params) {
var v = params[k];
if (v instanceof Function) {
continue;
}
p[p.length] = k + "=" +v;
}
}
params = p.join('&');
//request.ovverideMimeType('text/plain');
request.onreadystatechange = function() { responseHandle(request, handleResponse, animate); }
request.open('post', url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Connection", "close");
request.send(params);
if (animate !='no')
dark();
}

Внесемо зміни до функції для відправки як POST так і GET повідомлень:

function httpRequest(reqType, url, handleResponse, params, animate) {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else if (window.ActiveXObject){
request = new ActiveXObject("Msxml2.XMLHTTP");
if (!request) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (request) {
if (reqType == 'get')
getRequest(request, pageUrl+url, handleResponse, animate);
else if (reqType == 'post')
postRequest(request, pageUrl+url, handleResponse, params, animate);
else
alert("Wrong request type!");
}
else
alert("Your browser does not permit the use of all of this application's features!");
}

Залишилось вдосконалити функцію для обробки відповіді серверу, яка на відміну від попередніх функцій буде не виводити повідомлення про завантаження, а навпаки ховати його:

function responseHandle(request, handler, animate) {
if (request.readyState == 4) {
if (animate != 'no')
light();
eval("responseData = (" + request.responseText + ")");
if (handler != null)
handler(responseData);
else
dsAJAXDefaultHandler(responseData);
initAjaxLinks();
}
}

Змін небагато і вони не надто суттєві. Однак процес відправки запиту через AJAX на сервер супроводжується досить непоганою анімацією та текстовим повідомленням.

Замість висновків

Зрозуміло, що розроблена модель не претендує на те, щоб називатись досконалою. З точки зору юзабіліті може бути додана обробка інших повідомлень та звичайну анімацію замінити на ступінь завантаження. та виведення більш детальної інформації про стан запиту. Наприклад, відсилається на сервер, отримуєтьсявідповідь і т.д. З точки зору універсальності, можна розширити можливості налаштування.

Да і сама запропонована модель AJAX потребує доопрацювання і розгирення можливостей. Саме цим я і планую зайнятись в майбутніх замітках.

Дякую за увагу!

P.S.: на мою радість WordPress “відремонтували”, однак перехід, хоча й затагнувся однак все одно буде. Бо готовий двигунець та дизайн нікуди вже не діти