HTML / Javascript動態設置圖像源並獲取更多數據？

Question

我希望能夠從服務器設置圖像源，但也希望它返回與另一個服務器端操作有關的額外數據。

我會盡力解釋。

在我的index.htm文件中， <body>包含以下內容...

<div id="BasicDemo" >
    <img id="nscreen" />
</div>
<script type="text/javascript">setImageSource()</script>

setImageSource()只是這樣做...

$("#nscreen").attr("src", "/control?size=800x480");

我不是經驗豐富的HTML編碼人員，但是我通常在編碼方面有足夠的經驗，可以理解以上內容是針對服務器端代碼的隱式HTTP GET請求，以便請求用於設置<img>源的圖像。

我想用偽代碼做的是...

var someResponse = getImageAndExtra("/control?size=800x480");
$("#nscreen").attr("src", someResponse.imagePath);
var extraData = someResponse.extra;

我不能直接控制服務器端代碼，但我知道開發人員，並將對此進行工作。

我可以使用哪種調用來請求圖像源和額外數據，並且仍然能夠設置“ src”屬性？ 同樣在另一端，服務器端代碼將如何構造響應？

我不禁感到自己在這里錯過了一些非常簡單的事情。

Answer 1

您的服務器代碼將必須返回獨立於圖像的網頁。

該網頁將包含實際圖像的路徑，然后包含（獨立地）您的其他數據。

此類通信的一種非常常見的格式是JSON。 服務器構造一個頁面，如下所示：

{extra: "some-data", image: "/path/to/real/image"}

就是這樣，沒有HTML，它將響應的Content-Type設置為application/x-json而不是text/html 。

然后，JS執行XMLHTTPRequest來獲取上述JSON，解析響應，然后設置src屬性。

沒有可以設置圖像源的位置，可以讓您提取其他信息（禁止圖像隱寫術或標題技巧或其他骯臟的交易）。