AJAX发送POST请求

需求：当鼠标经过div的时候发送post请求，并将服务端返回的请求体展示在div中

<div id="result"></div>

#result {
    width: 200px;
    height: 100px;
    border: 1px solid #ccc;
}

设置请求参数在send中设置

const result = document.getElementById("result");
result.addEventListener("mouseover", function () {
    // 1. 创建对象
    const xhr = new XMLHttpRequest();
    // 2. 初始化 设置请求类型与URL
    xhr.open('POST', 'http://127.0.0.1:8000/server');
    // 3. 发送
    xhr.send('a=100&b=200&c=300');
    // 或者 xhr.send('a:100&b:200&c:300');
    // 或者 xhr.send('123456');
    // 4. 事件绑定
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                result.innerHTML = xhr.response;
            }
        }
    }
});

// server.js
// 1. 引入express
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('hello ajax get');
});
app.post('/server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('hello ajax post');
});
// 4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已启动,8000端口监听中......");
})

设置请求头

预定义请求头：

        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

自定义请求头：

        xhr.setRequestHeader('name', 'andy'); 

需要在server.js中进行处理 

添加响应头：

response.setHeader('Access-Control-Allow-Headers', '*');

const result = document.getElementById("result");
result.addEventListener("mouseover", function () {
    // 1. 创建对象
    const xhr = new XMLHttpRequest();
    // 2. 初始化 设置请求类型与URL
    xhr.open('POST', 'http://127.0.0.1:8000/server');
    // 设置请求头
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.setRequestHeader('name', 'andy');
    // 3. 发送
    xhr.send('a=100&b=200&c=300');
    // 或者 xhr.send('a:100&b:200&c:300');
    // 或者 xhr.send('123456');
    // 4. 事件绑定
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                result.innerHTML = xhr.response;
            }
        }
    }
});

// server.js
// 1. 引入express
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('hello ajax get');
});
app.post('/server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('hello ajax post');
});
// all表示可以接收任意类型的请求
app.all('/server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 响应头
    // * 表示所有类型的请求头信息都可以接受
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应体
    response.send('hello ajax post');
});
// 4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已启动,8000端口监听中......");
})