前端(Ajax)

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

接收结果