使用AJAX请求获取图像和关联的元数据

Question

我有一个有点昂贵的服务器端操作，它产生一个图像和一些关于该图像的相关文本元数据。我的网页将同时显示。

使用AJAX调用获取图像及其数据。在服务器端，可以同时生成图像和元数据。如何通过一次AJAX调用传输（并显示）图像和数据？

（进行两次调用的问题是昂贵的服务器端操作最终会在没有必要的情况下发生两次。）

编辑： 为了澄清，图像是在servlet中动态绘制的。如果它具有与元数据不同的URL，则需要两个请求，并且昂贵的操作发生两次。我不想在servlet中编写自己的缓存，因为使用缓存代理并且max-age工作得很好。

Answer 1

更新2：

如果两个进程共享相同的资源URL，则可以将元数据作为自定义HTTP标头发送。我不完全确定以下技术。

1. 您向图像网址发送Ajax请求。这将允许您读取HTTP响应标头。
2. 当Ajax调用完成后，在DOM中插入一个与Ajax调用中的URL相同的图像。
3. 现在，这是未经测试的部分。如果浏览器在XMLHttpRequest对象或IMG对象发起的请求之间没有区别，则插入图像时将不会有其他请求。这将是浏览器内的解决方案。缓存代理将确保请求相同资源的其他客户端将获得URL的缓存版本。

无论如何，即使浏览器机制不起作用，至少缓存代理有可能缓存单个响应，而不是其他两个响应。

，虽然你说你不想使用base64编码的图像，但是有techniques to determine whether a browser supports them或不是{{3}}。然后，您可以将它们用于足够智能的浏览器，并为其他浏览器牺牲双重请求。至少情况并非如此糟糕。

更新1（不再适用）：

如果您已经依赖缓存代理和max-age标头，那么这就是我要做的事情：

1. 启动Ajax请求以提取元数据。元数据将包含图像的URL。
2. 使用上述网址在DOM中插入新图片。
3. 让浏览器决定是否获取该图像资源（它可以从浏览器缓存中提取）。当您从服务器输出IMG标记时，此机制应该与正常情况一样。
4. 如果只想在加载图像后显示元数据，请使用Image对象的onload事件。还有一个错误事件。

OLD ANSWER（不再适用）：

我真的不明白“制作图像”是什么意思，但我假设您只想将图像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将为您提供所需的功能。

我回答了类似的问题here。