當我想使用Ajax通過node.js發送/接收請求時，如何在xmlhttp.open（）中設置參數“ url”

Question

server.js可以產生隨機數。 因此，現在我想從服務器獲取一個隨機數 ，並使用xmlhttp發送請求。 但是當我加載http：// localhost：3000 / index.html時，string的值沒有改變。 發生什么事？

index.js如下所示：

$(document).ready(function() {
    getRandomNum();
});

function getRandomNum() {
    $(".button").each(function() {
        var that = $(this);
        that.click(function() {
            var span = $("<span></span>").addClass("unread");
            that.append(span);
            span.text("...");
            server(span);
        });
    });
}

function server(span) {
    var string;
    var xmlhttp = new XMLHttpRequest();
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        string = xmlhttp.responseText;
    }
    xmlhttp.open("GET","http://localhost:3000/", true);
    xmlhttp.send();
    span.text(string);
}

server.js如下所示：

var http = require('http');
var url = require('url');
var path = require('path');
var fs = require('fs');
var port = 3000;

http.createServer(function(req,res) {
   var pathname = url.parse(req.url).pathname;
   var mimeType = getMimeType(pathname);
   if (!!mimeType) {
       handlePage(req, res, pathname);
   } else {
       handleAjax(req, res);
   }
}).listen(port, function(){
   console.log('server listen on ', port);
});

function getMimeType(pathname) {
   var validExtensions = {
    ".html" : "text/html",
    ".js": "application/javascript",
    ".css": "text/css",
    ".jpg": "image/jpeg",
    ".gif": "image/gif",
    ".png": "image/png"
  };
  var ext = path.extname(pathname);
  var type = validExtensions[ext];
  return type;
}

function handlePage(req, res, pathname) {
    var filePath = __dirname + pathname;
    var mimeType = getMimeType(pathname);
    if (fs.existsSync(filePath)) {
        fs.readFile(filePath, function(err, data){
        if (err) {
            res.writeHead(500);
            res.end();
        } else {
            res.setHeader("Content-Length", data.length);
            res.setHeader("Content-Type", mimeType);
            res.statusCode = 200;
            res.end(data);
        }
      });
  } else {
    res.writeHead(500);
    res.end();
  }
}

function handleAjax(req, res) {
    var random_time = 1000 + getRandomNumber(2000);
    var random_num  = 1 + getRandomNumber(9);
    setTimeout(function(){
        res.writeHead(200, {'Content-Type': 'text/plain'});
        res.end("" + random_num);
    }, random_time);
}

function getRandomNumber(limit) {
    return Math.round(Math.random() * limit);
}

Answer 1

在您的server(span)方法中，您初始化發送請求，並在此行xmlhttp.send();之后立即通過span.text(string)將空字符串分配給span xmlhttp.send(); 。

一旦從服務器接收到響應（隨機數）， string = xmlhttp.responseText;其分配給變量string = xmlhttp.responseText; 但不會將其更新為span 。

另外，您還沒有在onreadystatechange方法內部處理響應。

我在下面修改了您的代碼。 我已經創建了一個測試應用程序並對其進行了測試。 它按預期工作。

function server(span) {
            var string;
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange= function(){
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    string = xmlhttp.responseText;
                    span.text(string);
                }
            };
            xmlhttp.open("GET","http://localhost:3000/", true);
            xmlhttp.send();
        }