ьте еще раз, что у вас есть книжный интернет-магазин. Посе-понравился список книг, выбираемых чаще всего, но к вам поступать просьбы дать возможность просмотреть содержимое недельной давности. Вы решаете задействовать Ajax.
ощью объекта XMLHttp броузер получает список книг и загружает мое свойства responseText в объект XML DOM. Таблица стилей тоже загружается в собственный объект XML DOM, после чего яется преобразование списка в формат HTML, и результат пре-вания выводится на страницу. Из соображений удобства вы раз-в правом верхнем углу ссылку, позволяющую переключаться списками.
шаг этого решения состоит в получении файла XML с помо-XMLHttp. Это начало и точка входа в наше мини-приложение. , включаем в функцию init() следующий код:
ction init(sFilename) { ivarpReq = zXmlHttp.createRequestO; ;_-oReq.onreadystatechange =
in init() принимает в качестве аргумента имя загружаемого i XML. Для обеспечения независимости от типа броузера (но во-! ради уменьшения объема кода) мы создаем объект XMLHttp с при¬мем средств библиотеки zXml. Поскольку запрос асинхронный, i должны проверять свойство readyState в обработчике события оп-NiBjBBystatechange. В случае благополучного завершения запроса respon-: передается функции t ransf ormXml():
tion transformXml(sResponseText) { ,}var oXmlDom = zXmlDom.createDocumentO; "oXmlDom. async = false; . V: oXmlDom. loadXML(sResponseText);
;var, oXslDom = zXmlDom.createDocumentO; oXslDom.async = false; .oXslDom.load("books.xsl"); .var str = zXslt.transformToText(oXmlDom,oXslDom); document,getElementById("dlvBookList").innerHTML = str;
Вызываемая функция transformXml() с помощью метода loadXMLO полняет загрузку текста ответа сервера в объект XML DOM. После го загружается таблица стилей XSL, и оба объекта передаются м transformToTextO из библиотеки zXml. Затем результат преобр ния - строка - добавляется в элемент документа через свойство i HTML. Как результат работы этой функции перед пользователем дится список лучших книг текущей недели.
Добрая половина кода уже написана, но у нас пока отсутствует можность переключаться между списками. Чтобы реализовать ее, потребуется написать еще одну функцию, но для начала прило должно знать, какой именно список надо загружать при выборе ки. Проще всего это делается с помощью логической переменной, торую мы назвали blsThisWeek. Когда загружается список лучших текущей недели, в переменную blsThisWeek записывается зна true, в противном случае - false. Только что был загружен список ших книг текущей недели, поэтому в переменную blsThisWeek з вается значение true:
var blsThisWeek = true;
Чтобы перехватить щелчок пользователя по ссылке, мы орган обработчик события onclick:
function changeList() {
var aChanger = document.getElementById("aChanger");
if (blsThisWeek) {
aChanger.innerHTML = "Лучшие книги этой недели";
init("lastweekbooks.xml");
blsThisWeek = false; } else {
aChanger.innerHTML = "Лучшие книги прошлой недели"; init("thisweekbooks.xml"); blsThisWeek = true;
return false;
приложения.
В заключение дополним наше мини-приложение кодом HTML и при¬ведем здесь документ целиком:
<Ш1е>Пример работы с XML
/>
:typee"text/java8cript~;srcs"2xinl.:|js"> function init(sFilename) {. '
var oReq = zXmlHttp.createRequestO; oReq.onreadystatechange = function () {' if (oReq.readyState == 4) {
// только если асе в порядке if (oReq.status == 200) {
transformXml(ofieq.responseText);
oReq.open("GET", oReq.sendO;
sFilename, true);
)
function transformXml(sResponseText) { var oXmlDom = zXmlDom.createDocumentO; oXmlDom.async = false; oXmlDom.loadXML(sResponseText);
var oXslDom '= zXmlDom.createDocumentO; oXslDom.async = false; oXslDom.load("books.xsl");
var str = zXslt.transformToText(oXmlDom,oXslDom); document.getElementById("divBookList").innerHTHL = str
Эта функция получает ссылку (aChanger) с помощью метода getEl Byld(). Затем проверяет значение переменной blsThisWeek. В соо вии с этим значением с помощью вызова функции init(), которо редается имя требуемого файла, загружается нужный список Эта функция получает новый список, преобразует его и выво страницу. Кроме того, обратите внимание, что текст ссылки изме ся таким образом, чтобы подсказать пользователю, какой спи увидит, если щелкнет по ней. Значение переменной blsThisWeek изменяется, чтобы, когда пользователь щелкнет по ссылке в сл щий раз, загрузился корректный список. По завершении фуг возвращает значение false. Поскольку это обработчик события var blsThisWeek = true;
function changeListО {
var aChanger = document.getElementByldC'aChanger"); if (blsThisWeek) {
aChanger.innerHTML = "Лучшие книги этой недели";
init("lastweekbooks.xml");
blsThisWeek = false; } else {
aChanger.innerHTML = "Лучшие книги прошлой недели" init("thisweekbooks.xml");
Для работы этого мини-приложения требуется, чтобы его запус с веб-сервера, поскольку оно использует объект XMLHtp. Для его ра подойдет любой веб-сервер. Достаточно разместить файл HTML, лиотеку zXml и файл CSS в каталоге booklist на веб-сервере. Затем запустить броузер и ввести адрес http://localhost/booklists/book.htm.