Back to the general list of articles
1. Create in testfour文件夹and in this folder
2. Create post.html文件
3. Createserver.js文件
This article uses the mouse to move to the box to automatically send the request to the server
Usually set the request header
// 设置请求头 参数1：请求头名字 参数2：为请求头2的值
// 设置请求体内容类型：Content-Type
// 参数查询字符串的类型：application.x-www-form-urlencoded
testone.setRequestHeader('Content-Type','application.x-www-form-urlencoded');
application.x-www-form-urlencodedThis parameter is generally done automatically internally, and we don’t need to remember it. The
purpose is to tell the server textone.send("参数");this 参数查询字符串的类型
case.
post.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax post 请求</title>
</head>
<body>
<!-- id为result的div -->
<div id="result" style="width: 200px;height: 100px;border: solid 1px #770088;">
鼠标经过向服务器发送post请求，并把结果返回，展示在本div内
</div>
<script>
// 获取元素
const btn = document.getElementsByTagName('result');
// 把获取到的响应体展示在div中
const result = document.getElementById("result");
// 2.绑定事件
// result.addEventListener('mouseover', function(){console.log('test');});
result.addEventListener('mouseover', function(){
// 0.测试打印
console.log('test');
// 1.创建对象
const textone = new XMLHttpRequest();
// 2.初始化，设置请求类型与URL
// 第一个参数为[请求类型]
// 第二个参数为[给那个url发送]
textone.open('POST','http://127.0.0.1:8000/server');
//
//
// 本章主要内容
//
// 设置请求头 参数1：请求头名字 参数2：为请求头2的值
// 设置请求体内容类型：Content-Type
// 参数查询字符串的类型：application.x-www-form-urlencoded
textone.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//
// 3.发送 POST参数
// 没有参数是直接——textone.send();
// 当有参数时，就直接写在这里面
textone.send("a=100&b=200&c=300");
// 格式2:textone.send("a:100&b:200&c:300")
// 任意格式都可以的 但前提是服务端 设置好了接收的处理的方式
//textone.send("新年的第一个红包使我送给你的");
// 4.事件绑定 处理服务端返回的结果
textone.onreadystatechange = function(){
// 判断 (服务端返回了所有的结果) 4
if(textone.readyState === 4){
// 再次判断——响应状态码
if(textone.status >= 200 && textone.status < 300){
// 处理服务端返回的结果
result.innerHTML = textone.response;
}else{
}
}
}
});
</script>
</body>
</html>
This is the server.js文件same as the previous chapter
// 1. 引入express
const express = require('express');
// 2.创建对象
const app = express();
// 3.创建路由规则 里面的形参 request与response (自己可以随便定义名字的)
// 建议写成 request与response 因为可以见名思意，方便自己看
// request 对请求报文的封装
// responst 对响应报文的封装
// 请求路径为'/server'
app.post('/server', (request, response)=>{
// 设置响应头 设置允许跨域
// 头名字为Access-Control-Allow-Origin
// 头的值为
response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
response.send('POST请求成功,路由设置为server,响应体为本段文字');
});
// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{
console.log("服务已经启动，8000端口监听中......");
});
Set the display of the request header in case one
Case 2: Set a custom request header
Was added textone.setRequestHeader('name','luichun');to the sections of the code
post.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax post 请求</title>
</head>
<body>
<!-- id为result的div -->
<div id="result" style="width: 200px;height: 100px;border: solid 1px #770088;">
鼠标经过向服务器发送post请求，并把结果返回，展示在本div内
</div>
<script>
// 获取元素
const btn = document.getElementsByTagName('result');
// 把获取到的响应体展示在div中
const result = document.getElementById("result");
// 2.绑定事件
// result.addEventListener('mouseover', function(){console.log('test');});
result.addEventListener('mouseover', function(){
// 0.测试打印
console.log('test');
// 1.创建对象
const textone = new XMLHttpRequest();
// 2.初始化，设置请求类型与URL
// 第一个参数为[请求类型]
// 第二个参数为[给那个url发送]
textone.open('POST','http://127.0.0.1:8000/server');
//
//
// 本章主要内
//
// 设置请求头 参数1：请求头名字 参数2：为请求头2的值
// 设置请求体内容类型：Content-Type
// 参数查询字符串的类型：application.x-www-form-urlencoded
textone.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 发送第二个请求头
//
// 自定义请求头 需要后端设置允许接收自定义
textone.setRequestHeader('name','luichun');
// 3.发送 POST参数
// 没有参数是直接——textone.send();
// 当有参数时，就直接写在这里面
textone.send("a=100&b=200&c=300");
// 格式2:textone.send("a:100&b:200&c:300")
// 任意格式都可以的 但前提是服务端 设置好了接收的处理的方式
// textone.send("新年的第一个红包使我送给你的");
// 4.事件绑定 处理服务端返回的结果
textone.onreadystatechange = function(){
// 判断 (服务端返回了所有的结果) 4
if(textone.readyState === 4){
// 再次判断——响应状态码
if(textone.status >= 200 && textone.status < 300){
// 处理服务端返回的结果
result.innerHTML = textone.response;
}else{
}
}
}
});
</script>
</body>
</html>
server.js文件Need to be modified to the following code. The
reason is
当使用post请求时候会因为发送的信息没有收到对应的结果所以回报错
所以该处使用all 表示可以接收任意类型的请求 如get post 等等
// 1. 引入express
const express = require('express');
// 2.创建对象
const app = express();
// 3.创建路由规则 里面的形参 request与response (自己可以随便定义名字的)
// 建议写成 request与response 因为可以见名思意，方便自己看
// request 对请求报文的封装
// responst 对响应报文的封装
// 请求路径为'/server'
// 当使用post请求时候会因为发送的信息没有收到对应的结果所以回报错
// 所以该处使用all 表示可以接收任意类型的请求 如get post 等等
app.all('/server', (request, response)=>{
// 设置响应头 设置允许跨域
// 头名字为Access-Control-Allow-Origin
// 头的值为
response.setHeader('Access-Control-Allow-Origin','*');
// 响应头 *号表示所有的头信息都可以接收
response.setHeader('Access-Control-Allow-Headers','*');
// 设置响应体
response.send('POST请求成功,路由设置为server,响应体为本段文字');
});
// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{
console.log("服务已经启动，8000端口监听中......");
});