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

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

на обложку

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

Шрифт:

* события onmouseover. Обработчик события выполняет HEAD-запрос с помощью

* объекта XMLHttpRequest, чтобы получить сведения о ресурсе, на который

* указывает ссылка, и сохраняет эту информацию в атрибуте title ссылки,

* благодаря чему эта информация будет отображаться во всплывающей подсказке.

whenReady(function {

// Поддерживается ли возможность выполнения междоменных запросов?

var supportsCORS = (new XMLHttpRequest).withCredentials !== undefined;

// Обойти в цикле все ссылки в документе

var links = document.getElementsByTagName('a');

for(var і = 0; і < links.length; і++) {

var link = links[і];

if (!link.href) continue; // Пропустить якоря, не являющиеся ссылками

if (link.title) continue; // Пропустить ссылки с атрибутом title

// Если это междоменная ссылка

if (link.host!==location.host || link.protocol !== location.protocol)

{

link.title = "Ссылка на другой сайт"; // Предполагается, что нельзя

// получить дополнительную информацию

if (!supportsCORS) continue; // Пропустить, если заголовок

// C0RS не поддерживается

// Иначе есть надежда получить больше сведений о ссылке. Поэтому регистрируем

// обработчик события, который предпримет попытку сделать это.

}

// Зарегистрировать обработчик события, который получит сведения

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

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.