GET ,POST，JSON请求响应-CFANZ编程社区

server.js服务端

//1.引入expres
const { request, response } = require('express');
const express = require('express');

//2.创建应用对象
const app = express();
//3.创建路由规则
//request是请求报文的封装
//response 是对响应报文封装
 app.all('/server', (request, response) => {
     //设置响应头，是指允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
     //设置特殊的响应头
     response.setHeader('Access-Control-Allow-Headers', '*');
     //设置响应
     response.send('HELLO AJAX');
 });

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

GET.html客户端

通过点击按钮获取服务端发送过来的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid rebeccapurple;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
</body>
<script>
    const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById("result");
    //绑定事件
    btn.onclick = function() {
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.s初始化，设置请求方法和url
        xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');
        //3.发送
        xhr.send();
        //4.时间绑定  处理服务端返回的结果
        //readystate是xhr对象中的属性，表示状态0 1 2 3 4 
        xhr.onreadystatechange = function() {
           //判断服务器返回的所有结果 readystate循环到4表示返回所有的结果
            if (xhr.readyState === 4) {
                //判断响应的状态码 200  404  403 401  500
                //大于200小于300的表示成功
                if (xhr.status >= 200 && xhr.status < 300) {
                    //处理结果  行 头  空行 体
                    console.log(xhr.status); //状态码
                    console.log(xhr.statusText); //状态字符串
                    console.log(xhr.getAllResponseHeaders()); //所有响应头
                    console.log(xhr.response); //响应体
                    //设置reusult的文本
                    result.innerHTML = xhr.response;
                }
            }
        }
    }
</script>
</html>

测试截图

在这里插入图片描述

POST.html客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 2px solid rebeccapurple;
        }
    </style>
</head>

<body>
    <div id="result"></div>
</body>
<script>
    const result = document.getElementById('result');
    //绑定事件
    result.addEventListener("mouseover", function() {
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.s初始化，设置请求方法和url
        xhr.open('POST', 'http://127.0.0.1:8000/server');
        //设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        //设置特殊请求头
        xhr.setRequestHeader('name', 'atguigu');
        //3.发送
        xhr.send('a=100&b=200');
        //4.事件绑定
        xhr.onreadystatechange = function() {
            //判断
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {

                    result.innerHTML = xhr.response;
                }
            }
        }
    });
</script>
</html>

测试截图

在这里插入图片描述
其中Content-Type和 name是通过

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

设置特殊请求头时要在server.js里面添加

 //设置特殊的响应头
    response.setHeader('Access-Control-Allow-Headers', '*');

JSON的server.js服务端，按下键盘任意键触发事件响应服务器的JSON数据：data

//1.引入expres
const { request, response } = require('express');
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是请求报文的封装
//response 是对响应报文封装
app.all('/json-server', (request, response) => {
    //设置响应头，是指允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置特殊的响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'atguigu'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应
    response.send(str);
});

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

JSON.html客户端

<!DOCTYPE html>
<html lang="en">
<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: 2px solid red;
        }
    </style>
</head>
<body>
    <div id="result"></div>
</body>
<script>
    const result = document.getElementById('result');
    // 绑定键盘按下事件
    window.onkeydown = function() {
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //设置响应提数据类型
        xhr.responseType = 'json'
            //2.初始化
        xhr.open('GET', 'http://127.0.0.1:8000/json-server');
        //3.发送
        xhr.send();
        //4.事件绑定
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 & xhr.status < 300) {

                    //1.手动对数据转换
                    // let data = JSON.parse(xhr.response);
                    // result.innerHTML = data.name;
                    // 2.自动转换,需要在上面设置响应体的类型
                    result.innerHTML = xhr.response.name;
                }
            }
        }
    }
</script>

</html>

测试结果

在这里插入图片描述