利用node.js搭建一个简易服务器,尝试使用 XMLHttpRequest 发送 请求
XMLHttpRequest 是一种使用 JavaScript 发送 HTTP 请求的原始方式,它允许您从浏览器中异步获取数据,而无需刷新页面。这使得您可以更快地响应用户的操作,并且可以动态更新内容,而无需重新加载整个页面。
搭建服务器:
在文件夹下面创建一个.js文件,我创建为index.js,用VsCode等编程工具打开后做基础的搭建:
//引入http
const http = require('http');
//http.createServer()创建一个web服务器
//req是请求功能的相关对象,res是响应功能的相关对象,有请求过来
//http.createServer()会返回一个server实例
const server = http.createServer((req,res) => {
const { pathname,query }= url.parse(req.url)
if(req.method === 'GET'){
res.setHeader('Content-Type','text/plain;charset=utf-8')
res.end('响应了GET请求')
}else if(req.method === 'POST'){
res.setHeader('Content-Type','text/plain;charset=utf-8')
res.end('响应了POST请求')
}
});
//通过server.listen()设置当前服务器应该监听哪个端口
server.listen(3000,()=>{
console.log('Server is coming');
})
在终端中进入index.js文件的目录下,运行index.js
网页结果:
在实际的网页效果中,除了http://localhost:3000/这个基地址,还有一些接口地址,比如http://localhost:3000/userInfo,/userInfo就是接口地址,所以判别的时候,就是判别后面的接口地址
node.js中专门提供了一个模块,用来进行url处理,
const url = require('url')
url具有一个parse的方法,可以对req.url做转换,req.url就是请求的地址
如果不希望接收所有的话,可以通过解构的方式来解构出其中的接口地址,
const {pathname}= url.parse(req.url)
设置当请求方式是‘GET’并且接口地址是‘/getinfo’的时候才能显示响应请求,不然就显示
Not Found,测试代码:
const http = require('http');
const url = require('url')
const server = http.createServer((req,res) => {
const {pathname}= url.parse(req.url)
if(req.method === 'GET'&&pathname === '/getinfo'){
res.setHeader('Content-Type','text/plain;charset=utf-8')
res.end('响应了GET请求,getinfo')
}else if(req.method === 'POST'){
res.setHeader('Content-Type','text/plain;charset=utf-8')
res.end('响应了POST请求')
}else{
res.statusCode = 404
res.end('Not found')
}
});
server.listen(3000,()=>{
console.log('Server is coming');
})
http://localhost:3000/getinfo结果:
为了尝试发送JSON对象,修改后端index.js,使得发送POST请求时,带有JSON对象
const http = require('http');
const url = require('url')
const server = http.createServer((req,res) => {
const { pathname}= url.parse(req.url)
res.setHeader('Access-Control-Allow-Origin',"*")
if(req.method === 'GET'){
res.setHeader('Content-Type','text/plain;charset=utf-8')
res.end('响应了GET请求')
}else if(req.method === 'POST'){
res.setHeader('Content-Type','application/json')
res.end('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}')
}else{
res.statusCode = 404
res.end('Not found')
}
});
server.listen(3000,()=>{
console.log('Server is coming');
})
我把脚本挂载到node上,开启鼠标监听,点击一次node就会使用 XMLHttpRequest
发送一次GET请求
start () {
this.node.on(cc.Node.EventType.MOUSE_UP, this.onMouseUp,this)
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
}
onMouseUp(){
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/');
xhr.onload = () => {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error(`Error: ${xhr.status}`);
}
};
xhr.send();
}
结果(灰色方块是node)点击八次响应了八次:
要发送一个POST请求并带有 JSON 请求体,使用键盘监听,键盘按一次就发送一次:
onKeyDown(){
if(cc.macro.KEY.a){
var xhr = new XMLHttpRequest();
var url = 'http://localhost:3000/';
xhr.open('POST', url);
xhr.onload = () => {
if (xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
console.log(json);
}else {
console.error(`Error: ${xhr.status}`);
}
};
var data = JSON.stringify({ key: "value" });
xhr.send(data);
}
}
结果: