Отправляет email-рассылки с помощью сервиса Sendsay

Упражнения по яванскому письму. Javascript.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Виртуальный офис - дома" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Октябрь 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
12345c

Статистика

0 подписчиков
0 за неделю
←   Все выпуски   →

Обмен данными из локальных файлов через объект XMLHttpRequest.
краткое содержание

Обмен данными из локальных файлов через объект XMLHttpRequest.

Использование Ajax-объекта для подгрузки данных из локальных файлов. Работа без перезагрузки страницы и без серверных скриптов.
Существует дней: 194
Автор: 12345c
Другие выпуски:
Рассылка 'Упражнения по яванскому письму. Javascript.'
 
Статья.
31.10.06

Ajax в оффлайне.

 Известно, что объект XMLHttpRequest используется для работы с удалённым сервером для обмена данными без перезагрузки страницы. Оказывается его можно использовать для работы с локальными файлами во всех браузерах, поддерживающих его. Достаточно немного изменить условия приёма ответов.

Подобный метод работы с XMLHttpRequest рассматривается в недавно вышедшей книге "Ajax в дейcтвии", работе с файлами на локальном компьютере посвящена часть главы 13. Но предметом рассмотрения статьи будет короткий пример, который не связан с примерами из книги и в котором легко будет рассмотреть структуру работы с объектом для собственного будущего применения.

Скажем кратко о том, что описывается в той главе книги, поскольку тематика пересекается. Работу Ajax без сервера решили продемон­стрировать на примере чтения html-страниц, содержащих RSS-ленты. Они, как известно, организованы в формате XML- или XHTML-файла, поэтому остаётся написать метод доступа к ним. Представили, что ленты сложены или в файл на локальном компьютере или могут загрузиться из статического html-файла на сервере (например, его формирует серверный скрипт). Задача решается всесторонне, поэтому из статьи трудно сразу выделить интересущую нас часть - работу с локальным файлом. Оставим разбор реализации заинтересовавшимся и вернёмся к нашему короткому примеру.

Упомянутая книга существует на английском и русском языках. Она обсуждалась в недавней статье рассылки, в форуме, а также, как отправную точку поиска можно посоветовать страницу http://javascript.aho.ru/files/ .

Имеется ряд базовых статей, описывающих работу с XMLHttpRequest, что составляет ядро технологии Ajax. Не будем вдаваться в подробности этого быстро развивающегося направления, упомянем только самую обстоятельную статью на русском по работе с объектом - "Отправка и обработка ответов http-запросов с помощью JavaScript". Функция работы с объектом, как видно из статьи и которую повторим ниже, состоит из 2 частей - функций. Первая - создаёт объект XMLHttpRequest и отправляет запрос на сервер. Вторая - обработчик события onreadystatechange, которое возникает в созданном объекте, когда приходит (или не приходит) ответ на запрос. Вся задача поддержания функционирования объекта обычно заключается в грамотной работе с 2 этими функциями, что, в общем, в литературе описано. Надо дождаться состояния свойства объекта  .readyState==4, и если свойство  .status==200, то операция обмена удалась.

Особенность работы XMLHttpRequest с локальными файлами - в том, что в состоянии приёма "4" статус 200 не возникает. Это - единственное отличие локальных файлов от веба, поэтому, чтобы написать пример, работающий в вебе (или, что то же самое, с локальным http-сервером) или с локальными файлами, надо учесть эту единственную особенность. Задача не настолько сложна, чтобы писать про неё отдельную статью, если бы не была столь актуальна. Добавляется пара строк кода - и расширяется функциональность до локальных файлов. Можно было бы вообще статус игнорировать, но тогда было бы неизвестно, по какой причине не пришёл файл в случае работы с сервером.

В коде демонстрационного примера оставим только те элементы, которые важны для функционирования. В частности, не будем анализировать ошибки http-ответа. Нет выполнения условий со статусом - считаем, что не пришёл ответ. Убираем лишние синтаксические конструкции, чтобы описание функции было кратким. В то же время, оставим конструкции, необходимые в дальнейшем на практике. Весь пример показывает, сколь немного кода нужно для работы с объектом. Действительно, то, что вы видите ниже - это всё, что надо для работы, даже без серверного кода и длинных статей по поводу поведения объекта.

<u onClick=loadXMLDoc(this,'JsPrimeryCode-40.xml')>
  xMLHttpRequest</u>
function loadXMLDoc(t,url){
var Q=XMLHttpRequest?new XMLHttpRequest():   //объект
  (ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):{})
Q.onreadystatechange=function(){ //приём ответа
  if(Q.readyState==4&&(Q.status==200
    ||location.href.indexOf('http:')<0&&Q.status==0))
    t.innerHTML+=Q.responseText; //добавление
};               //  текущей строки строкой ответа
Q.open("GET",url+'?'+Math.random(),!0);Q.send(null);
} //формирование случайного URL запроса

Работа скрипта состоит в дописывании строки при клике на ней содержимым файла JsPrimeryCode-40.xml . Результат можно наблюдать на странице http://javascript.aho.ru/example/JsPrimeryCode-40.htm при клике на слове "XMLHttpRequest". В примере файл JsPrimeryCode-40.xml содержит

<response value="12345">
< 
<method value="123456">This is</method> 
example 
<result>of Suggest></result> 
</response>

Тем не менее, по правилам свойства Q.responseText, получаем текстовое содержимое файла без тегов. В этом есть один скрытый недостаток метода: тестовые данные хорошо передаются, и даже бинарные вместо них, но может быть проигнорирован тег или теги, если они случайно встретятся. Поэтому для передачи тегов как текста их нужно кодировать.

Скрипт, как говорилось, игнорирует ошибки обмена и отсутствие объекта в браузере. В этих случаях при клике ничего не произойдёт. Браузеры, имеющие XMLHttpRequest (IE5+, NN7+, Safari 1.2+, Mozilla, Firefox, Opera 8+) сработают. Но возможно, в некоторых непроверенных системах и браузерах эффекта на локальных файлах не будет - не все ведь обязаны понимать найденную закономерность с Q.status==0 . (Если обнаружатся такие результаты, просьба сообщить автору.)

В предпоследней строчке листинга добавлен параметр запроса в виде случайной функции Math.random(). Скрипт будет работать и без неё, но в случае обновления файла *.xml на http-сервере ответ с большой вероятностью будет кеширован, если запрос будет без параметра. В приложениях такой параметр желательно иметь во избежание результатов самодеятельности различных местных прокси.

Последнее, что следует делать в реальных приложениях - проверять различные состояния статуса ответа. Например, 404 будет означать, что страницы на сервере не существует. Это поможет быстрее получить отрицательный ответ на клиенте и принять меры (сообщить пользователю).

Будем надеяться, что приведённый пример поможет с большой лёгкостью применять новую технологию в файлах *.htm, не задуываясь, под сервером или как локальные файлы они будут просматриваться.

Уровень: для начинающих
 javascript.aho.ru , © I.Svetlov, 2005-2006 
Текущая очерёдность плана статей (подписчики могут корректировать через голосование).
9. Многуровневое меню с навигацией по наведению мыши.
8. Ключевые слова новых технологий, которые нужно знать разработчику веб-страниц.
3. Как писать тексты с доступом через JS без экранирования специальных символов (&lt; и другие).
4. select и list - в них есть много общего. Как и с меню навигации. Эмулятор селекта.
5. Древовидное меню, подход к данным, отделение данных от представления.
6. Многонедельный календарь со ссылками. (По списку строится календарь.)

Форум сайта рассылки, почта автора рассылки.

 
В избранное