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;
结果: