| |
|
|
| | Возможно ли исползовать данные технологии на стороне клиента, обходясь без сервера?
Есть небольшая идея, просмотр картинок с постраничной навигацией. Но это позже. Для начала, надо хотя-бы загрузить файл XML.
Вот код, который почему-то не работает:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XML Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function loadXML(xmlFile){
xmlDoc.async = "false";
xmlDoc.onreadystatechange = verify;
xmlDoc.load(xmlFile);
xmlObj = xmlDoc.documentElement;
alert(xmlObj.xml);
}
function verify(){
if(xmlDoc.readyState != 4)
return false;
}
</script>
</head>
<body onload="loadXML('test.xml')">
</body>
</html>
|
<?xml version="1.0" encoding="iso-8859-1"?>
<image name = "img1.gif" description = "This is image1" size = "100 KB" dimmensions = "440x330x24b">Image1</image>
<image name = "img2.gif" description = "This is image2" size = "200 KB" dimmensions = "450x330x24b">Image2</image>
<image name = "img3.gif" description = "This is image3" size = "300 KB" dimmensions = "460x330x24b">Image3</image>
|
Как исправить?
Спасибо. | |
| |
|
|
| |
|
|
| |
для: codexomega
(15.05.2006 в 19:35)
| | | В принципе возможно все, но только как это отразиться на машине клиента. если прога будет сложной то браузер будет тормозить, в этом случае разделите нагрузку с сервером и клиентом.
насчет правильности кода точно сказать ничего не могу, но мне кажеться что дело в поддержке XmlHttpRequest вашим браузером | |
| |
|
|
| |
|
|
| |
для: kaoz
(15.05.2006 в 20:44)
| | | программа вовсе не задумывается быь сложной. Никаких элементов управления в ней не предвидется.
Просто загрузить список картинок из файла xml и отобразить их.
Выше-приведенный скрипт я взял откуда-то с сети, его только и ставят везде как пример для работы файлами xml из javascript, но без всяких лишних комментарий. У меня почему-то не получается даже вывести содержимое файла через alert.
И ошибка говорит о нулевом объекте, который по каким-то причинам не создается. | |
| |
|
|
| |
|
|
| |
для: codexomega
(15.05.2006 в 23:22)
| | | я конечно в JS и AJAX не силен и немогу посоветовать конкретно по коду что-либо, но могу посоветовать посмотреть исходники Prototype и Sajax фреймворков, которые можно найти на http://www.sourceforge.net. Также есть по AJAX статьи в последних номерах журнала http://www.phpinside.ru.
Если есть желание почитать недавно выпущеные книги по данной теме пишите на мыло, вышлю ссылку все желающим. | |
| |
|
|
| |
|
|
| |
для: codexomega
(15.05.2006 в 19:35)
| | | Позволю себе процитировать Саню с соседнего поста -)
http://dklab.ru/lib/Subsys_JsHttpRequest/
Тут очень подробно все расписано )
А использование xml принципиально ?) | |
| |
|
|
| |
|
|
| |
для: Бог Зайцев
(16.05.2006 в 00:38)
| | | Спасибо всем за помощь.
Ваши ссылки мне не помогли, хотя надо заняться иx изучением, для других целей.
Мой код рабочий, и всё дело было в в моей оплошности с файлом xml.
Я его подправил, также добавил кое-что в файл html, для тех, кому в будущем может пригодиться.
На самом деле все очень просто.
Можете потестировать.
test.xml:
<?xml version="1.0" encoding="iso-8859-1"?>
<page>
<image name = "img1.gif" description = "This is image1" size = "100 KB" dimmensions = "440x330x24b">Image1</image>
<image name = "img2.gif" description = "This is image2" size = "200 KB" dimmensions = "450x330x24b">Image2</image>
<image name = "img3.gif" description = "This is image3" size = "300 KB" dimmensions = "460x330x24b">Image3</image>
</page>
|
test.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XML Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function loadXML(xmlFile){
xmlDoc.async = "false";
xmlDoc.onreadystatechange = verify;
xmlDoc.load(xmlFile);
xmlObj = xmlDoc.documentElement;
// show content of xml document
alert(xmlObj.xml);
// show number of nodes in xml document
alert(xmlObj.childNodes.length);
// show element in second tag
alert(xmlObj.childNodes(1).firstChild.text);
// show size of 3-rd image
alert(xmlObj.childNodes(2).getAttribute("size"));
}
function verify(){
if(xmlDoc.readyState != 4)
return false;
}
</script>
</head>
<body onload="loadXML('test.xml')">
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: codexomega
(16.05.2006 в 05:24)
| | | А как в этом примере вместо алерт реально вывести рисунки с их описанием, как в обычном веб-документе? | |
| |
|
|
| |
|
|
| |
для: coloboc66
(16.05.2006 в 10:42)
| | | :)
А вот до этого я пока не дошел. Сейчас проектирую.
Здесь есть статья уважаемого Crux'a, о динамической манипуляции таблиц при помощи Javascript и DOM.
Вот этим знанием я и собираюсь воспользоваться.
При загрузке документа, информация выводимая из xml должна будет заполнять динамически созданные таблицы, и другие элементы документа.
Может есть выход и по проще.
Но я это делаю для себя, так потренироваться на всём сразу. | |
| |
|
|
| |
|
|
| |
для: codexomega
(16.05.2006 в 18:01)
| | | Ну вот, полюбуйтесь:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XML Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function loadXML(xmlFile){
xmlDoc.async = "false";
xmlDoc.onreadystatechange = verify;
xmlDoc.load(xmlFile);
xmlObj = xmlDoc.documentElement;
// create table
var tableElement = document.createElement("table");
tableElement.border = 1;
// create row
var rowElement = tableElement.insertRow(0);
// create first cell
var cellElement = rowElement.insertCell(0);
cellElement.width = "200";
cellElement.align = "center";
cellElement.innerHTML = "<img src='" + xmlObj.childNodes(0).getAttribute("name") + "' />";
// create second cell
var cellElement = rowElement.insertCell(-1);
cellElement.width = "400";
cellElement.align = "center";
cellElement.innerHTML = "<p>" + xmlObj.childNodes(0).firstChild.text + "</p>";
// add table to document
document.body.appendChild(tableElement);
}
function verify(){
if(xmlDoc.readyState != 4)
return false;
}
</script>
</head>
<body onload="loadXML('test.xml')">
</body>
</html>
|
Документ xml, можно улучшить, распределив картинки по страницам, для постраничной навигации.
Ну и выводить всё это в цикле. | |
| |
|
|
| |
|
|
| |
для: codexomega
(16.05.2006 в 19:27)
| | | Странная функция verify(): она возвращает или false, или null. ...И при этом работает?
Я не использую load() (вообще, что это за функция, я про неё ничего не нашёл?), а пишу обработку в verify() и <объект_XMLHttp>.open(). Иначе как-то неалгоритмично. Вот вопрос: когда выполняется xmlObj = xmlDoc.documentElement; ? Он должен во время onreadystatechange при xmlDoc.readyState == 4 . А по функции выходит, что сразу, независимо от readyState . Может ,только поэтому он работает с локальными файлами?
Будет ли это работать удалённо? | |
| |
|
|
| |
|
|
| |
для: 12345
(17.05.2006 в 13:58)
| | | Кто бы объяснил наглядно и популярно, какие все это (JavaScript и XML) дает преимущества по сравнению с традиционным HTML и JavaScript? У меня как-то в голове не укладывается... | |
| |
|
|
| |
|
|
| |
для: coloboc66
(17.05.2006 в 15:12)
| | | coloboc66 : XML даёт как раз неудобства для маленьких форматов пересылки. Лучше бы текст. Просто никакой другой альтернативы объекту XMLHttpRequest в языке и браузерах нет (кроме фреймов или связанных окон). Но с фреймами организовывать сложнее и на окно для фрейма система выделяет очень много ресурсов. Поэтому работа с объектом частично лучше, частично хуже, но в сумме - лучше, потому что меньше ресурсов занимает. | |
| |
|
|
| |
|
|
| |
для: 12345
(17.05.2006 в 13:58)
| | | Да: удаленно работает! Я попробовал! | |
| |
|
|
| |
|
|
| |
для: coloboc66
(17.05.2006 в 16:27)
| | | Был бы рад сказать что-нибудь умное, но сам в этом деле новичок.
to 12345:
Всю информацию взял отсюда, к сожалению ни о чем сказать не могу.
Это было для меня единственным источником информации и раннее с этим не стaлкивался:
http://www.sitepoint.com/article/server-side-xml-javascript
http://www.thescarms.com/XML/DOMTutorial.asp
to coloboc66:
Насчет приимуществ XML, могу сказать что это организованный документ, из которого легко получить нужную информацию, он как-бы база данных, в текстовом файле.
Если английский не очень смущает, можете ознакомиться с ним здесь:
http://www.w3schools.com/xml/default.asp | |
| |
|
|
| |
|
|
| |
для: codexomega
(17.05.2006 в 17:57)
| | | Но при задержке данных работать не должна. Посмотрел ещё раз источники по всем другим статьям - нет load().
http://www.w3schools.com/xml/xml_http.asp
http://jibbering.com/2002/4/httprequest.html
или список ссылок: | |
| |
|
|
| |
|
|
| |
для: 12345
(17.05.2006 в 19:33)
| | | Не могу спорить. Просто нашел скрипт, попробовал, получилось...
Правда быть может он устарел уже, всетаки датируется 2002-м годом.
Ну а если использовать XMLHttpRequest, то как в данном примере будет выглядеть запрос к документу xml?
И будут ли доступны используемые функции DOM для навигации в документе (childNodes, getElementsByTagName, итд)? | |
| |
|
|
| |
|
|
| |
для: codexomega
(17.05.2006 в 19:52)
| | | to codexomega (17.05.2006 в 19:52)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XML Test</title>
<script language="javascript">
var req;
function loadXML(url) {
// для "родного" XMLHttpRequest
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// для версии с ActiveX
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}
function processReqChange() {
// только пр состоянии "complete"
if (req.readyState == 4) {
// для статуса "OK"
if (req.status == 200) {
// здесь идут всякии штуки с полученным ответом
createTBL();
} else {
alert("Не удалось получить данные:\n" +
req.statusText);
}
}
}
function createTBL(){
xmlObj = req.responseXML.documentElement;
// create table
var tableElement = document.createElement("table");
tableElement.border = 1;
// create row
var rowElement = tableElement.insertRow(0);
// create first cell
var cellElement = rowElement.insertCell(0);
cellElement.width = "200";
cellElement.align = "center";
cellElement.innerHTML = "<img src='" + xmlObj.childNodes(0).getAttribute("name") + "' />";
// create second cell
var cellElement = rowElement.insertCell(-1);
cellElement.width = "400";
cellElement.align = "center";
cellElement.innerHTML = "<p>" + xmlObj.childNodes(0).firstChild.text + "</p>";
// add table to document
document.body.appendChild(tableElement);
}
</script>
</head>
<body onload="loadXML('test.xml')">
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Crux
(17.05.2006 в 22:09)
| | | Странно, но почему-то у меня не работает..
Думал сначала что в вашем коде где-нибудь опечатка, потом зашел сюда:
http://www.w3schools.com/xml/tryit.asp?filename=try_xmlhttprequest_js
Сверил, проверил снова, и мне выдается ошибка через alert() => Uknown в IE и Undefined в Oper'e.
Файл xml присутствует, и находится в одной папке со скриптом.
Страница html открывается посредством прямого клика по ней.
Может я не так что-нибудь делаю? | |
| |
|
|
| |
|
|
| |
для: codexomega
(17.05.2006 в 22:55)
| | | >Страница html открывается посредством прямого клика по ней.
с XMLHttpRequest прямой клик не прокатит, только через web-сервер. | |
| |
|
|
| |
|
|
| |
для: Crux
(18.05.2006 в 05:50)
| | | Значит без Appache или IIS не обойтись?
А я то думал что можно напрямую управлять файлами через JavaScript.
Хоть оно и работает в первом варианте кода, но только в IE.
Затея не совсем удачная. | |
| |
|
|
| |
|
|
| |
для: codexomega
(18.05.2006 в 06:24)
| | | напрямую с файлами в браузере позволяет работать только MicroSoft.
остальные разработчики придерживаются "политики безопасности". | |
| |
|
|
| |
|
|
| |
для: Crux
(18.05.2006 в 06:43)
| | | Спасибо, теперь буду знать.
Ушел изучать ajax. | |
| |
|
|
| |
|
|
| |
для: Crux
(18.05.2006 в 06:43)
| | | > напрямую с файлами в браузере позволяет работать только MicroSoft.
> остальные разработчики придерживаются "политики безопасности".
Не знаю, в чём там проблемы, но мой вариант работает везде (кроме Оперы).
Смотреть текст "Короткий пример XMLHttpRequest ", давить на ссылку 1 и более раз. Работает как из сети, так и после скачивания в локальный файл.
(Если у кого установлено, проверьте в Опера-9.)
Ещё раз ссылка: | |
| |
|
|
| |
|
|
| |
для: 12345
(18.05.2006 в 13:28)
| | | >Работает как из сети, так и после скачивания в локальный файл.
скачал... но не работает. | |
| |
|
|
| |
|
|
| |
для: codexomega
(17.05.2006 в 19:52)
| | | > Ну а если использовать XMLHttpRequest, то как в данном примере будет выглядеть запрос к документу xml?
Здесь в твоём примере он тоже используется , но обычно есть 2 свойства: responseXML и responseText . В общем, надо разобраться, что за методы (load()) ещё есть.
А в FF оно (load()) работает? | |
| |
|
|
| |
|
|
| |
для: 12345
(18.05.2006 в 00:19)
| | | Не подумал проверить, но оказалось что работает только в IE.
А вот код от Crux, хоть и кросс-браузерный, но выдает мне ошибку в этой функции, т.е срабатывает alert().
function processReqChange() {
// только пр состоянии "complete"
if (req.readyState == 4) {
// для статуса "OK"
if (req.status == 200) {
// здесь идут всякии штуки с полученным ответом
createTBL();
} else {
alert("Не удалось получить данные:\n" +
req.statusText);
}
}
}
|
Почему не устанавливается связь с документом xml? | |
| |
|
|
| |
|
|
| |
для: codexomega
(18.05.2006 в 01:04)
| | | Потому что при запуске как файла код 200 не появляется, пиши, как в моём примере - 200 или 0, и будет работать не только через веб-сервер.
Пример: | |
| |
|
|
| |
|
|
| |
для: 12345
(18.05.2006 в 02:31)
| | | Пишет:
xmlObj is null or not an object
|
Когда 0 и alert() с прежней ошибкой при -200 | |
| |
|
|
