Ajax的应用②(POST请求，设置请求头，响应JSON)

原创

十八岁讨厌编程 2022-08-05 21:13:22 博主文章分类：Ajax ©著作权

文章标签 ajax json 服务端数据 文章分类 云平台云计算

©著作权归作者所有：来自51CTO博客作者十八岁讨厌编程的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录

Ajax发送POST请求

POST设置请求体

Ajax设置请求头信息
服务端响应JSON数据

Ajax发送POST请求

首先模拟一个场景：在鼠标经过一个盒子的时候，盒子里面显示服务端的响应体。

html部分：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>#result{
            width:200px;
            height:100px;
            border:solid 1px #903;
        }</style>
</head>
<body>
    <div id="result"></div>
    <script>//获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置类型与 URL
            xhr.open('POST', 'http://127.0.0.1:3000/server');
            //3. 发送
            xhr.send();
            //4. 事件绑定
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        });</script>
</body>

服务端：

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// 如果url的路径是'/server'的话，那么就会执行后面的回调函数，并且由response
// 来做出响应。
app.get('/server', (request,)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');


    //设置响应
    response.send('HELLO EXPRESS');
});

app.post('/server', (request,)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');


    //设置响应
    response.send('HELLO EXPRESS');
});

//4. 监听端口启动服务
app.listen(3000, ()=>{
    console.log("服务已经启动, 3000 端口监听中....");
});

注意：如果发送POST请求，那么服务器端就要用就要用app.post()方法来设置响应。

服务端的js代码在修改之后一定要重新启动服务，请求端的网站用Ctrl+f5进行强制刷新。

POST设置请求体

//3. 发送
            xhr.send();
            // xhr.send('a=100&b=200&c=300');
            // xhr.send('a:100&b:200&c:300');
            // xhr.send('1233211234567');

可以在Headers中的Request Payload中查看到

Ajax的应用②(POST请求，设置请求头，响应JSON)_数据

请求体的内容一般是非常灵活的，没有硬性的规定，但前提是服务端要有与其对应的处理方式！

Ajax设置请求头信息

截至目前我们已经知道在请求报文中，请求行中的请求类型，url地址可以自己设置；请求体可以自己设置。那么如何自己设置请求头信息呢？

语法：

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

我们可以使用setRequestHeader()方法来设置请求头，这个方法接收两个啊参数：

第一个参数：头的名字
第二个参数：头的值

这里的第一个参数，可以使用预定义的名字，也可以使用自定义的名字。

不过使用自定义的名字的话，服务器端要进行相应的处理，这将由后端人员来处理。

服务端响应JSON数据

服务器端：

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// 如果url的路径是'/server'的话，那么就会执行后面的回调函数，并且由response
// 来做出响应。
app.get('/server', (request,)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');


    //设置响应
    response.send('HELLO EXPRESS');
});

app.post('/server', (request,)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');


    //设置响应
    response.send('HELLO EXPRESS');
});

//JSON 响应
app.all('/json-server', (request,) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'NEFU'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

//4. 监听端口启动服务
app.listen(3000, ()=>{
    console.log("服务已经启动, 3000 端口监听中....");
});

注意：
①这个app.all()方法可以对所有类型的请求进行一个响应
②send()函数中只能传输一个String类型或者Buffer类型的数据，所以我们在服务器端需要用JSON将对象字符串化，再装入到send()中去进行传输。

请求端：
模拟的场景：按下键盘任意键触发事件，div中显示服务端传回的数据。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON响应</title>
    <style>#result{
            width:200px;
            height:100px;
            border:solid 1px #89b;
        }</style>
</head>
<body>
    <div id="result"></div>
    <script>const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function(){
            //发送请求
            const xhr = new XMLHttpRequest();
            //设置响应体数据的类型
            xhr.responseType = 'json';
            //初始化
            xhr.open('GET','http://127.0.0.1:3000/json-server');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response;
                        // 1. 手动对数据转化
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        // result.innerHTML = data.name;
                        // 2. 自动转换
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }</script>
</body>