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
http請求頭
2011-12-06
HTTP
有趣的請求引數/請求頭
2020-08-05
AFNetworking的請求頭設定(token)
2016-11-25
HTTP請求頭和響應頭詳解
2020-10-14
HTTP
ASP.NET Core - 實現Http自定義請求頭策略
2020-08-10
ASP.NETHTTP
HTTP請求頭與響應頭
2018-05-27
HTTP
Jmeter —— jmeter設定HTTP資訊頭管理器模擬請求頭
2024-03-14
JMeterHTTP
ajax請求
2019-02-26
ruby進行http請求頭設定及獲取
2013-10-09
HTTP
HTTP請求頭中的refer欄位
2017-08-25
HTTP
HTTP 請求頭中的 X-Forwarded-For
2015-12-14
HTTPForward
Python中get、post請求詳解(HTTP請求頭、狀態碼)
2020-03-09
PythonHTTP
phpstudy中apache設定跨域(頭部請求模組開啟)
2018-11-29
PHPApache跨域
python爬蟲請求頭
2020-10-06
Python爬蟲
ajax請求 juery
2020-04-06
Http 請求頭中的 Proxy-Connection
2015-12-14
HTTP
http請求頭與響應頭的應用
2018-09-10
HTTP
【web】Spring RestTemplate提交時設定http header請求頭
2018-01-08
WebSpringRESTHTTPHeader
HTTP常用請求頭大揭祕
2021-02-25
HTTP
網頁請求（Ajax）
2018-02-02
網頁
AJAX 非同步請求
2018-02-26
非同步
自定義處理頁面請求
2005-04-21
http請求頭個欄位解釋
2018-07-17
HTTP
利用Referer請求頭防止“盜鏈”-Javaweb
2020-11-01
JavaWeb
如何用PHP取得所有HTTP請求頭
2010-01-18
PHPHTTP
SpringMVC中如何傳送GET請求、POST請求、PUT請求、DELETE請求。
2020-05-13
SpringMVCdelete
Servlet中請求重定向和請求轉發和include
2016-05-22
Servlet
angular學習筆記(二十四)-$http(2)-設定http請求頭
2014-07-30
Angular筆記HTTP
跨域ajax請求，伺服器會收到請求嗎？
2017-09-26
跨域伺服器
原生ajax請求&JSONP
2019-01-07
JSON
wordpress 處理 ajax 請求
2017-11-08
AJAX 跨源 HTTP 請求
2014-04-30
HTTP
jquery ajax 跨域請求
2012-12-18
jQuery跨域
防止ajax請求重發
2015-11-28
封裝 Laravel 自定義表單請求
2022-07-15
封裝Laravel

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

案例二 設定自定義請求頭

相關文章

案例二設定自定義請求頭