JS案例：Ajax實現簡單局域網聊天室

利用Ajax將數據提交到後臺，再由後臺發送到前端，渲染內容javascript

代碼以下：html

HTML：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{margin: 0;padding: 0;}
    #textBox{width: 800px;height: 600px;border: 1px solid black;margin: 50px 0;font-size: 20px;}
    </style>
    </head>

    <body>
        <textarea id="textBox"></textarea><br>
        <input type="text">:<input type="text" style="width:600px;"><button>Send</button>
        <script>
            var names = document.querySelectorAll("input")[0];
            var msgs = document.querySelectorAll("input")[1];
            var box = document.getElementById("textBox");
            var btn = document.querySelectorAll("button")[0];
            //設置刷新時間爲一秒一次
            setInterval(loadHandler, 1000);
            // 點擊發送。監聽事件
            btn.addEventListener("click", sendText);
            // 點擊後執行Ajax
            function loadHandler(data) {
                if (!data) {
                    data = {
                        id: 2
                    };
                }
                var xhr = new XMLHttpRequest();
                xhr.addEventListener("load", startPost);
                xhr.open("POST", "http://10.9.48.155:1024/"); //這裏必定是主機的IP地址
                xhr.send(JSON.stringify(data));

            }



            function startPost(e) {
                box.value = (JSON.parse(this.response)).resu.join("\n"); //將後臺拼接好的數據返回到聊天面板
            }

            function sendText(e) {
                // 將從輸入框獲取的內容添加到對象發送到後端
                if (names.value.length === 0) return;
                if (msgs.value.length === 0) return;
                var obj = {
                    id: 1,
                    user: names.value,
                    mas: msgs.value
                }
                loadHandler(obj);
            }
        </script>
    </body>

</html>

node代碼：

var http = require("http");//獲取http請求（前面的文章有詳細註釋）
var arr = []; //新建消息容器，存放消息集

var server = http.createServer(function (req, res) {
    var data = "";
    req.on("data", function (d) {
        data += d;
    });
    req.on("end", function () {
        var obj = JSON.parse(data);
        //解析對象，將user和msg取出
        if (obj.id === 1) {
            arr.push(obj.user + ":" + obj.mas);
        }
        // 返回數組和錯誤信息（沒有則爲空）
        var result = {
            resu: arr,
            error: null
        };
        res.writeHead(200, {
            "Content-Type": "text/plain",
            "Access-Control-Allow-Origin": "*"
        });
        res.write(JSON.stringify(result));//將打包好的對象傳到前端
        res.end();
    });
});
// 監聽服務
server.listen(1024, "10.9.48.155", function () {
    console.log("偵聽開始");
})