將對象從節點服務器發送到客戶端的 javascript

Question

我有一個非常簡單的服務器，如下所示：

var http = require('http');
var fs = require('fs');

http.createServer(function (req, res) {

  res.writeHead(200, { 'Content-Type': 'text/html' });
  fs.readFile('index.html', 'utf-8', function (err, content) {
    if (err) {
      res.end('something went wrong.');
      return;
    }
    res.end(content);
  });

}).listen(8080);
console.log("Server running on port 8080.")

這負責渲染我的 html，但現在我想發送一個對象。 像這樣的東西：

var arr = [1,2,3];

我希望能夠在客戶端使用 js 操作這個對象。 所以除了知道如何將它從服務器發送到客戶端之外，我還想知道如何在客戶端接收它，如果這有意義的話。

我試圖了解幕后發生的事情，所以我不想使用快遞。

Answer 1

通常，您可以通過 HTTP 協議交換的唯一內容是數據。 不是對象，不是 html 文件，只是數據。 將對象轉換為數據並返回的過程稱為序列化。 對於簡單對象的特定情況，您可以使用 JSON 內置對象來序列化您的對象。

在服務器：

var data = JSON.stringify(arr); 
res.end(data);

在客戶端：

var arr = JSON.parse(data);

至於如何在客戶端詢問和接收數據，請嘗試使用谷歌搜索 XmlHTTPRequest。

根據要求，添加功能齊全的服務器端代碼：

var http = require('http');
var fs = require('fs');

http.createServer(function (req, res) {

  res.writeHead(200, { 'Content-Type': 'text/plain', 'Access-Control-Allow-Origin': '*' });
  var data = JSON.stringify([1, 2, 3]);
  res.end(data);

}).listen(8080);
console.log("Server running on port 8080.")

Access-Control-Allow-Origin標頭只需要能夠在控制台中運行您的代碼（它稱為“CORS”，意味着可以從托管在其他域上的頁面請求此端點）

Answer 2

只需更改響應類型並將 JSON 字符串化：

http.createServer(function (req, res) {

    var arr = [1,2,3];
    res.writeHead(200, { 'Content-Type': 'application/json'});
    res.end(JSON.stringify(content), 'utf-8');

}).listen(8080);

Answer 3

好吧，看來我做錯了一些事情。 它主要與服務器上的路由有關。 這就是我試圖做的：

var http = require('http');
var fs = require('fs');

http.createServer(function (req, res) {

  var arr = [1, 2, 3];
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify(arr), 'utf-8');

}).listen(8080);
console.log("Server running on port 8080.")

在客戶端，我有這樣的事情：

xmlhttp = new XMLHttpRequest();
   xmlhttp.open("GET","http://localhost:8080/", true);
   xmlhttp.onreadystatechange=function(){
         if (xmlhttp.readyState==4 && xmlhttp.status==200){
          console.log(JSON.parse(xmlhttp.responseText));
         }
   }
   xmlhttp.send();

出於某種原因，console.log 永遠不會發生，我只會將數組打印在頁面上。 但是通過像這樣向我的服務器添加一些路由，它起作用了：

var http = require('http');
var fs = require('fs');

http.createServer(function (req, res) {

   if (req.method === 'GET' && req.url === '/') {

    res.writeHead(200, { 'Content-Type': 'text/html' });
    fs.readFile('index.html', 'utf-8', function (err, content) {
      if (err) {
        res.end('something went wrong.');
        return;
      }
      res.end(content);
    });
  }

  if (req.method === 'GET' && req.url === '/data') {
    var arr = [1, 2, 3];
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify(arr), 'utf-8');
  }



}).listen(8080);
console.log("Server running on port 8080.")