當前位置：首頁 > IT技術 > Web編程 > 正文

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

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

屬性

responseText

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

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

response

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

responseType

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

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

responseXML

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

字符串

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

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

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來接收數(shù)據(jù)，但要使用eval()來執(zhí)行代碼

前端示例

  1. 在dist目錄下建一個test.js文件，內容如下：
function foo() {
  console.log('hello world')
}
  1. 發(fā)送請求
btn.onclick = function() {
  AJAX({
    url: '/test.js',
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    },
    callback: function(ret) {
      eval(ret)
      foo()
    }
  })
}

結果

XML

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

前端示例

  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>

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

  2. 發(fā)送請求

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

結果

blob

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

使用AJAX接收blob數(shù)據(jù)，需要使用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. 發(fā)送請求

<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() {
// 說明：圖片呈現(xiàn)到頁面后，執(zhí)行revoke，其他引用這個blob url的地方就無效了
        URL.revokeObjectURL(img.src);
      }
      img.src = URL.createObjectURL(ret)
      if(!result.innerHTML){
        result.appendChild(img);
      }
    }
  })
}
</script>

結果

arraybuffer

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

前端示例

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

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

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

  4. 發(fā)生請求

<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()構造函數(shù)的參數(shù)傳遞，生成blob對象
      img.src = URL.createObjectURL(new Blob([ret]))
      if(!result.innerHTML){
        result.appendChild(img);
      }
    }
  })
}
</script>

結果

本文摘自 ：https://www.cnblogs.com/

開通會員，享受整站包年服務立即開通 >
推薦內容