您的请求应该发送到服务器,而不是实例化它的 server.js 文件。因此,请求应如下所示:xmlhttp.open("GET","http://localhost:8001/", true);
此外,您正在尝试为前端 (index.html) 提供服务并在同一 URI 上提供 AJAX 请求。为此,您必须向 server.js 引入逻辑,以区分 AJAX 请求和普通的 http 访问请求。为此,您需要引入 GET/POST 数据(即 call http://localhost:8001/?getstring=true
)或为 AJAX 请求使用不同的路径(即 call http://localhost:8001/getstring
)。然后在服务器端,您需要检查请求对象以确定要在响应上写入什么内容。对于后一个选项,您需要使用 'url' module来解析请求。
您正确调用listen()
但错误地编写了响应。首先,如果您希望在导航到http://localhost:8001/时提供 index.html ,您需要使用response.write()
或将文件的内容写入响应response.end()
。首先,您需要包含fs=require('fs')
以访问文件系统。然后,您需要实际提供文件。
如果您异步使用 XMLHttpRequest 需要指定回调函数(第三个参数 = true,正如您所做的那样)并且想要对响应执行某些操作。您现在拥有它的方式string
将是undefined
(或者可能是null
),因为该行将在 AJAX 请求完成之前执行(即 responseText 仍然为空)。如果同步使用(第三个参数=false),就可以像以前一样编写内联代码。不建议这样做,因为它会在请求期间锁定浏览器。异步操作通常与 onreadystatechange 函数一起使用,一旦完成就可以处理响应。您需要学习 XMLHttpRequest 的基础知识。从这里开始。
这是一个包含上述所有内容的简单实现:
服务器.js:
var http = require('http'),
fs = require('fs'),
url = require('url'),
choices = ["hello world", "goodbye world"];
http.createServer(function(request, response){
var path = url.parse(request.url).pathname;
if(path=="/getstring"){
console.log("request recieved");
var string = choices[Math.floor(Math.random()*choices.length)];
console.log("string '" + string + "' chosen");
response.writeHead(200, {"Content-Type": "text/plain"});
response.end(string);
console.log("string sent");
}else{
fs.readFile('./index.html', function(err, file) {
if(err) {
// write an error response or nothing here
return;
}
response.writeHead(200, { 'Content-Type': 'text/html' });
response.end(file, "utf-8");
});
}
}).listen(8001);
console.log("server initialized");
前端(index.html 的一部分):
function newGame()
{
guessCnt=0;
guess="";
server();
displayHash();
displayGuessStr();
displayGuessCnt();
}
function server()
{
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","http://localhost:8001/getstring", true);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
string=xmlhttp.responseText;
}
}
xmlhttp.send();
}
您需要熟悉 AJAX。使用 mozilla 学习中心了解 XMLHttpRequest。在您可以使用基本的 XHR 对象之后,您很可能希望使用一个好的 AJAX 库,而不是手动编写跨浏览器的 AJAX 请求(例如,在 IE 中,您将需要使用 ActiveXObject 而不是 XHR)。jQuery 中的 AJAX 非常好,但如果您不需要jQuery提供的所有其他功能,请在此处找到一个好的 AJAX 库:http : //microjs.com/。您还需要熟悉 node.js 文档,可在此处找到。在http://google.com 上搜索一些好的 node.js 服务器和静态文件服务器教程。http://nodetuts.com是一个很好的起点。
更新:我已经在上面的代码中改成response.sendHeader()
了新response.writeHead()
的!!!