【Ajax】Ajax 请求头信息

a9c93f2300

已于 2022-12-29 15:13:45 修改

阅读量428

点赞数

分类专栏：网络应用文章标签： ajax javascript 前端

于 2022-12-28 23:35:10 首次发布

本文链接：https://blog.csdn.net/m0_50939789/article/details/128475377

版权

网络应用专栏收录该内容

18 篇文章 2 订阅

订阅专栏

`HTML` 页面

<html>
    <body>
        <button>press</button>
        <div id="content" style="width: 300px;height:200px;border:1px solid;"></div>
    </body>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const content = document.getElementById('content');
        btn.onclick = function(){
            const xhr = new XMLHttpRequest();
            // 初始化 设置类型与 URL 参数
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            //设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoder')
            xhr.setRequestHeader('name', 'zjh')
            // 发送
            xhr.send('a=200&b=300');
            // 事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        console.log(xhr.status);
                        console.log(xhr.statusText);
                        console.log(xhr.getAllResponseHeaders());
                        console.log(xhr.response);
                        content.innerHTML = xhr.response;
                   }
                }
            }
        }
    </script>
</html>

`js` 文件

const express = require('express');
const app = express()
app.get('/server', (Request, Response)=>{
    Response.setHeader('Access-Control-Allow-Origin', '*')
    Response.send('Hello Ajax')
})
app.post('/server', (Request, Response)=>{
    //设置响应头
    Response.setHeader('Access-Control-Allow-Origin', '*') // 允许跨域
    Response.setHeader('Access-Control-Allow-Headers', '*') // * 表示所有头信息都可以接受
    //设置响应体
    Response.send('Hello Ajax')
})
app.listen(8000, ()=>{
    console.log('8000 running meproject express')
})