1.testfour文件夹このフォルダ内に
作成します2.作成しますpost.html文件
3.作成しますserver.js文件
この記事では、マウスを使用してボックスに移動し、サーバーにリクエストを自動的に送信します
通常、リクエストヘッダーを設定します
// 设置请求头 参数1：请求头名字 参数2：为请求头2的值
// 设置请求体内容类型：Content-Type
// 参数查询字符串的类型：application.x-www-form-urlencoded
testone.setRequestHeader('Content-Type','application.x-www-form-urlencoded');
application.x-www-form-urlencodedこのパラメータは通常、内部で自動的に実行されるため、覚えておく必要はありません。
目的は、サーバーにtextone.send("参数");この参数查询字符串的类型
場合を通知することです。
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>
これはserver.js文件前の章と同じです
// 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端口监听中......");
});
ケース1の場合のリクエストヘッダーの表示を設定します
ケース2：カスタムリクエストヘッダーを設定する
textone.setRequestHeader('name','luichun');コードのセクションに追加されました
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文件次のコードに変更する必要があります。
理由は
当使用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端口监听中......");
});