ajax传图片跟普通ajax区别【ajax 图片：示例代码】

Ajax是一种用于在网页上实现异步数据交互的技术。它通过在不刷新整个页面的情况下，向服务器发送请求并接收响应，实现了动态更新页面的效果。在传统的Ajax中，常用的数据格式是文本或者JSON，而传输图片则需要使用特定的技术。

传输图片的Ajax与普通Ajax的区别在于数据的格式和处理方式。普通Ajax通过XMLHttpRequest对象发送请求，并通过responseText或responseXML属性接收响应，然后将数据解析并更新到页面上。而传输图片的Ajax则需要使用Blob对象和FileReader对象来处理图片数据。

传输图片的Ajax示例代码如下：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 监听请求状态改变事件
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 创建FileReader对象
    var reader = new FileReader();
    // 监听文件加载完成事件
    reader.onload = function() {
      // 将图片数据插入到页面中
      var img = document.createElement('img');
      img.src = reader.result;
      document.body.appendChild(img);
    };
    // 读取Blob对象中的数据
    reader.readAsDataURL(xhr.response);
  }
};
// 打开和发送请求
xhr.open('GET', 'image.jpg', true);
xhr.responseType = 'blob';
xhr.send();

在上述示例代码中，我们首先创建了一个XMLHttpRequest对象，并通过open方法指定了请求的URL和请求方式。然后，我们将responseType属性设置为'blob'，表示响应的数据类型为Blob对象。接着，我们通过send方法发送请求。

在请求状态改变的回调函数中，我们判断请求的状态是否为4（请求已完成）和响应的状态码是否为200（请求成功）。如果满足这两个条件，说明请求成功，并且我们可以通过response属性获取到响应的Blob对象。

接下来，我们创建了一个FileReader对象，并通过load事件监听文件加载完成的事件。在事件回调函数中，我们将Blob对象中的数据读取为DataURL，并将其作为图片的src属性值，插入到页面中。

通过以上的示例代码，我们可以实现通过Ajax传输图片的效果，将图片数据动态更新到页面上。