526互联

七、设置请求头信息 jquery发送ajax请求和后端一起使用

发布时间 2023-11-06 19:47:42作者: sunny123456

七、设置请求头信息 jquery发送ajax请求和后端一起使用

1、预定义请求头设置：

在xhr.open()方法之后添加语句，进行请求头设置

  1.             //设置请求头
  2.             xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

请求报文分为：行、头、空行、体

其中Content-Type用以设置请求体内容类型；

后面的长串字符串是用来设置请求体内容类型的固定写法

在开发者工具中查看：

2、自定义请求头设置：

设置自定义的请求头

xhr.setRequestHeader('name','value');

F5运行，并打开开发者工具窗口；此时会报红，并且原有div没有展示服务端的响应体内容；这是因为自定义的请求头会触发浏览器的安全机制

 若是需要正常发送和接受，需要在服务端定义特殊的响应头

 设置响应头，能够接受所有类型的头信息

response.setHeader("Access-Control-Allow-Headers","*");

由于在真正的运行阶段，前端页面发送请求头信息之后，还需要验证自定义的请求头是否可用，会用到Options请求方法，因此需要将请求方法设置为all

  1. app.all('/server',(request,response) =>{
  2.     //设置响应头   设置允许跨域
  3.     response.setHeader("Access-Control-Allow-Origin","*");
  4.     //设置响应头    * 表示允许接受所有类型的头信息
  5.     response.setHeader("Access-Control-Allow-Headers","*");
  6.     //设置响应体
  7.     response.send("Hello Ajax-Post请求");
  8. })

关闭server.js的运行，并重新启动，打开前端页面文件并F5运行，鼠标悬浮div上，打开开发者工具，如下，即完成自定义请求头的创建

所有代码：

前端代码

  1. <!--Post请求  前端浏览器页面-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Ajax Post 请求</title>
  8.     <style>
  9.         #result{
  10.             width: 200px;
  11.             height: 100px;
  12.             border: solid 1px #903;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <!--鼠标悬浮于div上，向服务端发送请求，并将响应体显示到div中-->
  18.     <div id = "result"></div>
  19.     <script>
  20.         //获取元素对象
  21.         const result = document.getElementById('result');
  22.         //绑定鼠标悬浮事件
  23.         result.addEventListener('mouseover',function(){
  24.             //1、创建对象
  25.             const xhr = new XMLHttpRequest();
  26.             //2、初始化 设置请求类型和url
  27.             xhr.open("Post","http://127.0.0.1:8000/server");
  28.             //设置请求头
  29.             //Content-Type用来设置请求体内容类型
  30.             //后面长串用来设置请求体内容类型的固定写法
  31.             xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  32.             //自定义请求头设置
  33.             xhr.setRequestHeader('name','study');
  34.  
  35.             //3.发送   设置请求体
  36.             xhr.send("a=100&b=200&c=300");
  37.             //4.事件绑定
  38.             xhr.onreadystatechange = function(){
  39.                 if(xhr.readyState == 4){
  40.                     if(xhr.status >= 200 && xhr.status < 300){
  41.                         result.innerHTML=xhr.response;
  42.                     }
  43.                 }
  44.             }
  45.         });
  46.     </script>
  47. </body>
  48. </html>

服务端代码

  1. //1.引入express
  2. const express = require('express')
  3.  
  4. //2.创建引用对象
  5. const app = express();
  6.  
  7. //3.创建路由规则
  8. //request  是对请求报文封装
  9. //response 是对响应报文的封装
  10. //此处的'/server'代表若是连接server，则会进行对应的设置
  11. app.get('/server',(request,response) =>
  12. {
  13.     //设置响应头  设置允许跨域
  14.     response.setHeader('Access-Control-Allow-Origin','*');
  15.     //设置响应体
  16.     response.send("Hello Ajax");
  17. });
  18. app.all('/server',(request,response) =>{
  19.     //设置响应头   设置允许跨域
  20.     response.setHeader("Access-Control-Allow-Origin","*");
  21.     //设置响应头    * 表示允许接受所有类型的头信息
  22.     response.setHeader("Access-Control-Allow-Headers","*");
  23.     //设置响应体
  24.     response.send("Hello Ajax-Post请求");
  25. })
  26.  
  27. //4.监听端口启动服务
  28. app.listen(8000,()=>{
  29.     console.log("服务器已经启动，8000端口监听中......");
  30. });

个人学习记录，欢迎指点讨论

原文链接：https://blog.csdn.net/qq_43733614/article/details/131623157