<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON 响应</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
const result = document.getElementById('result');
// 绑定键盘按下事件
window.onkeydown = function (){
// 发送请求
// 1、创建对象
const xhr = new XMLHttpRequest();
// 设置响应体数据的类型
xhr.responseType = 'json';
// 2、初始化 设置URL
xhr.open('GET', 'http://127.0.0.1:8000/json-server');
// 3、发送
xhr.send();
// 4、事件绑定
xhr.onreadystatechange = function (){
if (xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status <300){
// console.log(xhr.response);
// result.innerHTML = xhr.response;
// 1.手动对数据转化
// let data = JSON.parse(xhr.response);
// console.log(data);
// result.innerHTML = data.name;
// 2.自动转换 (设置响应体数据的类型)
console.log(xhr.response);
result.innerHTML = xhr.response.name;
}
}
}
}
</script>
</body>
</html>
app.all('/json-server', (express, response)=>{
// app.post('/server', (express, response)=>{
// 设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 响应头(设置自定义响应头的时候 与 上面app.all同时用)
// response.setHeader('Access-Control-Allow-Headers', '*');
const data = {
name: 'djy--JSON'
};
// 对对象进行字符串转换
let str = JSON.stringify(data);
// 设置响应体
response.send(str);
});