Node搭建服务器与GET请求，POST提交表单

GET发送请求

应用场景：页面请求服务器上的json数据并显示。
利用ajax+promise实现请求发送：

function ajax(bookId) {
        let xhr = new XMLHttpRequest();
        return new Promise((res, rej) => {
            xhr.onreadystatechange = function () {
                if(xhr.readyState === 4){
                    if(200 <= xhr.status <= 304){
                        res(xhr.responseText);
                    }else{
                        rej('error reject');
                    }
                }
            };
            let url = 'http://localhost:8080/json/bookContentBy' + bookId + '.json';
            xhr.open('GET', url);
            xhr.send(null);
        });
    }

ajax.then(function(msg){
    //console.log(msg);
});

GET发送请求时Node搭建服务器

let http = require('http');
let url = require('url');
//下面利用http.createServer搭建服务器
let server = http.createServer(onRequest);

let fs = require('fs');
let baseUrl = __dirname;

function resolve(pathname) {
    return baseUrl+pathname;
}
server.listen(8080);
console.log('server running at port 8080');

function onRequest(req, res) {
    let pathname = url.parse(req.url).pathname;

    console.log(pathname);///json/bookContentBy001.json

    //利用fs.readFile预读文件，若文件存在则返回，否则报错
    fs.readFile(resolve(pathname),function (err,content) {
        if(err){
            res.writeHead(404,{'Content-Type':'application/json;charset="utf-8"'});
            res.write(err.message);
            res.end();
        }else{
        //请求的是JSON数据因此请求头包含Content-Type:application/json
        //由于请求时ajax请求且跨域，因此要设置Access-Control-Allow-Origin属性，即请求源（协议+域名+端口）
        //设置缓存，Cache-Control:public,max-age=2000000
           res.writeHead(200,{'Content-Type':'application/json;charset="utf-8"','Access-Control-Allow-Origin': 'http://localhost:63342','Cache-Control':'public,max-age=2000000'});//头信息
            res.write(content);//将文件内容返回到请求接口，即前面的xhr.responseText
            res.end();
        }
    });
}

POST提交表单

关键是ajax请求，页面为HTML：

//这里action即对应的请求URL
<form method="post" action="http://localhost:8080/file" id="form">
    <p>
        <label for="name">name:
            <input type="text" id="name" name="name" value="zy">
        </label>
    </p>
    <p>
        <label for="age">age:
            <input type="text" id="age" name="age" value="12">
        </label>
    </p>
    <p>
        sex:<label for="boy">
            boy:<input type="radio" id="boy" name="sex" data-index="0" checked>
        </label>
        <label for="girl">
            girl:<input type="radio" id="girl" name="sex" data-index="1">
        </label>
    </p>
    <p>
        love numbers<label for="loveNumber1">
            1:<input type="checkbox" id="loveNumber1" name="love" data-index="0" checked>
        </label>
        <label for="loveNumber2">
            2:<input type="checkbox" id="loveNumber2" name="love" data-index="1">
        </label>
        <label for="loveNumber3">
            3:<input type="checkbox" id="loveNumber3" name="love" data-index="2">
        </label>
        <label for="loveNumber4">
            4:<input type="checkbox" id="loveNumber4" name="love" data-index="3">
        </label>
    </p>
    <p>
        <label for="loveFoods">favourite foods:
            <select id="loveFoods" name="loveFoods">
                <option value="apple">apple 1</option>
                <option value="banana">banana 1</option>
                <option value="orange">orange 1</option>
                <option value="peach">peach 1</option>
            </select>
        </label>
    </p>
    <p>
        <label for="upload">
            <input type="file" value="selectFile" id="upload">
        </label>
    </p>
    <p>
        <label for="submit">
            <input type="submit" value="submit" id="submit">
        </label>
    </p>
</form>

获取submit的点击事件并用ajax处理post请求：

document.getElementById('submit').onclick = function (e) {
        ajax().then(function (msg) {
            console.log(msg);
        });
    };
    function ajax() {
        let xhr = new XMLHttpRequest();
        let data = serialize(form);
        return new Promise((res, rej) => {
            xhr.onreadystatechange = function () {

                if (xhr.readyState === 4) {
                    if (200 <= xhr.status <= 304) {
                        res('ok');
                    } else {
                        rej('error reject');
                    }
                }
            };
            let url = 'http://localhost:8080/file';
            xhr.open('POST', url);
            xhr.send(data);//send请求需要设置请求头，这里data是序列化的表单内容，具体见后面
            res(data);
        });
    }

表单序列化

function serialize(form) {
    var parts = [];
    for (var i = 0, i1 = form.elements.length; i < i1; i++) {
        var field = form.elements[i];
        switch (field.type) {
            case 'select-one':
            case 'select-multiple':
                if (field.type.length) {
                    for (var j = 0, j1 = field.options.length; j < j1; j++) {
                        var option = field.options[j];
                        if (option.selected) {
                            var optionValue = '';
                            if (option.hasAttribute('value') && option.attributes['value'].specified) {
                                //specified表明是否有此属性，有的话返回true，若定义了此属性但尚未添加到元素中也返回true。
                                optionValue = option.value;
                            } else {
                                optionValue = optionValue.text;
                            }
                            parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(optionValue));
                        }
                    }
                }
                break;
            case undefined:
            case 'file':
            case 'submit':
            case 'reset':
            case 'button':
                break;
            case 'radio':
            case 'checkbox':
                if(!field.checked){
                    break;
                }else{
                    parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.dataset['index']));
                     break;
                }
            default:
                if(field.name.length){
                    parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value));
                }
        }

    }
    return parts.join('&');
}

POST提交表单时服务器端设置

let http = require('http');
let url = require('url');
let querystring = require('querystring');

let server = http.createServer(onSubmit);
server.listen(8080);

function onSubmit(req,res) {
    let str1 = `<!DOCTYPE html>
            <html lang="en">
           <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            font-size:62.5%;
        }
        .title{
            font-size: 1.5rem;
            border-bottom: 2px dashed red;
        }
    </style>
</head>
            <body>
            <p>数据已经成功提交</p><p>内容是：<br/>`;

    let str2 = `</p>
            </body>
            </html>`;

    if(req.method.toUpperCase() === 'POST'){
        console.log('[200]' + req.method +'to' + req.url);
        let fullBody = '';
        req.on('data',function (chunk) {
            fullBody += chunk.toString();
        });
        req.on('end',function () {
            res.writeHead(200,{'Content-Type':'text/html;charset="utf-8"','Access-Control-Allow-Origin': 'http://localhost:63342','Cache-Control':'public,max-age=2000000'});//头信息
            res.write(str1);
            res.write(JSON.stringify(fullBody));
            res.write(str2);
            res.end();
        });
    }

}

页面展示内容为：

数据已经成功提交

内容是：
"name=zy&age=12&sex=0&love=0&loveFoods=apple"