Шрифт:
}
// Зарегистрировать обработчик события, который получит сведения
// о ссылке при наведении на нее указателя мыши
if (link.addEventListener)
link.addEventListener("mouseover", mouseoverHandler, false);
else
link.attachEvent("onmouseover", mouseoverHandler);
}
function mouseoverHandler(e) {
var link = e.target || e.srcElement; // Элемент <a>
var url = link, liref; // URL-адрес ссылки
var req = new XMLHttpRequest; // Новый запрос
req.open("HEAD", url); // Запросить только заголовки
req.onreadystatechange = function { // Обработчик события
if (req.readyState !== 4) return; // Игнорировать незаверш. запросы
if (req.status === 200) { // В случае успеха
var type = req.getResponseHeader("Content-Type"); //Получить
var size = req.getResponseHeader("Content-Length"); //сведения
var date = req.getResponseHeader("Last-Modified"); //о ссылке
// Отобразить сведения во всплывающей подсказке,
link.title = "Тип: " + type + " \n" +
"Размер: " + size + " \n" + "Дата: " + date;
}
else {
// Если запрос не удался и подсказка для ссылки еще не содержит текст
// "Ссылка на другой сайт", вывести сообщение об ошибке,
if (!link.title)
link.title = "Невозможно получить сведения: \n" + req.status + " " + req.statusText;
}
};
req.send(null);
// Удалить обработчик: попытка получить сведения выполняется только один раз.
if (link.removeEventListener)
link.removeEventListener("mouseover", mouseoverHandler, false);
else
link.detachEvent("onmouseover", mouseoverHandler);
}
});
18.2. Выполнение НТТР-запросов с помощью <script>: JSONP
В начале этой главы упоминалось, что элемент
<script>
можно использовать в качестве Ajax-транспорта: достаточно установить атрибут src
элемента <script>
(и вставить его в документ, если он еще не внутри документа), и броузер сгенерирует HTTP-запрос, чтобы загрузить содержимое ресурса по указанному URL-адресу. Основная причина, почему элементы <script>
являются удобным Ajax-транспортом, состоит в том, что они не являются субъектами политики общего происхождения и их можно использовать для запроса данных с других серверов. Вторая причина состоит в том, что элементы <script>
автоматически декодируют (т. е. выполняют) тело ответа, содержащего данные в формате JSON. Прием использования элемента
<script>
в качестве Ajax-транспорта известен под названием JSONP: это способ организации взаимодействий, когда в теле ответа на HTTP-запрос возвращаются данные в формате JSON. Символ «Р» в аббревиатуре означает «padding», или «prefix» (дополнение или приставка), но об этом чуть ниже. [51] Представьте, что вы пишете службу, которая обрабатывает GET-запросы и возвращает данные в формате JSON. Документы с общим происхождением могут пользоваться этой службой с помощью объекта
XMLHttpRequest
и метода JSON.parse
, как показано в примере 18.3. Если на сервере будет настроена отправка заголовка «CORS», сторонние документы при отображении в новых броузерах также смогут пользоваться службой с помощью объекта XMLHttpRequest
. Однако при отображении в старых броузерах, не поддерживающих заголовок «CORS», сторонние документы смогут получить доступ к службе только с помощью элемента <script>.
Ответ в формате JSON является (по определению) допустимым программным кодом на языке JavaScript, и броузер выполнит его при получении. При выполнении данных в формате JSON происходит их декодирование, но полученный результат является обычными данными, которые ничего не делают.51
Термин «JSONP» предложил Боб Ипполито (Bob Ippolito) в 2005 году .
Именно здесь на сцену выходит символ «Р» из аббревиатуры JSONP. Когда обращение к службе реализовано с помощью элемента
<script>,
служба должна «дополнить» ответ, окружив его круглыми скобками и добавив в начало имя JavaScript-функции. То есть вместо того чтобы отправлять данные, такие как:
[1, 2, {"buckle": "my shoe”}]
она должна отправлять дополненные данные, как показано ниже: