在实际工作中，向服务端发送请求，服务端返回的结果大都是json格式的数据，
在窗口下面按下任意一个按键就会向服务端发送请求，服务端会返回结果，在div中显示
触发ajax实现局部刷新 资源不重新加载（页面没有刷新，前端页面触发ajax和服务器实现交互）
首先进行服务器端进行书写——实际上在我的浏览器版本中直接 send直接传递对象也是可以的
但在实际开发中需要传递json格式字符串较多
//1、导入express
const express=require('express')
//2、创建应用对象 创建web服务器
const app=express()
//3、创建路由规则
//监听客户端的GET请求和POST请求，并向客户端响应具体内容
//requset是对请求报文的封装
//response是对响应报文的封装
app.get('/server',function(requset,response){
//设置响应头 名称 值----设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('hello AJAX');
})
app.all('/server',function(requset,response){
//设置响应头 名称 值----设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');//所有请求头都支持 还是存在问题
//设置响应体
response.send('uuiiiii');
})
app.get('/json-server',function(requset,response){
//设置响应头 名称 值----设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应一个数据
const data={//对象
name:'张三'
};
//对对象SON.stringify 进行字符串转成json转换
let str=JSON.stringify(data);
//设置响应体
//目前服务器端传递的是对象 会自动转换为json
response.send(str);//send方法只能接收字符串和buffer 结果是json格式字符串
})
//4、监听端口 启动服务
//启动服务器.lisen(端口号，（启动成功职之后的回调函数）) 端口号是80可以省略
app.listen(8000,()=>{
console.log('8000启动成功')
})这里的重点是：传递对象给客户端
客户端组成
<style>
#result {
width: 200px;
height: 100px;
border: 1px black solid;
}
</style>
</head>
<body>
<div id="result"></div>原始的直接传递数据（4步骤走）
window.onkeydown = function() {
//4步走
const result = document.getElementById('result');
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8000/json-server');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status < 300 && xhr.status >= 200) {
//xhr.response服务端返回的响应体
result.innerHTML=xhr.response;
}
}
}
}接收到的内容是字符串 json格式
手动设置数据转换 json转对象JSON.parse(xhr.response);
window.onkeydown = function() {
//4步走
const result = document.getElementById('result');
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8000/json-server');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status < 300 && xhr.status >= 200) {
//xhr.response服务端返回的响应体
//手动对数据进行转换 将json格式字符串转换为对象
let data=JSON.parse(xhr.response);
result.innerHTML=data.name;
}
}
}
}
自动设置数据转换（ //自动转换——借助xhr对象上的属性responseType， xhr.responseType=’json’;） 相应的内容直接转化成为对象数据
//4步走
const result = document.getElementById('result');
const xhr = new XMLHttpRequest();
自动转换——借助xhr对象上的属性
//设置响应体数据的类型
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 < 300 && xhr.status >= 200) {
//自动转换——借助xhr对象上的属性
result.innerHTML=xhr.response.name;
}
}
}
}
版权声明：本文为weixin_47295886原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。