nodejs创建HTTP服务器与前端通信示例(多demo)

前面几篇都在复习nodejs创建HTTP服务器的若干知识点，本篇将使用原生AJAX和nodejs的HTTP服务器配合写几个DEMO，加深运用理解，也方便时间长回顾备查，客户端使用file访问协议，服务端代码写在app.js中，客户端代码写在index.html中，所有demo均亲测可用。

表单submit提交数据

//app.js
const http = require( "http" );
const queryString = require( "querystring" );
let app = http.createServer( function ( req, res ) {
    if( req.url !== "/favicon.ico" ){
        let postData = "";
        // 监听ajax提交时请求对象req的data事件，由于发送的数据是分片段给来，所以每接收到一段数据dataChunk就会触发data事件，
        req.on( "data", function ( postDataChunk ) {
            postData += decodeURIComponent( postDataChunk );
        } )
        req.on( "end", function () {
            try{
                res.setHeader( "Content-Type", "application/json;charset=utf-8" );
                res.write( "你填写的名字是：" + queryString.parse( postData ).name + "；" );
                res.write( "你填写的年龄是：" + queryString.parse( postData ).age + "；" );
                res.write( "你填写的兴趣1是：" + queryString.parse( postData ).interests[0] + "；" );
                res.write( "你填写的兴趣2是：" + queryString.parse( postData ).interests[1] + "；" );
                res.write( "你填写的兴趣3是：" + queryString.parse( postData ).interests[2] + "。" );
            }catch( e ){
                console.log( e );
            }
            res.end();
        } )
    }
} ).listen( 1335, ()=>{ console.log( "service is running at port 1335." ); } )


//index.html
<form action="http://127.0.0.1:1335" method="POST">
    <input type="text" name="name">
    <input type="text" name="age">
    <input type="checkbox" name="interests" value="敲代码">敲代码
    <input type="checkbox" name="interests" value="玩PS4">玩PS4
    <input type="checkbox" name="interests" value="看书">看书
    <input type="submit" value="提交">
</form>

表单ajax提交数据

// app.js
const http = require( "http" );
let app = http.createServer( function ( req, res ) {
    if( req.url !== "favicon.ico" ){
        try{
            let reqData = "";
            req.on( "data", function ( dataChunk ) {
                reqData += decodeURIComponent( dataChunk );
            } )
            req.on( "end", function () {
                res.setHeader( "Content-Type", "application/json;charset=utf-8" );
                res.setHeader( "Access-Control-Allow-Origin", "*" );
                res.write( reqData );
                res.end();
            } )
        }catch( e ){
            console.log( e );
        }
    }
} ).listen( 1338, ()=>{ console.log( "service is running at port 1338." ); } )

// index.html
<body>
    <form action="http://127.0.0.1:1338" method="POST" id="formData">
        <input type="text" name="name">
        <input type="text" name="age">
        <input type="checkbox" name="interests" value="敲代码">敲代码
        <input type="checkbox" name="interests" value="玩PS4">玩PS4
        <input type="checkbox" name="interests" value="看书">看书
        <input type="button" id="subBtn" value="提交">
    </form>
</body>
let subBtn = document.getElementById( "subBtn" );
subBtn.onclick = function( e ){
    let form = document.querySelector( "#formData" );
    let formData = new FormData( form );
    let xhr = new XMLHttpRequest();
    xhr.open( "POST", form.action );
    xhr.setRequestHeader( "Content-Type", "multipart/form-data");
    xhr.onreadystatechange = function () {
        if( xhr.readyState === 4 ){
            if( (xhr.status >= 200 && xhr.status < 300) || (xhr.status === 304) ){
                let resData = xhr.response;
                console.log( resData );
            }
        }else {
            console.log( xhr.readyState );
            console.log( "请求发送中..." );
        }
    }
    xhr.send( formData );
}

ajax的无参GET请求

// app.js
const http = require( "http" );
let app = http.createServer( function ( req, res ) {
    if( req.url !== "/favicon.ico" ){
        try{
            let resData = {name: "nitx", age: 31};
            res.setHeader( "Content-Type", "application/json;charset=utf-8" );
            // 设置跨域
            res.setHeader( "Access-Control-Allow-Origin", "*" );
            res.write( JSON.stringify( resData ) );
            res.end();
        }catch( e ){
            console.log( e );
        }
    }
} ).listen( 1336, ()=>{ console.log( "service is running at port 1336." ); } )

