Ajax 之响应解码

Question

我们接收到的响应主体类型可以是多种形式的，包括字符串 String、ArrayBuffer 对象、二进制 Blob 对象、JSON 对象、JavaScript 文件以及表示 XML 文档的 Document 对象等。下面将针对不同的主体类型，进行相应的响应解码。

属性

在介绍响应解码之前，要先了解一下 XHR 对象的属性。一般地，如果接收的数据是字符串，使用 responseText 即可，这也是最常用的用于接收数据的属性。但如果获取了其他类型的数据，使用 responseText 可能就不太合适了。

responseText
该属性返回从服务器接收到的字符串，该属性只读。如果本次请求没有成功或者数据不完整，该属性就会等于 null。如果服务器返回的数据格式是 JSON、字符串、JavaScript或者XML，都可以使用 responseText 属性。

response
该属性只读，返回接收到的数据体。它的类型可以是 ArrayBuffer、Blob、Document、JSON对象、或者字符串，这由 XMLHttpRequest.responseType 属性的值决定。如果本次请求没有成功或者数据不完整，该属性就会等于 null。（IE 9 浏览器不支持）

responseType
该属性用来指定服务器返回数据（xhr.response）的类型。

• ""：字符串（默认值）
• "arraybuffer"：ArrayBuffer 对象
• "blob"：Blob 对象
• "document"：Document 对象
• "json"：JSON 对象
• "text"：字符串

responseXML
该属性返回从服务器接收到的 Document 对象，该属性为只读。如果本次请求没有成功，或者数据不完整，或者不能被解析为 XML 或 HTML，该属性等于 null。

overrideMimeType()
该方法用来指定服务器返回数据的 MIME 类型。该方法必须在 send() 之前调用。传统上，如果希望从服务器取回二进制数据，就要使用这个方法，人为将数据类型伪装成文本数据。但是，这种方法很麻烦，在 XMLHttpRequest 版本升级以后，一般采用指定 responseType 的方法。

字符串

如果服务器返回的结果是一个字符串，则直接使用 responseText 属性解析即可。
关于 ajax() 函数封装，已经在上一篇文章中详细介绍过，这里就不再赘述。 直接调用 ajax()。

<button>取得响应</button>
<div></div>

<script>
  btn.onclick = function () {
    ajax({
      url: './example.php',
      method: 'GET',
      timeout: 30000,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        // result 假设为 id 为 result 的节点
        result.innerHTML = res
      },
      fail: function (err) {
        console.log('request fail: ', err)
      }
    })
  }
</script>

<?php
    // 设置页面内容的 html 编码格式是 utf-8，内容是纯文本
    header("Content-Type: text/plain;charset=utf-8");    
    echo '你好，世界';
?>

JSON

使用 ajax 最常用的传输方式就是 JSON 字符串，直接使用 responseText 属性解析即可。

ajax({
  success: function (res) {
    const data = JSON.parse(res)
  }
})

JS

使用 ajax 也可以接收 js 文件。仍然使用 responseText 来接收数据，但要使用 eval() 来执行代码。

// 此处省略一万行代码
ajax({
  success: function (res) {
    eval(res)
  }
})