Javascript.RU

AJAX-транспорт Script

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/ajax-jsonp.

Запросы способом Script подразумевают только GET и имеют сложности с отслеживанием ошибок. Но зато - их можно делать на любые домены,
что и составляет основную область применения этого транспорта.

Любые таги можно создавать через DOM и добавлять к документу. Если создать узел <script> со ссылкой на внешний исходник,
то при добавлении тэга в документ запустится процесс загрузки. А ответный javascript сервер генерирует динамически и кладет туда нужные данные.

Следующая функция добавляет такой тэг к документу, с нужным id и src. Она добавляет элементы в head, так что не будет работать, если head нету.

function attachScript(id, src){
var element = dojo.doc.createElement("script")
element.type = "text/javascript"
element.src = src
element.id = id
document.getElementsByTagName("head")[0].appendChild(element)
}

Например, вызов

attachScript('script1','/service/newMail.js?name=Vasya')

добавит в head документа тег:

<script src="/service/newMail.js?name=Vasya"></script>

Браузер тут же обработает тег: запросит newMail.js с заданного URL и выполнит.

Когда скрипт загрузится - он должен как-то объявить о себе, что данные подгружены и можно ими управлять.

Обычно для этого используется каллбэк, т.е в конце скрипта делается вызов специальной функции.

Чтобы четко указать, какому скрипту - какой каллбэк вызывать, имя функции передается отдельным параметром. Например,

...
// задать обработчик
var handler = function (data) { ... }
// получили номер для следующего скрипта
handlerId++
// на самом деле каллбек - не сам обработчик, а служебная функция,
// которая дополнительно обработает успешную загрузку и почистит ставший лишним тэг script
scriptHandlers['script_'+handlerId] = makeHandler(handler)

attachScript(handlerId, "/service/newMail.js?name=Vasya&callback=scriptHandlers.script_"+handlerId)

Сервер смотрит на значение параметра callback, и добавляет к скрипту вызов scriptHandlers.script_XXX, где script_XXX - значение параметра callback.

Обычно, сервер просто отдает данные клиенту, отвечая на запрос вызовом типа

scriptHandlers.script_XXX({sender:"Petya",senderId:6})

Такой формат называют JSONP: JSON with Padding, т.к для обмена данными используются javascript-объекты (не XML и т.п), и используется
дополнительная функция (padding).

Длина URL в GET-запросах ограничена. Она зависит от браузера-сервера, приблизительно 1kb - безопасное значение.
Поэтому для отправки на сервер бОльших фрагментов используется multipart-протокол.

Каждый запрос снабжается двумя параметрами: уникальным ID и номером части part.

Первый элемент multipart-запроса имеет part=1, последний - не имеет параметра part. Сервер, таким образом, может подсчитывать полученные куски.

При каждом запросе создается таймер. При успешном запросе - таймер очищается. Через 10 секунд таймер срабатывает и генерирует ошибку запроса.

Такая обработка - гораздо хуже, чем есть в iframe или XmlHttpRequest, где ошибка со стороны сервера (404,500) становится видна сразу.


Автор: Гость (не зарегистрирован), дата: 7 марта, 2009 - 12:03
#permalink

А можно таким способом редактировать таблицу интерактивно ? Заносить новые данные пользователю ?


Автор: Gvozd, дата: 13 апреля, 2009 - 23:32
#permalink

Полагаю, что лучше заменить dojo.doc. на document.
использовать фреймворк,для это задачи наврено лишнее)


Автор: Гость (не зарегистрирован), дата: 19 ноября, 2009 - 22:02
#permalink

newMail.js - это серверный что ли скрипт?... это уж как то непривычно, обычно серверный скрипт это php, т.е. newMail.js, так что если это серверный - нужно явно об этом написать, чтобы не вызывать дискомфорта у читателя.
А если клиентский - то тут мне самому интересно, клиентскому скрипту разве будут передаваться параметры таким образом как серверному?


Автор: Гость (не зарегистрирован), дата: 15 февраля, 2010 - 15:59
#permalink

Вы просто откуда-то взяли неправильные привычки. Все написано корректно. newMail.js - это js-файл, генерируемый на сервере, генерируемый чем угодно, хоть даже этим вашим php и представляющий собой js-код. Это тоже самое, что просить не применять для файлов расширения html, phtml, shtml если в их коде есть вставка <?php date('m.d.Y') ?>.


Автор: popov654, дата: 18 марта, 2013 - 15:32
#permalink

И всё же это немножко нарушает семантику, JS можно вернуть с сервера и так, вроде бы. Так ещё и сервер придётся конфигурировать, чтобы он rewrite делал на PHP скрипт. В некоторых случаях это может быть лишним
А представьте, сколько проблем начнётся при смене сервера (особенно если сам веб-сервер другой). Все конфиги править


Автор: mongoltsc (не зарегистрирован), дата: 2 мая, 2014 - 17:58
#permalink

правильные привычки!!!!
Правильный вопрос возникший в результате правильного понимания контекста!
Ибо именно именно такие непонятки и возникают при чтении статьи!
Обьяснения местами кривые до нельзя!Низкий поклон Илье за труд и большой респект но по его манере обьяснять все таки видно насколько сильно и бескомпромиссно Ёпа-скрипт
уродует мозги


Автор: Гость (не зарегистрирован), дата: 3 августа, 2010 - 00:06
#permalink

Пожалуйста приведите пример multipart- передачи.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
1 + 7 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum