JS之AJAX-響應解碼
2021-09-29 14:50:01

通過AJAX接收到的響應主體類型可以是多種形式的，包括字符串String、ArrayBuffer對象、二進制Blob對象、JSON對象、JavaScirpt文件及表示XML文檔的Document對象等。下面將針對不同的主體類型，進行相應的響應解碼

屬性

responseText

responseText屬性返回從服務器接收到的字符串，如果請求不成功或者數據不完整，則返回null。該屬性只讀

如果服務器返回的數據格式是JSON、字符串、JavaScript都可以使用responseText屬性

response

response屬性返回從服務器接收到的數據體，它的類型可以是ArrayBuffer、Blob、Document、JSON對象、或者一個字符串，具體類型由responseType屬性的值決定。如果請求不成功或者數據不完整，則返回null。該屬性只讀

responseType

responseType屬性用于指定服務器返回數據的類型(response類型)，取值如下

''：             字符串(默認值)
'arraybuffer'：  ArrayBuffer對象
'blob'：         Blob對象
'document'：     Document對象
'json'：         JSON對象
'text'：         字符串

responseXML

responseXML屬性返回從服務器接收到的Document對象，如果本次請求沒有成功或者數據不完整，或者不能被解析為XML或HTML，該屬性等于null。該屬性只讀

字符串

如果服務器返回的結果是一個字符串，直接使用responseText屬性解析即可

接下來的所有示例會用到前文封裝的AJAX函數

function AJAX(obj) {
  var method = obj.method || 'GET',
    headers = obj.headers || {},
    data = obj.data || {},
    url = obj.url || '';
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
      if((xhr.status >= 200 && xhr.readyState < 300) || xhr.status == 304) {
        obj.callback && obj.callback(xhr.responseText)
      }
    }
  }
  if((obj.method).toUpperCase() == 'GET') {
    // 編碼
    for(var key in data) {
      url += (url.indexOf("?") == -1 ? "?" : "&");
      url += encodeURIComponent(key) + "=" + encodeURIComponent(data[key]);
    }
    // url += '&' + Date.now(); // 隨機時間戳，防止請求緩存
  }
  xhr.open(method, url, true);
  // 設置header
  for(var header in headers) {
    xhr.setRequestHeader(header, headers[header]);
  }
  if((obj.method).toUpperCase() == 'GET') {
    xhr.send(null);
  }else{
    xhr.send(JSON.stringify(data));
  }
}

前端示例

<button id="btn">按鈕</button>
<script>
btn.onclick = function() {
  AJAX({
    url: '/api/test',
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    },
    callback: function(ret) {
      console.log(ret)
    }
  })
}
</script>

后端示例

const fs = require('fs');
const path = require('path');
const express = require('express');
const app = express();
app.use(express.static(path.resolve(__dirname, './dist')))

app.get('/api/test', function(req, res) {
  res.send('hello world')
})

app.get('*', function(req, res) {
  const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf-8')
  res.send(html)
})
app.listen(3030);

結果

JSON

如果服務器返回的結果是一個JSON字符串，同樣可以使用responseText屬性解析

前端示例

btn.onclick = function() {
  AJAX({
    url: '/api/test',
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    },
    callback: function(ret) {
      console.log(JSON.parse(ret))
    }
  })
}

后端示例

app.get('/api/test', function(req, res) {
  res.send({
    name: 'wmui',
    age: 18
  })
})

結果

JS文件

如果服務器返回了JS文件，仍然是使用responseText來接收數據，但要使用eval()來執行代碼

前端示例

1. 在dist目錄下建一個test.js文件，內容如下：

function foo() {
  console.log('hello world')
}

2. 發送請求

btn.onclick = function() {
  AJAX({
    url: '/test.js',
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    },
    callback: function(ret) {
      eval(ret)
      foo()
    }
  })
}

結果

XML

XML在JSON出現之前，是網絡上常用的數據傳輸格式，但由于其格式較笨重，所以用的較少。接收XML文檔時，使用responseXML來對數據進行解析

前端示例

1. 在dist目錄下建一個test.xml文件，內容如下：

<CATALOG data-livestyle-extension="available">
<CD>
  <TITLE>JS</TITLE>
  <DES>腳本語言</DES>
</CD>
<CD>
  <TITLE>CSS</TITLE>
  <DES>層疊樣式表</DES>
</CD>
<CD>
  <TITLE>HTML</TITLE>
  <DES>超文本標記語言</DES>
</CD>
</CATALOG>

2. 把AJAX函數中的obj.callback && obj.callback(xhr.responseText)改成obj.callback && obj.callback(xhr.responseXML)

3. 發送請求

btn.onclick = function() {
  AJAX({
    url: '/test.xml',
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    },
    callback: function(ret) {
      console.log(ret)
    }
  })
}

結果

blob

在JavaScript中，Blob通常表示二進制數據。在實際Web應用中，Blob更多是圖片二進制形式的上傳與下載

使用AJAX接收blob數據，需要使用response來接收，并且將responseType設置為'blob'

前端示例

1. 在dist目錄下放置一張圖片，比如t.png

2. 修改AJAX方法，把obj.callback && obj.callback(xhr.responseText)改成obj.callback && obj.callback(xhr.response)

3. 在open()方法后面設置xhr.responseType = 'blob';

4. 發送請求

<div id="result"></div>
<button id="btn">按鈕</button>
<script>
btn.onclick = function() {
  AJAX({
    url: '/t.png',
    method: 'GET',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    callback: function(ret) {
      var img = document.createElement('img');
      img.onload = function() {
// 說明：圖片呈現到頁面后，執行revoke，其他引用這個blob url的地方就無效了
        URL.revokeObjectURL(img.src);
      }
      img.src = URL.createObjectURL(ret)
      if(!result.innerHTML){
        result.appendChild(img);
      }
    }
  })
}
</script>

結果

arraybuffer

arraybuffer代表儲存二進制數據的一段內存，通過ajax接收到的arraybuffer，需要先將其轉換為blob數據，然后才能進行操作

前端示例

1. 在dist目錄下放置一張圖片，比如t.png

2. 修改AJAX方法，把obj.callback && obj.callback(xhr.responseText)改成obj.callback && obj.callback(xhr.response)

3. 在open()方法后面設置xhr.responseType = 'arraybuffer';

4. 發生請求

<div id="result"></div>
<button id="btn">按鈕</button>
<script>
btn.onclick = function() {
  AJAX({
    url: '/t.png',
    method: 'GET',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    callback: function(ret) {
      var img = document.createElement('img');
      img.onload = function() {
        URL.revokeObjectURL(img.src);
      }
      // 將ret作為new Blob()構造函數的參數傳遞，生成blob對象
      img.src = URL.createObjectURL(new Blob([ret]))
      if(!result.innerHTML){
        result.appendChild(img);
      }
    }
  })
}
</script>

結果