ajax中設定請求頭和自定義請求頭

2021春節晚會發表於2020-12-31

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埠監聽中......");
});

案例一的設定請求頭的顯示
在這裡插入圖片描述

案例二設定自定義請求頭

新增的為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埠監聽中......");
});

ajax中POST請求與引數(請求體)設定
2020-12-31
自定義的請求頭，你去哪裡了？
2018-09-11
TCP 請求頭
2018-06-04
TCP
有趣的請求引數/請求頭
2020-08-05
HTTP請求頭和響應頭詳解
2020-10-14
HTTP
ASP.NET Core - 實現Http自定義請求頭策略
2020-08-10
ASP.NETHTTP
HTTP請求頭與響應頭
2018-05-27
HTTP
ajax請求
2019-02-26
python爬蟲請求頭
2020-10-06
Python爬蟲
Python中get、post請求詳解(HTTP請求頭、狀態碼)
2020-03-09
PythonHTTP
Jmeter —— jmeter設定HTTP資訊頭管理器模擬請求頭
2024-03-14
JMeterHTTP
phpstudy中apache設定跨域(頭部請求模組開啟)
2018-11-29
PHPApache跨域
ajax請求 juery
2020-04-06
請求協議中的content-type頭
2024-11-12
協議
http請求頭與響應頭的應用
2018-09-10
HTTP
原生ajax請求&JSONP
2019-01-07
JSON
HTTP常用請求頭大揭祕
2021-02-25
HTTP
HTTP 請求頭部欄位中 connection - keep-alive 的含義
2022-10-15
HTTPKeep-Alive
SAP UI5 OData 請求的自定義 HTTP header 設定方法
2022-10-03
UIHTTPHeader
http請求頭個欄位解釋
2018-07-17
HTTP
利用Referer請求頭防止“盜鏈”-Javaweb
2020-11-01
JavaWeb
java webservice 帶請求頭方式處理
2024-09-06
JavaWeb
SpringMVC中如何傳送GET請求、POST請求、PUT請求、DELETE請求。
2020-05-13
SpringMVCdelete
封裝ajax、axios請求
2019-01-23
封裝iOS
springmvc處理ajax請求
2024-06-26
SpringMVC
封裝 Laravel 自定義表單請求
2022-07-15
封裝Laravel
SpringMVC處理請求頭、響應頭、編碼行為
2024-08-17
SpringMVC
vue2.0 axios post請求傳參問題（ajax請求）
2018-07-24
VueiOS
jQuery的AJAX請求中contentType和dataType的區別
2020-11-12
jQuery
HTTP請求頭的Content-Type欄位
2019-10-05
HTTP
使用Python獲取HTTP請求頭資料
2024-06-17
PythonHTTP
MDN新增“HTTP有條件請求”標頭
2022-03-29
HTTP
Nginx轉發導致請求頭丟失
2022-05-31
Nginx
JAVA設定http請求代理
2024-08-06
JavaHTTP
關於常用的http請求頭以及響應頭詳解
2018-12-21
HTTP
如何傳送請求以及AJAX
2018-07-09
Ajax請求後臺資料
2018-06-10
ajax請求servlet返回資料
2020-10-28
Servlet

ajax中設定請求頭和自定義請求頭

案例二 設定自定義請求頭

相關文章

案例二設定自定義請求頭