Question

server.js 可以生成随机数。所以现在我想从服务器获得随机数并使用 xmlhttp 发送请求。但是当我加载{{3}}时，字符串的值不会改变。会发生什么？

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)方法中，您初始化发送请求，并在此行span.text(string)后xmlhttp.send();立即将空字符串分配给范围。

从服务器收到响应（随机数）后，您将其分配给变量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();
        }

当我想使用Ajax使用node.js发送/接收请求时，如何在xmlhttp.open（）中设置参数“url”

1 个答案: