AJAX请求服务端响应JSON数据

AJAX请求服务端响应JSON数据

在实际工作中向服务端发送请求，返回的结果绝大多数都是json格式的数据。

案例：
在窗口下按下键盘任意按键，便会向服务端发送一个请求，服务端返回结果在div中呈现。

前端页面

<style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #89b;
        }
</style>
<body>
    <div id="result"></div>
    <script>
        // 获取元素
        const result=document.getElementById('result');
        // 绑定键盘按下事件
        window.onkeydown=function(){
            // 发送请求
            const xhr= new XMLHttpRequest();
            // 设置响应体数据类型
            xhr.responseType='json';
            // 初始化
            xhr.open('GET','http://127.0.0.1:8000/json-server');
            // 发送
            xhr.send();
            // 事件绑定
            xhr.onreadystatechange=function(){
                // 判断状态
                if(xhr.readyState===4){
                    // 判断状态码
                    if( xhr.status>=200&&xhr.status<300){
                        // 检测请求是否能够发过去
                        console.log(xhr.response);
                        result.innerHTML=xhr.response;
                    }
                }
            }
        }
    </script>
</body>

服务端文件 server.js

// 引入express
const express=require('express');

// 创建应用对象
const app=express();

// json
app.all('/json-server',(request,response)=>{
    // 设置响应

    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');

    // 设置响应体
    response.send('HELLO AJAX JSON');
});

// 监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动...");
})

启动服务后，进入页面进行测试

由此得知确实是在

response.send('HELLO AJAX JSON');

得到响应

我们的实际目标是要相应一个数据，并非是得到响应体。

// 响应一个数据
// 我们利用响应体来得到一个data对象
const data={
    name:'zhanghan'
};
// data对象转换成字符串
let str=JSON.stringify(data);
// 响应体
response.send(str);

再此特别提醒，我们的data对象不能直接放到send()中去响应，因为send()所接收的是一个字符串，因此我们需要对data对象进行数据类型的转换。

由图可知，我们的得到的是一个JSON的字符串，为了提取里面的数据，我们通常有两种方法。
1.手动转化

    let data = JSON.parse(xhr.response);
    console.log(data);
    result.innerHTML=data.name;

结果：

2.自动转换

    // 设置响应体数据类型
    xhr.responseType='json';

    console.log(xhr.response);
    result.innerHTML=xhr.response.name;

结果：