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

接收结果

相关推荐
careybobo1 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)1 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之2 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端2 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡2 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木3 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!4 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷4 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
还是鼠鼠5 小时前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
自动花钱机5 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5