Кафедра: АСОІ
Лабораторна робота
На тему: Створення додатків на AJAX
Душанбе, 2009
Тепер згадайте, чому "а" в слові Ajax позначає "асинхронний"? Коли ви посилаєте HTTP-запит, ви не хочете, щоб браузер завис, очікуючи відповіді сервера. Замість цього ви хочете також реагувати на дію користувача на сторінці і працювати з відповіддю сервера, коли той в кінцевому підсумку прийде. Щоб виконати це, вам потрібно зареєструвати функцію зворотного виклику з допомогою XMLHttpRequest і послати асинхронно запит XMLHttpRequest. Контроль залишиться за браузером, а функція зворотного виклику буде викликана, коли прийде відповідь сервера.
На Web-сервері запит прийде так само, як і будь-який інший HttpServletRequest. Після аналізу параметрів запиту, сервлет виконає всі необхідні дії для програми, серіалізуются його запит в форматі XML і вписує його в HttpServletResponse.
Повертаючись до клієнта, функція зворотного виклику, зареєстрована в XMLHttpRequest, тепер виконується для того, щоб обробити XML-документ, що повертається сервером. Нарешті, призначений для користувача інтерфейс оновлюється відповідно до даних сервера, використовуючи JavaScript-код для перетворення сторінки. Рисунок 1 - діаграма послідовності вивчення Ajax.
Малюнок 1. Огляд Ajax
Я почну з самого початку: створення XMLHttpRequest і відправлення його з браузера. На жаль, метод створення XMLHttpRequest відрізняється від браузера до браузеру. Функція в JavaScript в лістингу 2 згладжує ці труднощі різних браузерів, визначаючи коректний підхід для даного браузера і повертаючи XMLHttpRequest готовим до використання. Краще за все думати про це як про код-шаблоні: просте копіювання його в вашу бібліотеку JavaScript і його використання, коли вам знадобиться XMLHttpRequest.
Лістинг 2. Створення XMLHttpRequest для різних браузерів
/ *
* Повертає новий XMLHttpRequest об'єкт або false, якщо браузер його не підтримує
* /
function newXMLHttpRequest () {
var xmlreq = false;
if (window. XMLHttpRequest) {
/ / Створимо XMLHttpRequest об'єкт для не-Microsoft браузерів
xmlreq = new XMLHttpRequest ();
} Else if (window. ActiveXObject) {
/ / Створимо XMLHttpRequest за допомогою MS ActiveX
try {
/ / Спробуємо створити XMLHttpRequest для пізніх версій
/ / Internet Explorer
xmlreq = new ActiveXObject ("Msxml2. XMLHTTP");
} Catch (e1) {
/ / Не вдалося створити необхідний ActiveXObject
try {
/ / Пробуємо варіант, який підтримають більш старі версії
/ / Internet Explorer
xmlreq = new ActiveXObject ("Microsoft. XMLHTTP");
} Catch (e2) {
/ / Не в змозі створити XMLHttpRequest за допомогою ActiveX
}
}
}
return xmlreq;
}
Пізніше ми обговоримо технічні прийоми для браузерів, які не підтримують XMLHttpRequest. А зараз приклади припускають, що функція newXMLHttpRequest з лістингу 2 завжди повертає значення XMLHttpRequest.
Повертаючись назад до сценарію прикладу кошика покупця, я б хотів скористатися Ajax для випадків, коли користувач натискає Add to Cart кнопку для каталогу продуктів. Оператор onclick, викликаний addToCart (), відповідальний за оновлення стану кошика в Ajax-виклику (див. лістинг 1). Як показано в лістингу 3, перше, що необхідно зробити addToCart (), - отримати дані XMLHttpRequest за допомогою виклику функції newXMLHttpRequest () з лістингу 2. Наступним кроком він реєструє функцію зворотного виклику для отримання відповіді сервера, (я поясню це докладно пізніше, дивіться лістинг 6).
Оскільки запит змінить стан на сервері, я буду користуватися методом HTTP POST, щоб це виконати. Надсилання даних методом POST виконується в три кроки. По-перше, мені необхідно відкрити з'єднання з джерелом сервера, з яким я з'єднуюся, що в даному випадку є сервлетом, занесеним в cart. do сторінки. Далі я встановлюю заголовок у XMLHttpRequest, що говорить про те, що вміст запиту - закодовані дані. І, нарешті, я посилаю запит з закодованими даними в тілі вмісту.
Лістинг 3 показує всі ці кроки разом.
Лістинг 3. Надсилаємо XMLHttpRequest для кнопки Add to Cart
/ *
* Додає продукт, визначений його кодом,
* В кошик покупця
* ItemCode - код продукту для додавання.
* /
function addToCart (itemCode) {
/ / Повертає вміст XMLHttpRequest
var req = newXMLHttpRequest ();
/ / Оператор для отримання повідомлення зворотного виклику
/ / З об'єкта запиту
var handlerFunction = getReadyStateHandler (req, updateCart);
req. onreadystatechange = handlerFunction;
/ / Відкриваємо HTTP-з'єднання за допомогою POST-методу до сервлету кошика покупця.
/ / Третій параметр визначає, що запит асинхронний.
req. open ("POST", "cart. do", true);
/ / Визначає, що у вмісті запиту є дані
req. setRequestHeader ("Content-Type",
"Application / x-www-form-urlencoded");
/ / Надсилаємо закодовані дані, які говорять про те, що я хочу додати
/ / Певний продукт в корзину.
req. send ("action = add & item =" + itemCode);
}
Після всього цього ви зрозуміли першу частину в механізмі Ajax - власне створення і передача HTTP-запиту від клієнта. Наступним кроком буде код сервлета на мові Java для обробки запиту.
Лістинг 4 - частина простого сервлета, який обробляє Ajax запити, щоб оновити кошик покупця. Cart виходить із сесії користувача і його стан оновлюється відповідно до параметрів запиту. Cart потім серіалізуются в XML-форматі, а XML утворюється в ServletResponse. Важливо встановити тип вмісту запиту в application / xml, у противному випадку XMLHttpRequest не буде аналізувати вміст відповіді.
Лістинг 4. Код сервлета для обробки Ajax-запитів
public void doPost (HttpServletRequest req,
HttpServletResponse res)
throws java. io. IOException {
Cart cart = getCartFromSession (req);
String action = req. getParameter ("action");
String item = req. getParameter ("item");
if ((action! = null) & & (item! = null)) {
/ / Додати або видалити продукт з Cart
if ("add". equals (action)) {
cart. addItem (item);
} Else if ("remove". Equals (action)) {
cart. removeItems (item);
}
}
/ / Серіалізуем стан Cart в XML-форматі
String cartXml = cart. toXml ();
/ / Записуємо отриманий XML до запиту.
res. setContentType ("application / xml");
res. getWriter (). write (cartXml);
}
Лістинг 5 показує приклад XML-коду, отриманий за допомогою методу Cart. toXml (). Зробити це досить просто. Запам'ятайте атрибут generated в cart елементі, який є тимчасовою міткою, отриманої за допомогою System. currentTimeMillis ().
Лістинг 5. Приклад серіалізациі в XML-форматі об'єкта Cart
<? xml version = "1.0"? >
<cart generated="1123969988414" total="$171.95">
<item code="hat001">
<name> Hat </ name>
<quantity> 2 </ quantity>
</ Item>
<item code="cha001">
<name> Chair </ name>
<quantity> 1 </ quantity>
</ Item>
<item code="dog001">
<name> Dog </ name>
<quantity> 1 </ quantity>
</ Item>
</ Cart>
Якщо ви поглянете на Cart. java в джерелі програми, доступному в секції Завантаження, ви побачите, що XML виходить просто за допомогою з'єднання рядків разом. Застосований у прикладі, цей спосіб - часто найгірший спосіб отримати XML з коду на мові Java. Я запропоную прийоми цікавіше і краще в наступній частині цієї серії.
Тепер ви знаєте, що CartServlet запитується за допомогою XMLHttpRequest. Наступним кроком буде повернення до коду клієнта, де ви можете побачити, як відповідь в XML-форматі буде використовуватися для поновлення стану сторінки.
У лістингу 3 ви побачили, як викликалася функція getReadyStateHandler () для створення оператора. Цей оператор потім приписується властивості onreadystatechange. getReadyStateHandler () використовував той факт, що функції - об'єкти першого класу в JavaScript. Це означає, що функції можуть бути параметрами до інших функцій і можуть також створювати і повертати значення інших функцій. Обов'язки getReadyStateHandler () - повертати значення функції, яка перевіряє, завершився Чи XMLHttpRequest і був відісланий чи відповідь в XML-форматі в оператор, визначений викликом. Лістинг 6 - код для getReadyStateHandler ().
Лістинг 6. Функція getReadyStateHandler (). / *
* Повертає функцію, яка очікує, щоб закінчився
* Певний XMLHttpRequest, потім передає його відповідь в XML-форматі
|------- 10-------- 20-------- 30-------- 40-------- 50 ----- --- 60-------- 70-------- 80-------- 9 |
|------ - XML error: The divvious line is longer than the max of 90 characters - --------|
* Заданому оператору * req - це XMLHttpRequest, чий статок змінюється
|------- 10-------- 20-------- 30-------- 40-------- 50 ----- --- 60-------- 70-------- 80-------- 9 |
|------ - XML error: The divvious line is longer than the max of 90 characters - --------|
* ResponseXmlHandler - функція, передана запит XML
* /
function getReadyStateHandler (req, responseXmlHandler) {
/ / Повертає невизначену функцію, яка зчитує
/ / Дані XMLHttpRequest return function () {
/ / Якщо потрібно статус "закінчений"
if (req. readyState == 4) {
/ / Перевіряємо, чи прийшов успішний відповідь сервера
if (req. status == 200) {
/ / Передає XML оператору
responseXmlHandler (req. responseXML);
} Else {
/ / Виникла помилка HTTP
alert ("HTTP error:" + req. status);
}
}
}
}
Про getReadyStateHandler ()
getReadyStateHandler () - щодо складний шматок коду, особливо якщо ви раніше не знали JavaScript. Але з іншого боку перевага в тому, що за допомогою включення цієї функції в вашу бібліотеку JavaScript ви можете спокійно обробляти Ajax-запити сервера без роботи з даними XMLHttpRequest. Важливо також, що ви розумієте, як використовувати getReadyStateHandler () у вашому власному коді.
У лістингу 3 ви бачили getReadyStateHandler (), викликаний так: handlerFunction = getReadyStateHandler (req, updateCart). Функція, яка повертається за допомогою getReadyStateHandler (), в цьому випадку перевірить, чи виконаний XMLHttpRequest у змінній req і потім викличе функцію, що називається updateCart, за допомогою запиту у форматі XML.
Лістинг 7. Оновлення сторінки з відображенням XML документа кошика
function updateCart (cartXML) {
/ / Отримати кореневої "cart" елемент з документа
var cart = cartXML. getElementsByTagName ("cart") [0];
/ / Перевіримо, що більш ранній документ кошика не був оброблений ще
var generated = cart. getAttribute ("generated");
if (generated> lastCartUpdate) {
lastCartUpdate = generated;
/ / Очистимо список HTML, необхідний для відображення вмісту кошика
var contents = document. getElementById ("cart-contents");
contents. innerHTML = "";
/ / З'єднуємо продукти в кошику
var items = cart. getElementsByTagName ("item");
for (var I = 0; I <items. length; I + +) {
var item = items [I];
/ / Дістаємо ключові поняття з імені та елементів кількості
var name = item. getElementsByTagName ("name") [0]
. firstChild. nodeValue;
var quantity = item. getElementsByTagName ("quantity") [0]
. firstChild. nodeValue;
/ / Створюємо і додаємо список продуктів, HTML елемент для цього продукту
var li = document. createElement ("li");
li. appendChild (document. createTextNode (name + "x" + quantity));
contents. appendChild (li);
}
}
/ / Оновлюємо разом у кошику, використовуючи значення з документа кошика
document. getElementById ("total"). innerHTML =
cart. getAttribute ("total");
}
Після того, що ми проробили, подорож в Ajax закінчено, хоча ви могли б захотіти отримати Web-додатки і побачити їх у дії (дивіться секцію Завантаження). Приклад дуже простий, багато рядки в ньому ще можна поліпшити. Приміром, я включив код сервера, щоб прибрати продукти з кошика, але не зробив доступ до них з інтерфейсу. Для вас буде хорошим вправою спробувати побудувати в додатку існуючого JavaScript-коду дану функціональність.
Тому вам необхідно спробувати зробити вашу програму з "витонченим погіршенням", щоб залишитися функціональним навіть в браузерах без підтримки XMLHttpRequest. У прикладі кошика покупця кращий спосіб погіршити додаток - кнопки Add to Cart, виконують звичайну роль, оновлюючи сторінку для нового статусу кошика. За допомогою Ajax можна додати сторінку через JavaScript-код, коли сторінка завантажена, прикріпити оператор JavaScript до кожної кнопки Add to Cart, якщо тільки доступний XMLHttpRequest. Інший спосіб - визначити XMLHttpRequest, коли користувач увійшов, і потім забезпечити будь-яку Ajax версію програми або версію, засновану на звичайних формах, якщо знадобиться.
Інше завдання полягає в тому, що користувачі можуть не помітити, що частини сторінки, які вони бачать, вже оновлені. Ви можете вирішити цю проблему, використовуючи безліч візуальних технік і прийомів, наприклад, намалювати очей користувача до оновлених місцях сторінки. Інші завдання, викликані оновленням сторінки при Ajax, включають в себе неробочу кнопку повернення назад, некоректне відображення адреси або неможливість додати до обраного. Дивіться секцію Ресурси для статей, які спеціалізуються на завданнях функціональності в Ajax-додатках.
Дуже добре, якщо ви відчуваєте смуток через складність написання великих Ajax-додатків з використанням прийомів, продемонстрованих тут. Такі структури, як Struts, Spring і Hibernate, розвиваються, розробляючи дрібні деталі Servlet API і JDBC, тому з'являються засоби для полегшення Ajax-розробки. Деякі з них сфокусовані виключно на проблемах клієнтської боку коду, знаходячи легкі шляхи для додавання візуальних ефектів до ваших сторінок або ретельно аналізуючи використання XMLHttpRequest. Деякі йдуть далі, розробляючи засоби для автоматичної генерації Ajax-інтерфейсів з боку сервера. Ці структури виконують важку роботу за нас, тому ви можете сконцентруватися на підходах більш високого рівня. Я розгляну деякі з них у цій серії.
Спільнота Ajax швидко розвивається, і тут є велика кількість важливої інформації. Перед тим як читати наступну частину цієї серії статей, я б рекомендував вам ознайомитися із статтями в секції Ресурси, особливо якщо ви - "новачок" в Ajax або в розробці клієнтської частини коду. Також вам знадобиться час розібратися з прикладом коду і подумати про способи його поліпшення.
У наступній статті цієї серії я розгляну XMLHttpRequest більш детально і запропоную способи створення XML відразу з вашого JavaBeans. Я також покажу вам альтернативи до XML для передачі Ajax-даних, такі як нотація JSON.
Лабораторна робота
На тему: Створення додатків на AJAX
Душанбе, 2009
Огляд Ajax
Використання Ajax починається з JavaScript-об'єкта, званого XMLHttpRequest. Як і передбачає ім'я, він дозволяє в клієнтській частині вашого коду виконувати HTTP-запити і аналізує відповідь XML-сервера. Перший крок у вивченні Ajax - створення даних об'єкта XMLHttpRequest. Метод протоколу HTTP при використанні для запиту (GET або POST) та шляхи потім встановлюються в об'єкті XMLHttpRequest.Тепер згадайте, чому "а" в слові Ajax позначає "асинхронний"? Коли ви посилаєте HTTP-запит, ви не хочете, щоб браузер завис, очікуючи відповіді сервера. Замість цього ви хочете також реагувати на дію користувача на сторінці і працювати з відповіддю сервера, коли той в кінцевому підсумку прийде. Щоб виконати це, вам потрібно зареєструвати функцію зворотного виклику з допомогою XMLHttpRequest і послати асинхронно запит XMLHttpRequest. Контроль залишиться за браузером, а функція зворотного виклику буде викликана, коли прийде відповідь сервера.
На Web-сервері запит прийде так само, як і будь-який інший HttpServletRequest. Після аналізу параметрів запиту, сервлет виконає всі необхідні дії для програми, серіалізуются його запит в форматі XML і вписує його в HttpServletResponse.
Повертаючись до клієнта, функція зворотного виклику, зареєстрована в XMLHttpRequest, тепер виконується для того, щоб обробити XML-документ, що повертається сервером. Нарешті, призначений для користувача інтерфейс оновлюється відповідно до даних сервера, використовуючи JavaScript-код для перетворення сторінки. Рисунок 1 - діаграма послідовності вивчення Ajax.
Малюнок 1. Огляд Ajax
Я почну з самого початку: створення XMLHttpRequest і відправлення його з браузера. На жаль, метод створення XMLHttpRequest відрізняється від браузера до браузеру. Функція в JavaScript в лістингу 2 згладжує ці труднощі різних браузерів, визначаючи коректний підхід для даного браузера і повертаючи XMLHttpRequest готовим до використання. Краще за все думати про це як про код-шаблоні: просте копіювання його в вашу бібліотеку JavaScript і його використання, коли вам знадобиться XMLHttpRequest.
Лістинг 2. Створення XMLHttpRequest для різних браузерів
/ *
* Повертає новий XMLHttpRequest об'єкт або false, якщо браузер його не підтримує
* /
function newXMLHttpRequest () {
var xmlreq = false;
if (window. XMLHttpRequest) {
/ / Створимо XMLHttpRequest об'єкт для не-Microsoft браузерів
xmlreq = new XMLHttpRequest ();
} Else if (window. ActiveXObject) {
/ / Створимо XMLHttpRequest за допомогою MS ActiveX
try {
/ / Спробуємо створити XMLHttpRequest для пізніх версій
/ / Internet Explorer
xmlreq = new ActiveXObject ("Msxml2. XMLHTTP");
} Catch (e1) {
/ / Не вдалося створити необхідний ActiveXObject
try {
/ / Пробуємо варіант, який підтримають більш старі версії
/ / Internet Explorer
xmlreq = new ActiveXObject ("Microsoft. XMLHTTP");
} Catch (e2) {
/ / Не в змозі створити XMLHttpRequest за допомогою ActiveX
}
}
}
return xmlreq;
}
Пізніше ми обговоримо технічні прийоми для браузерів, які не підтримують XMLHttpRequest. А зараз приклади припускають, що функція newXMLHttpRequest з лістингу 2 завжди повертає значення XMLHttpRequest.
Повертаючись назад до сценарію прикладу кошика покупця, я б хотів скористатися Ajax для випадків, коли користувач натискає Add to Cart кнопку для каталогу продуктів. Оператор onclick, викликаний addToCart (), відповідальний за оновлення стану кошика в Ajax-виклику (див. лістинг 1). Як показано в лістингу 3, перше, що необхідно зробити addToCart (), - отримати дані XMLHttpRequest за допомогою виклику функції newXMLHttpRequest () з лістингу 2. Наступним кроком він реєструє функцію зворотного виклику для отримання відповіді сервера, (я поясню це докладно пізніше, дивіться лістинг 6).
Оскільки запит змінить стан на сервері, я буду користуватися методом HTTP POST, щоб це виконати. Надсилання даних методом POST виконується в три кроки. По-перше, мені необхідно відкрити з'єднання з джерелом сервера, з яким я з'єднуюся, що в даному випадку є сервлетом, занесеним в cart. do сторінки. Далі я встановлюю заголовок у XMLHttpRequest, що говорить про те, що вміст запиту - закодовані дані. І, нарешті, я посилаю запит з закодованими даними в тілі вмісту.
Лістинг 3 показує всі ці кроки разом.
Лістинг 3. Надсилаємо XMLHttpRequest для кнопки Add to Cart
/ *
* Додає продукт, визначений його кодом,
* В кошик покупця
* ItemCode - код продукту для додавання.
* /
function addToCart (itemCode) {
/ / Повертає вміст XMLHttpRequest
var req = newXMLHttpRequest ();
/ / Оператор для отримання повідомлення зворотного виклику
/ / З об'єкта запиту
var handlerFunction = getReadyStateHandler (req, updateCart);
req. onreadystatechange = handlerFunction;
/ / Відкриваємо HTTP-з'єднання за допомогою POST-методу до сервлету кошика покупця.
/ / Третій параметр визначає, що запит асинхронний.
req. open ("POST", "cart. do", true);
/ / Визначає, що у вмісті запиту є дані
req. setRequestHeader ("Content-Type",
"Application / x-www-form-urlencoded");
/ / Надсилаємо закодовані дані, які говорять про те, що я хочу додати
/ / Певний продукт в корзину.
req. send ("action = add & item =" + itemCode);
}
Після всього цього ви зрозуміли першу частину в механізмі Ajax - власне створення і передача HTTP-запиту від клієнта. Наступним кроком буде код сервлета на мові Java для обробки запиту.
У початок. Обробка запиту сервлета
Обробка XMLHttpRequest за допомогою сервлета така ж, як і обробка звичайного HTTP-запиту з браузера. Закодовані дані, що відсилаються у вмісті запиту POST, можуть бути отримані з допомогою викликів HttpServletRequest. getParameter (). Ajax запитує участь у HttpSession, такий же, як і в регулярних Web запитах з програми. Це корисно для прикладу сценарію кошика покупця, оскільки дозволяє мені укласти стан користувача корзини покупця в JavaBeans і утримувати цей стан під час сесії між двома запитами.Лістинг 4 - частина простого сервлета, який обробляє Ajax запити, щоб оновити кошик покупця. Cart виходить із сесії користувача і його стан оновлюється відповідно до параметрів запиту. Cart потім серіалізуются в XML-форматі, а XML утворюється в ServletResponse. Важливо встановити тип вмісту запиту в application / xml, у противному випадку XMLHttpRequest не буде аналізувати вміст відповіді.
Лістинг 4. Код сервлета для обробки Ajax-запитів
public void doPost (HttpServletRequest req,
HttpServletResponse res)
throws java. io. IOException {
Cart cart = getCartFromSession (req);
String action = req. getParameter ("action");
String item = req. getParameter ("item");
if ((action! = null) & & (item! = null)) {
/ / Додати або видалити продукт з Cart
if ("add". equals (action)) {
cart. addItem (item);
} Else if ("remove". Equals (action)) {
cart. removeItems (item);
}
}
/ / Серіалізуем стан Cart в XML-форматі
String cartXml = cart. toXml ();
/ / Записуємо отриманий XML до запиту.
res. setContentType ("application / xml");
res. getWriter (). write (cartXml);
}
Лістинг 5 показує приклад XML-коду, отриманий за допомогою методу Cart. toXml (). Зробити це досить просто. Запам'ятайте атрибут generated в cart елементі, який є тимчасовою міткою, отриманої за допомогою System. currentTimeMillis ().
Лістинг 5. Приклад серіалізациі в XML-форматі об'єкта Cart
<? xml version = "1.0"? >
<cart generated="1123969988414" total="$171.95">
<item code="hat001">
<name> Hat </ name>
<quantity> 2 </ quantity>
</ Item>
<item code="cha001">
<name> Chair </ name>
<quantity> 1 </ quantity>
</ Item>
<item code="dog001">
<name> Dog </ name>
<quantity> 1 </ quantity>
</ Item>
</ Cart>
Якщо ви поглянете на Cart. java в джерелі програми, доступному в секції Завантаження, ви побачите, що XML виходить просто за допомогою з'єднання рядків разом. Застосований у прикладі, цей спосіб - часто найгірший спосіб отримати XML з коду на мові Java. Я запропоную прийоми цікавіше і краще в наступній частині цієї серії.
Тепер ви знаєте, що CartServlet запитується за допомогою XMLHttpRequest. Наступним кроком буде повернення до коду клієнта, де ви можете побачити, як відповідь в XML-форматі буде використовуватися для поновлення стану сторінки.
Запит, обробляються з допомогою JavaScript
readyState властивість XMLHttpRequest - числове значення, яке визначає статус циклу запиту. Воно змінюється від 0 для "невизначеного" і до 4 для "завершеного". Кожного разу, коли змінюється readyState, з'являється подія readystatechange і викликається за допомогою onreadystatechange властивості оператор.У лістингу 3 ви побачили, як викликалася функція getReadyStateHandler () для створення оператора. Цей оператор потім приписується властивості onreadystatechange. getReadyStateHandler () використовував той факт, що функції - об'єкти першого класу в JavaScript. Це означає, що функції можуть бути параметрами до інших функцій і можуть також створювати і повертати значення інших функцій. Обов'язки getReadyStateHandler () - повертати значення функції, яка перевіряє, завершився Чи XMLHttpRequest і був відісланий чи відповідь в XML-форматі в оператор, визначений викликом. Лістинг 6 - код для getReadyStateHandler ().
Лістинг 6. Функція getReadyStateHandler (). / *
* Повертає функцію, яка очікує, щоб закінчився
* Певний XMLHttpRequest, потім передає його відповідь в XML-форматі
|------- 10-------- 20-------- 30-------- 40-------- 50 ----- --- 60-------- 70-------- 80-------- 9 |
|------ - XML error: The divvious line is longer than the max of 90 characters - --------|
* Заданому оператору * req - це XMLHttpRequest, чий статок змінюється
|------- 10-------- 20-------- 30-------- 40-------- 50 ----- --- 60-------- 70-------- 80-------- 9 |
|------ - XML error: The divvious line is longer than the max of 90 characters - --------|
* ResponseXmlHandler - функція, передана запит XML
* /
function getReadyStateHandler (req, responseXmlHandler) {
/ / Повертає невизначену функцію, яка зчитує
/ / Дані XMLHttpRequest return function () {
/ / Якщо потрібно статус "закінчений"
if (req. readyState == 4) {
/ / Перевіряємо, чи прийшов успішний відповідь сервера
if (req. status == 200) {
/ / Передає XML оператору
responseXmlHandler (req. responseXML);
} Else {
/ / Виникла помилка HTTP
alert ("HTTP error:" + req. status);
}
}
}
}
Про getReadyStateHandler ()
getReadyStateHandler () - щодо складний шматок коду, особливо якщо ви раніше не знали JavaScript. Але з іншого боку перевага в тому, що за допомогою включення цієї функції в вашу бібліотеку JavaScript ви можете спокійно обробляти Ajax-запити сервера без роботи з даними XMLHttpRequest. Важливо також, що ви розумієте, як використовувати getReadyStateHandler () у вашому власному коді.
У лістингу 3 ви бачили getReadyStateHandler (), викликаний так: handlerFunction = getReadyStateHandler (req, updateCart). Функція, яка повертається за допомогою getReadyStateHandler (), в цьому випадку перевірить, чи виконаний XMLHttpRequest у змінній req і потім викличе функцію, що називається updateCart, за допомогою запиту у форматі XML.
Дані кошика
Лістинг 7 - власне сам код updateCart (). Функція запитує XML-документ кошика покупця, використовуючи DOM-дзвінки та оновлюючи Web-сторінки (див. лістинг 1) для того, щоб показати нові елементи вмісту нової кошика. Зверніть тут увагу на виклики, використані для того, щоб дістати дані з XML DOM. Атрибут generated елемента cart, створений, коли Cart був серіалізовать у форматі XML, перевіряється, щоб упевнитися, що більш нові дані кошика не перезаписані більше старими даними. Ajax-запити за своєю суттю асинхронні, тому ця перевірка охороняє проти відповідей сервера, які прибувають в безладді.Лістинг 7. Оновлення сторінки з відображенням XML документа кошика
function updateCart (cartXML) {
/ / Отримати кореневої "cart" елемент з документа
var cart = cartXML. getElementsByTagName ("cart") [0];
/ / Перевіримо, що більш ранній документ кошика не був оброблений ще
var generated = cart. getAttribute ("generated");
if (generated> lastCartUpdate) {
lastCartUpdate = generated;
/ / Очистимо список HTML, необхідний для відображення вмісту кошика
var contents = document. getElementById ("cart-contents");
contents. innerHTML = "";
/ / З'єднуємо продукти в кошику
var items = cart. getElementsByTagName ("item");
for (var I = 0; I <items. length; I + +) {
var item = items [I];
/ / Дістаємо ключові поняття з імені та елементів кількості
var name = item. getElementsByTagName ("name") [0]
. firstChild. nodeValue;
var quantity = item. getElementsByTagName ("quantity") [0]
. firstChild. nodeValue;
/ / Створюємо і додаємо список продуктів, HTML елемент для цього продукту
var li = document. createElement ("li");
li. appendChild (document. createTextNode (name + "x" + quantity));
contents. appendChild (li);
}
}
/ / Оновлюємо разом у кошику, використовуючи значення з документа кошика
document. getElementById ("total"). innerHTML =
cart. getAttribute ("total");
}
Після того, що ми проробили, подорож в Ajax закінчено, хоча ви могли б захотіти отримати Web-додатки і побачити їх у дії (дивіться секцію Завантаження). Приклад дуже простий, багато рядки в ньому ще можна поліпшити. Приміром, я включив код сервера, щоб прибрати продукти з кошика, але не зробив доступ до них з інтерфейсу. Для вас буде хорошим вправою спробувати побудувати в додатку існуючого JavaScript-коду дану функціональність.
Завдання використання Ajax
Як і в багатьох інших технологіях, в Ajax є безліч способів зробити помилки. Деякі з проблем, які я обговорюю тут, в даний момент мають вдалі та легкі рішення, але можуть бути поліпшені в якості Ajax-продуктів. Оскільки спільнота розробників дає досвід у розробці Ajax-додатків, кращі практики і довідники будуть записані.Користь XMLHttpRequest
Однією з важливих завдань, що постають перед обличчям Ajax-розробників, є питання, як відповісти, коли XMLHttpRequest недоступний. У той час як більшість сучасних браузерів підтримують XMLHttpRequest, завжди є користувачі, у яких XMLHttpRequest не підтримується або чия безпеку браузера не дала виконатися XMLHttpRequest. Якщо ви розробляєте Web-додаток, властиве в корпоративній мережі, ймовірно, у вас є перевага у визначенні, які браузери підтримуються і коли XMLHttpRequest завжди доступний. Якщо ви розробляєте для публічної мережі, то ви повинні знати, що, припускаючи, що XMLHttpRequest доступний, ви відрікаєтеся від користувачів більш старих браузерів, браузерів людей з закритим доступом або легковагих браузерів з сервісом проти виконання вашої програми.Тому вам необхідно спробувати зробити вашу програму з "витонченим погіршенням", щоб залишитися функціональним навіть в браузерах без підтримки XMLHttpRequest. У прикладі кошика покупця кращий спосіб погіршити додаток - кнопки Add to Cart, виконують звичайну роль, оновлюючи сторінку для нового статусу кошика. За допомогою Ajax можна додати сторінку через JavaScript-код, коли сторінка завантажена, прикріпити оператор JavaScript до кожної кнопки Add to Cart, якщо тільки доступний XMLHttpRequest. Інший спосіб - визначити XMLHttpRequest, коли користувач увійшов, і потім забезпечити будь-яку Ajax версію програми або версію, засновану на звичайних формах, якщо знадобиться.
Щодо функціональності (usability)
Деякі із завдань функціональності в Ajax - досить загальні. Наприклад, може бути, важливо дозволити користувачам дізнатися, що їх введення зареєстрований, оскільки звичайний механізм зворотного зв'язку ("пісочний годинник" курсора і "крутиться браузер") не застосуємо для XMLHttpRequest. Вихід - замінити кнопки Підтвердити сполученням "Оновлюється ...", щоб користувачі не натискали кілька разів на кнопки в очікуванні запиту.Інше завдання полягає в тому, що користувачі можуть не помітити, що частини сторінки, які вони бачать, вже оновлені. Ви можете вирішити цю проблему, використовуючи безліч візуальних технік і прийомів, наприклад, намалювати очей користувача до оновлених місцях сторінки. Інші завдання, викликані оновленням сторінки при Ajax, включають в себе неробочу кнопку повернення назад, некоректне відображення адреси або неможливість додати до обраного. Дивіться секцію Ресурси для статей, які спеціалізуються на завданнях функціональності в Ajax-додатках.
Перевантаження сервера
Виконання Ajax-інтерфейсу в місці, де діють звичайні форми, може призвести до того, що несподівано зросте кількість запитів до сервера. Наприклад, звичайний Google Web-пошук викликає один запит на сервер, коли користувач натискає кнопку пошуку. Проте, Google Suggest, який намагається автоматично закінчити ваша дія пошуку, посилає кілька запитів до сервера, поки користувач друкує. Коли ви розробляєте Ajax-додаток, пам'ятаєте, скільки запитів ви відправите сервера, і виникне через це перевантаження сервера. Ви можете зменшити перевантаження сервера, зберігаючи запити на стороні клієнта і ховаючи запити в клієнті, якщо це можливо. Ви можете також спробувати розробити Ajax-додатки так, щоб більша частина дії могла бути виконана в клієнтській частині вашого коду без потреби з'єднання з сервером.Розбираючись з асинхронним
Дуже важливо зрозуміти, що немає гарантії, що XMLHttpRequest закінчаться в тій самій черговості, в якій вони були відправлені. Справді, вам необхідно допустити, що вони не повернуться так, і розробити ваше застосування з урахуванням цієї поправки. У прикладі кошика покупця час позначки останнього оновленого продукту раніше гарантувало, що більш нові дані кошика не можуть бути переписані старішими, (див. лістинг 7). Цей недопрацьований підхід працює для сценарію кошика покупця, але може не виконуватися в інших сценаріях.Висновок
Ви, мабуть, зараз добре розумієте основні принципи програмування в Ajax і особливості компонент сервера і клієнта, які мають місце в Ajax. Це фундамент Ajax-додатки на мові Java. На додаток до сказаного вам слід розуміти деякі із завдань розробки більш високого абстрактного рівня, які з'являються з технічними прийомами в Ajax. Створення успішного Ajax-додатки зажадає загального підходу, починаючи з розробки інтерфейсів за допомогою JavaScript-коду і закінчуючи архітектурою сервера, але ви тепер озброєні основними принципами програмування в Ajax, необхідними для розгляду всіх цих аспектів.Дуже добре, якщо ви відчуваєте смуток через складність написання великих Ajax-додатків з використанням прийомів, продемонстрованих тут. Такі структури, як Struts, Spring і Hibernate, розвиваються, розробляючи дрібні деталі Servlet API і JDBC, тому з'являються засоби для полегшення Ajax-розробки. Деякі з них сфокусовані виключно на проблемах клієнтської боку коду, знаходячи легкі шляхи для додавання візуальних ефектів до ваших сторінок або ретельно аналізуючи використання XMLHttpRequest. Деякі йдуть далі, розробляючи засоби для автоматичної генерації Ajax-інтерфейсів з боку сервера. Ці структури виконують важку роботу за нас, тому ви можете сконцентруватися на підходах більш високого рівня. Я розгляну деякі з них у цій серії.
Спільнота Ajax швидко розвивається, і тут є велика кількість важливої інформації. Перед тим як читати наступну частину цієї серії статей, я б рекомендував вам ознайомитися із статтями в секції Ресурси, особливо якщо ви - "новачок" в Ajax або в розробці клієнтської частини коду. Також вам знадобиться час розібратися з прикладом коду і подумати про способи його поліпшення.
У наступній статті цієї серії я розгляну XMLHttpRequest більш детально і запропоную способи створення XML відразу з вашого JavaBeans. Я також покажу вам альтернативи до XML для передачі Ajax-даних, такі як нотація JSON.