目录
- 一、GET or POST请求
- 1、进入Node.js官网下载Node
- 2、在工程项目的根目录下安装express
- 3、新建一个server.js文件
- 4、新建一个html文件
- 二、All请求和更改请求头信息
- 1、新建server.js文件
- 2、新建html文件
- 总结
一、GET or POST请求
1、进入Node.js官网下载Node
2、在工程项目的根目录下安装express
使用vscode,在项目工程的空白区右击,选择"在集成终端打开",或者使用Ctrl + ~。然后输入以下npm命令安装
npm i express
3、新建一个server.js文件
文件作用:创建服务器,对发出的请求给出响应。
// 1、获取express
const express = require('express');
// 2、创建express实例
const app = express();
// 3、GET请求
app.get('/server', (req, res) => {
/*
req:requset ---> 请求
res:response ---> 响应
*/
// 1、设置响应头信息
// Access-Control-Allow-Origin:访问控制源
// "*":表示允许跨域
res.setHeader('Access-Control-Allow-Origin', '*');
// 2、发送响应信息
res.send('Hello AJAX');
});
// POST请求
/*
app.post('/server', (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.send('Hello AJAX');
});
*/
// 4、设置服务器端口,以及状态监听
app.listen(8000, ()=>{
console.log('8000端口监听中...')
})
注:启动服务时,打开当前文件目录的终端,输入:node server.js
方法一:可以先找到包含server.js的文件夹,右键打开终端。
方法二:使用Ctrl + ~ 调出vscode的终端,cd AJAX/GET请求(cd后面的是路径,指定到server.js的根目录),回车后再输入:node server.js
4、新建一个html文件
文件作用:用于向服务器发送AJAX请求
<body>
<!-- 用于发送AJAX请求,显示响应内容 -->
<div id="result" style="width: 200px; height: 100px; border: solid 1px #bfa;"></div>
<script>
// 1、获取div节点
var result = document.getElementById('result');
// 2、对div节点进行事件监听,当鼠标移动到div区域的时候发送AJAX请求
result.onmouseover = function () {
// 3、创建AJAX请求实例
const xhr = new XMLHttpRequest();
// 4、设置初始化请求。(数据的发送可以使用变量,这里只是做示范)
// GET发送数据,在?后面接数据
// 启动服务器后可以直接在地址栏输入:http://127.0.0.1:8000/server或者http://localhost:8000/server来访问
// xhr.open('GET', "http://127.0.0.1:8000/server?a=100&b=200&c=300" )
xhr.open('POST', "http://127.0.0.1:8000/server")
// 5、发送请求
// POST可以这样发送数据
xhr.send(JSON.stringify({name:'张三', age:19, sex:'男'}))
// 6、事件绑定处理服务端返回的结构
xhr.onreadystatechange = function () {
/*
* readystate是xhr对象中的属性,表示状态 0 1 2 3 4
* 0:表示未初始化
* 1:表示open方法调用完毕
* 2:表示send方法调用完毕
* 3:表示服务端返回了部分的结果
* 4:表示服务端返回了全部的结果
*/
if (xhr.readyState === 4) {
// 这里是判断状态码,一般大于等于200小于300的状态码都算正常。
if (xhr.status >= 200 && xhr.status < 300){
// 7、设置div的内容文本为AJAX获取的响应内容
result.innerHTML = xhr.response
}else{
// 反之输出状态码
result.innerHTML = xhr.status
}
}
}
}
</script>
</body>
二、All请求和更改请求头信息
与上面的步骤一样,这里就不在冗余阐述了
1、新建server.js文件
// 1、获取express
const express = require('express');
// 创建express实例
const app = express();
// 3、所有请求
app.all('/server', (req, res) => {
// 跨域允许
res.setHeader('Access-Control-Allow-Origin', '*')
// 任何头信息
res.setHeader('Access-Control-Allow-Headers', '*')
res.send('Hello World')
})
app.listen(8000, () => {
console.log('服务已经启动,8000端口监听中...')
})
2、新建html文件
<body>
<div id="result" style="width: 200px; height: 100px; border: solid 1px #bfa;"></div>
<script>
var result = document.getElementById('result');
result.onmouseover = function () {
// 1、创建实例
const xhr = new XMLHttpRequest();
// 2、设置初始化请求
xhr.open('POST', "http://127.0.0.1:8000/server")
// 设置请求头
/*
application/x-www-form-urlencoded: 窗体数据被编码为键值对,这是标准的编码格式。
multipart/form-data: 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分。
text/plain: 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符。
*/
// 参数一:设置请求头类型。 参数二:设置编码格式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 因为我们设置了接收任何头信息,所以这里可以自定义,一般使用自定义来确认用户,对接后端。
xhr.setRequestHeader('test','123456')
// 3、发送请求
let obj = {name:'张三', sex:'男', age:'19'}
xhr.send(JSON.stringify(obj));
// 4、判断请求
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300){
result.innerHTML = xhr.response
}else{
result.innerHTML = xhr.status
}
}
}
}
</script>
</body>
程序运行后,我们可以在控制台的Network中查看server文件的各种信息。
或者选择XHR,只捕获AJAX
总结
- 创建服务器
// 方法一(使用express框架):
const express = require('express')
const app = express();
// 方法二(使用Node.js):
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(5000, '127.0.0.1');
console.log('Server Running at http://127.0.0.1:5000/')
- 启动服务器
node server.js
server.js是文件,可以自命名,但需要在文件的根目录下使用命令启动
- 发送AJAX请求,获取响应体
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8000/server');
// xhr.open('POST', 'http://127.0.0.1:8000/server');
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
let content = xhr.response
}
}
}
- 自定义头信息。
// 任何请求,这里的参数一是地址路径,与xhr.open的第二个参数相对应
app.all('/server', (req, res) => {
// 跨域允许
res.setHeader('Access-Control-Allow-Origin', '*')
// 任何头信息
res.setHeader('Access-Control-Allow-Headers', '*')
res.send('Hello World')
})