前端(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

接收结果

相关推荐
程序员三千_11 分钟前
最近爆火的MCP到底是什么?
前端
古时的风筝24 分钟前
暴论:2025年,程序员必学技能就是MCP
前端·后端·mcp
古时的风筝25 分钟前
这编程圈子变化太快了,谁能告诉我 MCP 是什么
前端·后端·mcp
王月lydia29 分钟前
环境变量篇-vue3的H5项目从0到1工程化落地经验篇2
前端
赵要上天29 分钟前
利用TTP协议 ETag + 路由守卫 实现前端发版后通知用户更新得一个方案
前端
李剑一31 分钟前
写一个vitepress新建文章脚本,自动化创建链接,别再手写了!
前端·node.js·vitepress
火星思想32 分钟前
你来说说JavaScript作用域
javascript·ecmascript 6
火星思想32 分钟前
React如何实现时间切片
前端·react.js
小学生豆豆37 分钟前
eslint以及其扩展插件
前端
Electrolux43 分钟前
【前端bug】Safari的选区机制导致的前端@人组件的bug
前端