當(dāng)前位置：首頁(yè) > IT技術(shù) > Web編程 > 正文

JS之AJAX-響應(yīng)解碼
2021-09-29 14:50:01

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

屬性

responseText

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

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

response

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

responseType

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

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

responseXML

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

字符串

如果服務(wù)器返回的結(jié)果是一個(gè)字符串，直接使用responseText屬性解析即可

接下來(lái)的所有示例會(huì)用到前文封裝的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(); // 隨機(jī)時(shí)間戳，防止請(qǐng)求緩存
  }
  xhr.open(method, url, true);
  // 設(shè)置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);

結(jié)果

JSON

如果服務(wù)器返回的結(jié)果是一個(gè)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
  })
})

結(jié)果

JS文件

如果服務(wù)器返回了JS文件，仍然是使用responseText來(lái)接收數(shù)據(jù)，但要使用eval()來(lái)執(zhí)行代碼

前端示例

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

結(jié)果

XML

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

前端示例

  1. 在dist目錄下建一個(gè)test.xml文件，內(nèi)容如下：
<CATALOG data-livestyle-extension="available">
<CD>
  <TITLE>JS</TITLE>
  <DES>腳本語(yǔ)言</DES>
</CD>
<CD>
  <TITLE>CSS</TITLE>
  <DES>層疊樣式表</DES>
</CD>
<CD>
  <TITLE>HTML</TITLE>
  <DES>超文本標(biāo)記語(yǔ)言</DES>
</CD>
</CATALOG>

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

  2. 發(fā)送請(qǐng)求

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

結(jié)果

blob

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

使用AJAX接收blob數(shù)據(jù)，需要使用response來(lái)接收，并且將responseType設(shè)置為'blob'

前端示例

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

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

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

  4. 發(fā)送請(qǐng)求

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

結(jié)果

arraybuffer

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

前端示例

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

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

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

  4. 發(fā)生請(qǐng)求

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

結(jié)果

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

開(kāi)通會(huì)員，享受整站包年服務(wù)立即開(kāi)通 >
推薦內(nèi)容