当前位置：首页 > article >正文

前端(Ajax)

article 2025/1/6 7:59:58

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

接收结果