一、设置请求体

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>TestAjax</title>
  6.     <style>
  7.         #result{
  8.             width: 200px;
  9.             height: 100px;
  10.             border: solid 1px #2a5caa;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div id="result"></div>
  16.     <script>
  17.         const result = document.getElementById('result');
  18.         result.addEventListener("mouseover",function (){
  19.             const xhr = new XMLHttpRequest();
  20.             xhr.open('POST','http://localhost:8000/server');
  21.             xhr.send();
  22.             xhr.onreadystatechange = function (){
  23.                 if (xhr.readyState === 4){
  24.                     if (xhr.status >= 200 && xhr.status < 300){
  25.                         result.innerHTML = xhr.response;
  26.                     }
  27.                 }
  28.             }
  29.         });
  30.     </script>
  31. </body>
  32. </html>
  1. // 1.引入express
  2. const express = require('express')
  4. // 2.创建应用对象
  5. const app = express()
  7. // 3.创建路由规则
  8. // 获取get请求
  9. app.get('/server', (request,response) =>{
  10.     // 设置响应头
  11.     response.setHeader('Access-Control-Allow-Origin','*') // 设置允许跨域
  13.     // 设置响应体
  14.     response.send('获取get请求')
  15. });
  17. // 获取post请求
  18. app.post('/server', (request,response) =>{
  19.     // 设置响应头
  20.     response.setHeader('Access-Control-Allow-Origin','*') // 设置允许跨域
  22.     // 设置响应体
  23.     response.send('获取post请求')
  24. });
  26. // 4.监听端口，启动服务
  27. app.listen(8000,()=>{
  28.     console.log("服务已启动");
  29. });

说明：发送get请求需要app.get，发送需要app.post。
POST传递参数
xhr.send(‘a=100&b=200’);
xhr.send(‘a:100&b:200’);

二、设置请求头信息

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>TestAjax</title>
  6.     <style>
  7.         #result{
  8.             width: 200px;
  9.             height: 100px;
  10.             border: solid 1px #2a5caa;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div id="result"></div>
  17.     <script>
  18.         const result = document.getElementById('result');
  19.         result.addEventListener("mouseover",function (){
  20.             const xhr = new XMLHttpRequest();
  21.             xhr.open('POST','http://localhost:8000/server');
  22.             // 设置请求头 名字 值
  23.             xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  24.             xhr.setRequestHeader('name','mx');
  25.             xhr.send();
  26.             xhr.onreadystatechange = function (){
  27.                 if (xhr.readyState === 4){
  28.                     if (xhr.status >= 200 && xhr.status < 300){
  29.                         result.innerHTML = xhr.response;
  30.                     }
  31.                 }
  32.             }
  33.         });
  34.     </script>
  35. </body>
  36. </html>

请求头信息可以自定义，但是需要设置Access-Control-Allow-Headers

  1. // 1.引入express
  2. const express = require('express')
  4. // 2.创建应用对象
  5. const app = express()
  7. // 3.创建路由规则
  8. app.get('/server', (request,response) =>{
  9.     // 设置响应头
  10.     response.setHeader('Access-Control-Allow-Origin','*') // 设置允许跨域
  12.     // 设置响应体
  13.     response.send('获取get请求')
  14. });
  16. app.post('/server', (request,response) =>{
  17.     // 设置响应头
  18.     response.setHeader('Access-Control-Allow-Origin','*') // 设置允许跨域
  19.     //
  20.     response.setHeader('Access-Control-Allow-Headers','*') // 设置所有请求头都可以允许书写
  21.     // 设置响应体
  22.     response.send('获取post请求')
  23. });
  25. // 4.监听端口，启动服务
  26. app.listen(8000,()=>{
  27.     console.log("服务已启动");
  28. });

若此时还有报错，说明请求没有完全发送，可以用app.all尝试

  1. // 1.引入express
  2. const express = require('express')
  4. // 2.创建应用对象
  5. const app = express()
  7. // 3.创建路由规则
  8. app.get('/server', (request,response) =>{
  9.     // 设置响应头
  10.     response.setHeader('Access-Control-Allow-Origin','*') // 设置允许跨域
  12.     // 设置响应体
  13.     response.send('获取get请求')
  14. });
  16. app.post('/server', (request,response) =>{
  17.     // 设置响应头
  18.     response.setHeader('Access-Control-Allow-Origin','*') // 设置允许跨域
  19.     //
  20.     response.setHeader('Access-Control-Allow-Headers','*') // 设置所有请求头都可以允许书写
  21.     // 设置响应体
  22.     response.send('获取post请求')
  23. });
  25. app.all('/server', (request,response) =>{
  26.     // 设置响应头
  27.     response.setHeader('Access-Control-Allow-Origin','*') // 设置允许跨域
  28.     //
  29.     response.setHeader('Access-Control-Allow-Headers','*') // 设置所有请求头都可以允许书写
  30.     // 设置响应体
  31.     response.send('获取所有请求')
  32. });
  34. // 4.监听端口，启动服务
  35. app.listen(8000,()=>{
  36.     console.log("服务已启动");
  37. });