Лабораторная работа: Создание приложений на AJAX
// InternetExplorer
xmlreq = newActiveXObject("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();
// Оператор для получения сообщения обратного вызова
// из объекта запроса
varhandlerFunction = getReadyStateHandler(req, updateCart);
req. onreadystatechange = handlerFunction;
// Открываем HTTP-соединение с помощью POST-метода к сервлету корзины покупателя.
// Третий параметр определяет, что запрос асинхронный.
req. open("POST", "cart. do", true);