1.客户端请求
向https://jsonplaceholder.typicode.com/users发送get请求
const xhr = new XMLHttpRequest();
console.log(xhr.readyState);
xhr.open('get', 'https://jsonplaceholder.typicode.com/users')
console.log(xhr.readyState);
xhr.send();
console.log(xhr.readyState);
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
console.log('状态码', xhr.status); // 状态码
console.log('状态字符串', xhr.statusText); // 状态字符串
console.log('所有响应头', xhr.getAllResponseHeaders()) // 所有响应头
console.log('响应体', xhr.response) // 响应体
}
}
} 请求结果
2.自定义服务器步骤
1.下载node(Node.js --- 在任何地方运行 JavaScript)
2.配置node环境变量(win+r:cmd:可以检测node是否安装成功)
3.在项目目录下下载express执行npm i express命令
准备服务端脚本
let express=require("express");
let app=express()
app.get("/",(req,res)=>{
})
app.listen(9545,()=>{
console.log("9545端口已经启动***")
})
服务端启动命令
nodemon Server.js脚本名称
启动成功截图
3.客户端和服务端互相转数据
get类型
客户端->服务端
客户端转入name="李四"服务端调用req.query进行客户端数据查看
服务端->客户端
需要解决跨域问题
res.setHeader('Access-Control-Allow-Origin', '*'); // 或者指定特定的域名
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
客户端获取响应数据
let xhr=new XMLHttpRequest ();
xhr.open("get","http://localhost:9545")
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
console.log(xhr.response);
}
}
post类型
客户端->服务端
发送json格式数据
服务端接收json数据需要进行处理
const bodyParser = require('body-parser');
// 配置 body-parser
// 使用 body-parser 中间件解析请求体
app.use(bodyParser.urlencoded({ extended: true })); // 解析 application/x-www-form-urlencoded
app.use(bodyParser.json()); // 解析 application/json
接收结果