ajax中设置请求头和自定义请求头
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文件
<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>
<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端口监听中......");
});
案例一的设置请求头的显示
案例二 设置自定义请求头
添加的为textone.setRequestHeader('name','luichun');该段代码
post.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>
<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端口监听中......");
});