ajax返回json或blob

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

Ajax是一种在网页中进行异步数据交互的技术，可以实现页面无刷新地向服务器发送请求并获取响应数据。在Ajax中，常常使用JSON（JavaScript Object Notation）或者Blob（Binary Large Object）格式来传输数据。

1、返回JSON数据

JSON是一种轻量级的数据交换格式，常用于前后端之间的数据传输。通过Ajax请求后端接口，可以获取到返回的JSON数据，并在前端进行处理和展示。

示例代码如下：


// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求的方法和URL
xhr.open('GET', 'example.com/api/data', true);
// 设置请求头，告诉服务器返回的数据是JSON格式
xhr.setRequestHeader('Content-Type', 'application/json');
// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 获取响应数据
    var response = JSON.parse(xhr.responseText);
    // 在页面上展示数据
    document.getElementById('result').innerHTML = response.data;
  }
};
// 发送请求
xhr.send();

在上述示例代码中，通过XMLHttpRequest对象发送了一个GET请求，请求的URL是`example.com/api/data`。设置了请求头`Content-Type`为`application/json`，告诉服务器返回的数据是JSON格式。在请求状态变化的回调函数中，通过`JSON.parse`方法将响应数据解析为JSON对象，并将其中的`data`字段的值展示在页面上。

2、返回Blob数据

Blob是一种二进制大对象，可以用于存储和传输大量的二进制数据，例如图片、音频、视频等。通过Ajax请求后端接口，可以获取到返回的Blob数据，并在前端进行处理和展示。

示例代码如下：


// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求的方法和URL
xhr.open('GET', 'example.com/api/image', true);
// 设置响应类型为Blob
xhr.responseType = 'blob';
// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 获取响应数据
    var response = xhr.response;
    // 创建一个URL对象
    var imageURL = URL.createObjectURL(response);
    // 在页面上展示图片
    var imgElement = document.createElement('img');
    imgElement.src = imageURL;
    document.body.appendChild(imgElement);
  }
};
// 发送请求
xhr.send();

在上述示例代码中，通过XMLHttpRequest对象发送了一个GET请求，请求的URL是`example.com/api/image`。通过设置`responseType`为`blob`，告诉浏览器返回的数据是Blob类型。在请求状态变化的回调函数中，通过`xhr.response`获取到Blob对象，然后通过`URL.createObjectURL`方法创建一个URL对象，将其赋值给`imgElement.src`，从而在页面上展示图片。

通过Ajax请求后端接口返回的JSON或Blob数据，可以在前端进行处理和展示。在请求状态变化的回调函数中，可以通过`xhr.responseText`获取到JSON数据，通过`JSON.parse`方法解析为JSON对象；或者通过`xhr.response`获取到Blob数据，再进行相应的处理。这些技术可以帮助前端开发人员实现更丰富的交互和数据展示效果。

ajax返回json或blob

相关阅读