JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

JavaScript. Подробное руководство, 6-е издание

на обложку

Флэнаган Дэвид

Шрифт:

83:”S", 84:"Т", 85:"U". 86:"V", 87:"W", 88:"X". 89:"Y", 90:"Z",

// Цифровые клавиши на дополнительной клавиатуре и клавиши со знаками препинания.

// (Не поддерживаются в Opera.)

96:"О",97:"1",98:"2",99:"3",100:"4",101:"5",102:”6",103:"7",104:"8",

105:"9",106:"Multiply", 107:"Add", 109:"Subtract", 110:"Decimal",

111:"Divide",

// Функциональные клавиши

112:"F1", 113:"F2", 114:"F3", 115:"F4". 116:"F5", 117:"F6",

118:”F7", 119:"F8", 120:"F9", 121:"F10", 122:"F11", 123:"F12",

124:"F13", 125:"F14", 126:"F15", 127:”F16", 128:"F17", 129:"F18",

130:"F19", 131:"F20", 132:"F21”, 133:"F22”, 134:"F23", 135:"F24".

// Клавиши со знаками препинания, для ввода которых не требуется

// удерживать нажатой клавишу Shift.

// Дефис не может использоваться переносимым способом: FF возвращает

// тот же код, что и для клавиши Subtract

59:";”, 61:"=", 186:";", 187:"=", // Firefox и Opera возвращают 59,61

188:",", 190:".", 191:"/", 192: , 219:"[", 220:"\\". 221:"]", 222:"'"

};

Работа с протоколом HTTP

Протокол передачи гипертекста (Hypertext Transfer Protocol, HTTP) определяет, как веб-броузеры должны запрашивать документы, как они должны передавать информацию веб-серверам и как веб-серверы должны отвечать на эти запросы и передачи. Очевидно, что веб-броузеры очень много работают с протоколом HTTP. Тем не менее, как правило, сценарии не работают с протоколом HTTP, когда пользователь щелкает на ссылке, отправляет форму или вводит URL в адресной строке.

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

location

объекта

Window

или вызывает метод

submit

объекта

Form

. В обоих случаях броузер загружает в окно новую страницу. Такого рода взаимодействие с протоколом HTTP может быть вполне оправданным в веб-страницах, состоящих из нескольких фреймов, но в этой главе мы будем говорить совсем о другом. Здесь мы рассмотрим такое взаимодействие JavaScript-кода с веб-сервером, при котором веб-броузер не перезагружает содержимое окна или фрейма.

Термин Ajax описывает архитектуру веб-приложений, отличительной чертой которых является работа с протоколом HTTP. [48]

Ключевой особенностью Ajax-приложения является использование протокола HTTP для инициации обмена данными с веб-сервером без необходимости перезагружать страницу. Возможность избежать перезагрузки страницы (что было привычным на первых этапах развития Всемирной паутины) позволяет создавать веб-приложения, близкие по своему поведению к обычным приложениям. Веб-приложение может использовать технологии Ajax для передачи на сервер результатов взаимодействия с пользователем или для ускорения запуска приложения, отображая сначала простую страницу и подгружая дополнительные данные и компоненты страницы по мере необходимости.

Ajax - это аббревиатура от Asynchronous JavaScript and XML (асинхронный JavaScript и XML). Этот термин предложил Джесси Джеймс Гаррет (Jesse James Garrett) и впервые использовал его в своей статье «Ajax: A New Approach to Web Applications» в феврале 2005 года (От переводчика: перевод этой статьи на русский язык можно найти по адресуги/articles,fwl60.). В течение многих лет термин «Ajax» был громким словом, которое употребляли к месту и не к месту, а сейчас это всего лишь удобный термин, обозначающий архитектуру веб-приложения, опирающегося в своей работе на НТТР-запросы.

Термин Comet описывает похожую архитектуру веб-приложений, также использующих протокол HTTP. [49]

В некотором смысле архитектура Comet является обратной по отношению к Ajax: в архитектуре Comet не клиент, а сервер инициирует взаимодействие, асинхронно отсылая сообщения клиенту. Если веб-приложению потребуется отвечать на сообщения, отправляемые сервером, оно сможет использовать приемы Ajax для отправки или запроса данных. В архитектуре Ajax клиент «вытягивает» данные с сервера. В архитектуре Comet сервер «навязывает» данные клиенту. Иногда архитектуру Comet называют «Server Push», «Ajax Push» и «HTTP Streaming».

Имя Comet было предложено Алексом Расселом (Alex Russell) в статье «Comet: Low Latency Data for the Browser» . Вероятно, выбирая такое имя, Алекс Рассел хотел обыграть термин Ajax: дело в том, что в США Comet и Ajax являются названиями чистящих средств.

Есть множество способов реализации архитектур Ajax и Comet, и эти базовые реализации иногда называют транспортами. Элемент

<img>,

например, имеет свойство

src

. Когда сценарий записывает в это свойство URL-адрес, инициируется HTTP-запрос GET и выполняется загрузка содержимого с этого URL-адреса. Таким образом, сценарий может отправлять информацию веб-серверу, добавляя ее в виде строки запроса в URL-адрес изображения и устанавливая свойство src элемента

<img>.

В ответ на этот запрос веб-сервер должен вернуть некоторое изображение, которое, например, может быть невидимым: прозрачным и размером 1x1 пиксел. [50]

Такие изображения иногда называют веб-жучками (web bugs). Они пользуются дурной славой из-за проблем с безопасностью, когда используются для обмена информацией со сторонним сервером, не тем, откуда была загружена страница. Одно из типичных применений веб-жучков - подсчет числа посещений и анализа трафика веб-сервера.

Элемент

<img>

– не самый лучший транспорт Ajax, потому что обмен данными ведется только в одном направлении: клиент может передать данные серверу, но ответом сервера всегда будет изображение, извлечь информацию из которого на стороне клиента очень непросто. Элемент

<iframe>

обладает большей гибкостью. При использовании элемента

<iframe>

в качестве транспорта Ajax сценарий сначала добавляет в URL-адрес информацию, предназначенную для веб-сервера, а затем записывает этот URL-адрес в свойство

src

тега

<ifгате>.

Сервер создает HTML-документ, содержащий ответ на запрос, и отправляет его обратно веб-броузеру, который выводит ответ в теге

<iframe>

. При этом элемент

<iframe>

необязательно должен быть видимым для пользователя - он может быть сокрыт, например, средствами таблиц стилей CSS. Сценарий может проанализировать ответ сервера, выполнив обход документа в элементе

<iframe>

. Обратите внимание, что взаимодействие с документом ограничивается политикой общего происхождения, о которой рассказывается в разделе 13.6.2.

Даже изменение свойства

src

элемента

<script>

может использоваться для инициирования HTTP-запроса GET. Использование элементов

<script>

для работы с протоколом HTTP выглядит особенно привлекательно, потому что они не являются субъектами политики общего происхождения и могут использоваться для взаимодействий с разными серверами. Обычно при использовании транспорта Ajax на основе элемента

<script>

ответ сервера имеет вид данных в формате JSON (раздел 6.9), которые автоматически «декодируются», когда содержимое элемента

<script>

выполняется интерпретатором JavaScript. Из-за использования формата данных JSON этот транспорт Ajax получил название «JSONP».