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

接收结果

相关推荐
Yvonne爱编码1 分钟前
简述ajax、node.js、webpack、git
前端·git·ajax·webpack·node.js·visual studio
周小码2 分钟前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d
哆啦A梦15886 分钟前
Element-Plus
前端·vue.js·ts
IT_陈寒12 分钟前
🔥3分钟掌握JavaScript性能优化:从V8引擎原理到5个实战提速技巧
前端·人工智能·后端
前端小巷子35 分钟前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia1 小时前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.1 小时前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
Mintopia1 小时前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
charlie1145141911 小时前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
很多石头1 小时前
前端img与background-image渲染图片对H5页面性能的影响
前端·css