Javascript 异步更新内容

标签 javascript html

我想知道如何使用 javascript，在页面加载后通过更改 img 元素的 src 来异步加载图像。我认为 AJAX 就是用于类似的事情(从服务器获取数据而不刷新页面)。请澄清为什么它会这样工作。图像位于服务器端，因此我认为应该刷新页面才能看到结果。

这里是一个示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<script>
var photos = ["baloon", "game", "cliff"];
function changePhoto() {
    var input=document.getElementById("ph1");
    var iValue=input.value.trim();
    for(var tmp in photos) {
        if(photos[tmp] === iValue){
            var img=document.getElementById("photo");
            img.setAttribute("src", "img/"+iValue+".jpg");
        }
    }
}
</script>
</head>
<body>
  <input class="form-control" id="ph1" type="text" onkeyup="">
  <p>Photo: <span id="txtHint" onclick="changePhoto()"></span></p>
  </div>
  <div class="container" id="photocontainer">
    <img id="photo">
  </div>
</body>
</html>

最佳答案

用户代理只需发送一个 GET 请求来响应 src 属性的更改，这与页面最初加载时执行的操作相同。

AJAX 是一种允许客户端上的 JavaScript 异步请求的技术。浏览器可以随时发出他们想要的任何请求，就像在本例中一样，但如果没有 AJAX，则无法在网站加载的客户端代码中完成此操作。

例如，我刚刚通过 Chrome 开发者工具更改了页面中某个元素的 src 属性，并观察了 GET 请求的执行情况。