标题：使用Ajax给img的src赋值

简介：在开发网页时，有时候需要使用Ajax来动态改变图片的显示。本文将介绍如何使用Ajax给img的src属性赋值，并提供一些实际的示例。

在网页开发中，使用Ajax技术可以实现异步加载数据，从而提升用户体验。当需要动态改变图片的显示时，可以通过Ajax来完成。通常情况下，通过Ajax获取数据后，需要将数据赋值给img标签的src属性，以更新图片的显示。

// HTML代码
<img id="myImage" src="default.jpg" alt="默认图片" />
// JavaScript代码
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var imageUrl = this.responseText; // 获取到动态图片的URL
document.getElementById("myImage").src = imageUrl; // 将URL赋值给img的src属性
}
};
xhttp.open("GET", "getImageUrl.php", true);
xhttp.send();

上述代码中，首先定义了一个img标签，其id为"myImage"，src属性值为"default.jpg"，即默认显示的图片。然后使用JavaScript创建一个XMLHttpRequest对象，并设置其onreadystatechange属性为一个回调函数。当Ajax请求的状态发生变化时，该回调函数会被触发。

当Ajax请求的状态为4（即完成）且状态码为200（即成功）时，表示成功获取到数据。此时，通过responseText属性获取到服务器返回的数据，即动态图片的URL。然后，将获取到的URL赋值给img标签的src属性，从而实现动态更新图片的显示。

以下是一个具体的示例，通过点击按钮来动态改变图片的显示：

// HTML代码
<img id="myImage" src="default.jpg" alt="默认图片" />
<button onclick="changeImage()">点击切换图片</button>
// JavaScript代码
function changeImage() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var imageUrl = this.responseText; // 获取到动态图片的URL
document.getElementById("myImage").src = imageUrl; // 将URL赋值给img的src属性
}
};
xhttp.open("GET", "getImageUrl.php", true);
xhttp.send();
}

在上述示例中，点击按钮后会调用changeImage函数。该函数与前面的代码类似，发送一个Ajax请求，获取到动态图片的URL，并将其赋值给img标签的src属性。通过每次点击按钮，都会更新图片的URL，从而实现图片的切换。

总结：通过Ajax给img的src属性赋值，可以实现动态更新图片的显示。通过获取到动态图片的URL，然后将其赋值给img标签的src属性，即可实现图片的切换。这在开发中特别适用于需要动态加载不同图片的情况，提升用户体验。