8.服务器端响应JSON数据

在实际应用中，我们向服务端发送请求，服务端返回的大都是 JSON 格式的数据

所以我们要知道这个结果我们怎么处理

先去处理 express 文件，返回 JSON 格式的数据

const express = require('express')

const app = express()

app.all('/json-server', (request, response) => {
  response.setHeader('Access-Control-Allow-Origin', '*')
  response.setHeader('Access-Control-Allow-Headers', '*')
  // 设置响应体，返回JSON格式字符串
  const data = {
    name: 'yujiabao'
  }
  let str = JSON.stringify(data)
  response.send(str)
})

app.listen(8000, () => {
  console.log('服务已经启动，端口号是8000....');
})

接着去处理这个数据，有两种方式，一种是手动转化，还有一种是自动转化

• 手动转化是通过 JSON.parse 去转化 JSON格式的数据

• 自动转化是借助xhr对象上的responseType属性

    const result = document.querySelector("#result");
    result.addEventListener("mouseover", () => {
      const xhr = new XMLHttpRequest();
      // 2.自动转化
      // 设置响应体数据类型
      xhr.responseType = 'json'
      xhr.open("POST", "http://127.0.0.1:8000/json-server");
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            // // 1.手动对数据转化
            // let data = JSON.parse(xhr.response)
            // result.innerHTML = data.name

            // 2.自动转化
            result.innerHTML = xhr.response.name
          }
        }
      };
    });