Извлечение изображения и связанных метаданных с помощью запроса AJAX

Question

У меня есть довольно дорогая серверная операция, которая производит изображение и некоторые связанные текстовые метаданные об этом изображении. Моя веб-страница будет отображать оба.

Изображение и его данные выбираются с помощью вызовов AJAX. На стороне сервера можно создавать изображение и метаданные одновременно. Как я могу передать (и отобразить) как изображение, так и данные одним вызовом AJAX?

(Проблема с двумя вызовами заключается в том, что дорогостоящая операция на стороне сервера происходит дважды, когда это не требуется.)

Edit: Для пояснения, изображение рисуется динамически в сервлете. Если он имеет отдельный URL-адрес от метаданных, то требуются два запроса, и дорогостоящая операция выполняется дважды. Я не хочу писать свое собственное кэширование в сервлете, так как в противном случае использование кэширующего прокси и max-age работает отлично.

Answer 1

ОБНОВЛЕНИЕ 2:

Если оба процесса используют один и тот же URL ресурса, вы можете отправить метаданные в виде пользовательских заголовков HTTP. Хотя я не совсем уверен в следующем методе.

1. Вы отправляете запрос Ajax на URL изображения. Это позволит вам читать заголовки ответа HTTP.
2. Когда вызов Ajax завершен, вставьте в DOM изображение с тем же URL-адресом, что и в вызове Ajax.
3. Теперь это непроверенная часть. Если браузер не делает различий между запросами, инициированными объектом XMLHttpRequest или объектом IMG, то при вставке изображения не будет дополнительного запроса. Это было бы решение в браузере. Кэширующий прокси-сервер гарантирует, что другие клиенты, запрашивающие тот же ресурс, получат кэшированную версию URL.

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

Также , хотя вы сказали, что не хотите использовать изображения в кодировке base64, существуют методы , позволяющие определить, поддерживает ли их браузер или нет. Затем вы можете использовать их для достаточно умных браузеров и пожертвовать двойным запросом для других. По крайней мере, не хуже.

ОБНОВЛЕНИЕ 1 (больше не применяется):

Если вы уже используете кеширующий прокси и заголовок max-age, то я бы сделал следующее:

1. Инициируйте запрос Ajax для получения метаданных. Метаданные будут содержать URL изображения.
2. Вставьте в DOM новое изображение с указанным выше URL.
3. Пусть браузер решит, извлекать ли этот ресурс изображения (он может извлечь его из кэша браузера). Этот механизм должен быть таким же, как в обычном случае, когда вы выводите тег IMG с сервера.
4. Если вы хотите отображать метаданные только после загрузки изображения, используйте событие onload объекта Image. Также есть событие ошибки.

СТАРЫЙ ОТВЕТ (больше не применяется):

Я не совсем понимаю, что вы подразумеваете под "созданием изображения", но я предполагаю, что вы просто хотите отправить URL-адрес изображения обратно на веб-страницу. В этом случае вы можете использовать JSON для отправки как URL-адреса изображения, так и метаданных. Как это:

{
    "url" : "http://example.com/image.png",
    "meta" : {
        "type"   : "png",
        "width"  : "200px",
        "height" : "200px"
    }
}

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

var response  = eval(xhr.responseText);
var url       = response.url;
var imageType = response.meta.type;

Вышеуказанное может произойти внутри обработчика onreadystatechange. Если вы используете библиотеку, все будет немного проще.

Answer 2

Лучший способ сделать это - создать новый инкапсулирующий объект, который возвращает оба этих свойства. Так что ImageContainer.Image и ImageContainer.Metadata получат то, что вы хотите.

Я ответил на аналогичный вопрос здесь .