//index.html
<body>
    <button type="button" id="btn">GET请求获取响应数据</button>
    <div id="div"></div>
</body>
let btn = document.getElementById( "btn" );
btn.onclick = function ( e ) {
    let xhr = new XMLHttpRequest();
    xhr.open( "GET", "http://127.0.0.1:1336" );
    // 设置xhr对象的responseType属性值为json时，浏览器就会自动对返回数据调用JSON.parse()方法。该属性值默认是text
    xhr.responseType = "json";
    // xhr对象的onreadystatechange属性指向一个监听函数，当readystate属性变化时执行
    xhr.onreadystatechange = function () {
        if( xhr.readyState === 4 ){
            if( (xhr.status >= 200 && xhr.status <300) || (xhr.status === 304) ){
                let resData = xhr.response;
                document.getElementById( "div" ).innerHTML = resData.name;
            }else {
                console.log( xhr.statusText );
            }
        }else {
            console.log( xhr.readyState );
            console.log( "ajax请求中..." );
        }
    }
    xhr.send( null );
}

ajax的带参GET请求

// app.js
const http = require( "http" );
const url = require( "url" );
let app = http.createServer( function ( req, res ) {
    if( req.url !== "favicon.ico" ){
        try{
            let decodeUrl = url.parse( decodeURIComponent( req.url ), true );
            let query = decodeUrl.query;
            res.setHeader( "Content-Type", "application/json;charset=utf-8" );
            res.setHeader( "Access-Control-Allow-Origin", "*" );
            res.write( JSON.stringify( query ) );
        }catch( e ){
            console.log( e );
        }
        res.end();
    }
} ).listen( 1337, ()=>{ console.log( "service is running at port 1337" ); } );

// index.html
<body>
    <button type="button" id="btn">GET提交数据并获取响应数据</button>
    <div id="div"></div>
</body>
let btn = document.getElementById( "btn" );
btn.onclick = function ( e ) {
    let xhr = new XMLHttpRequest();
    xhr.open( "GET", "http://127.0.0.1:1337?name=nitx&age=31" );
    xhr.responseType = "json";
    xhr.onreadystatechange = function () {
        if( xhr.readyState === 4 ){
            if( (xhr.status >= 200 && xhr.status < 300) || ( xhr.status === 304 ) ){
                let resData = xhr.response;
                console.log( resData );
                document.getElementById( "div" ).innerHTML = resData.name + "：" + resData.age;
            }
        }else {
            console.log( xhr.readyState );
            console.log( "ajax加载中..." );
        }
    };
    xhr.send( null );
}

ajax的POST传参请求

// app.js
const http = require( "http" );

let app = http.createServer( function ( req, res ) {
    if( req.url !== "/favicon.ico" ){
        let reqData = "";
        req.on( "data", function ( dataChunk ) {
            reqData += decodeURIComponent( dataChunk );
        } )
        req.on( "end", function () {
            try{
                res.setHeader( "Content-type", "application/json;charset=utf-8" );
                res.setHeader( "Access-Control-Allow-Origin", "*" );
                res.write( reqData );
                res.end();
            }catch( e ){
                console.log( e );
            }
        } )
    }
} ).listen( 1340, ()=>{ console.log( "service is running at port 1340." ); } )


// index.html
<body>
    <button type="button" id="btn">POST请求</button>
    <div id="div"></div>
</body>
let paramData = { a: 1, b: 2 };
let btn = document.getElementById( "btn" );
btn.onclick = function () {
    let xhr = new XMLHttpRequest();
    xhr.open( "POST", "http://127.0.0.1:1340" );
    xhr.onreadystatechange = function () {
        if( xhr.readyState === 4 ){
            if( xhr.status === 200 ){
                let resData = xhr.response;
                console.log( JSON.parse( resData ) );
            }
        }else {
            console.log( xhr.readyState );
            console.log( "请求加载中..." );
        }
    }
    xhr.send( JSON.stringify( paramData ) );
}

喜欢本文请扫下方二维码，关注微信公众号：前端小二，查看更多我写的文章哦，多谢支持。
在这里插入图片描述

nodejs创建HTTP服务器与前端通信示例(多demo)

猜你喜欢