原生ajax怎么交互图片
时间: 2023-09-18 22:09:19 浏览: 56
在原生Ajax中,可以通过创建XMLHttpRequest对象并使用它来发送HTTP请求和接收响应。可以通过设置XMLHttpRequest对象的responseType属性来指定响应数据类型,如文本、JSON、XML等。
要交互图片,可以将响应类型设置为“blob”,然后使用URL.createObjectURL()方法将响应数据转换为Blob URL,最后将其设置为<img>元素的src属性即可。
以下是一个简单的示例代码,用于通过Ajax加载图片:
```
var xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/image.jpg', true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (this.status === 200) {
var blob = this.response;
var img = document.createElement('img');
img.onload = function(e) {
URL.revokeObjectURL(img.src); // 释放内存
};
img.src = URL.createObjectURL(blob); // 将响应数据设置为Blob URL
document.body.appendChild(img); // 添加到文档中
}
};
xhr.onerror = function() {
console.log('图片加载失败!');
};
xhr.send();
```
上述代码中,首先创建XMLHttpRequest对象,然后设置响应类型为“blob”,并通过调用send()方法发送HTTP请求。
当响应数据加载完成后,将其保存在一个Blob对象中,然后创建一个<img>元素,将Blob URL设置为其src属性,并将其添加到文档中。最后,使用URL.revokeObjectURL()方法释放内存。
需要注意的是,Blob URL是一种临时URL,仅在当前窗口中有效,关闭窗口后将自动释放。因此,如果需要长时间保留图片,应该将其保存为本地文件。
相关推荐
![application/msword](https://img-home.csdnimg.cn/images/20210720083327.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)