基本的Ajax发送/接收与node.js
所以我试图做一个非常基本的node.js服务器，接受一个string的请求，从数组中随机select一个，并返回选定的string。 不幸的是我遇到了一些问题。
这是前端：
function newGame() { guessCnt=0; guess=""; server(); displayHash(); displayGuessStr(); displayGuessCnt(); } function server() { xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET","server.js", true); xmlhttp.send(); string=xmlhttp.responseText; } 这应该发送请求到server.js：
var http = require('http'); var choices=["hello world", "goodbye world"]; console.log("server initialized"); http.createServer(function(request, response) { console.log("request recieved"); var string = choices[Math.floor(Math.random()*choices.length)]; console.log("string '" + string + "' chosen"); response.on(string); console.log("string sent"); }).listen(8001);
很明显，这里有几个地方出了问题：
-
我感觉我连接这两个文件的方式在
xmlhttp.open方法中都是不正确的，在使用response.on将string发回到前端时也是如此。 -
我有点困惑与我如何在本地调用这个页面。 前端名为index.html，服务器端为8001.在初始化server.js之后，我应该在localhost上访问哪个地址以访问初始html页面？ 我应该将其更改为
.listen(index.html)或类似的东西？ -
还有其他明显的问题，我如何实现这一点（使用
.responsetext等）
（很抱歉，对于长期的多问题post，各种教程和node.js源码都假设用户已经理解了这些内容）。
-
您的请求应该是服务器，而不是实例化它的server.js文件。 所以，请求应该看起来像这样：
xmlhttp.open("GET","http://localhost:8001/", true);另外，您正尝试为前端（index.html）提供服务，并在同一个URI上提供AJAX请求。 为了实现这一点，你将不得不向你的server.js引入逻辑来区分你的AJAX请求和正常的http访问请求。 为此，您需要引入GET / POST数据（即调用http://localhost:8001/?getstring=true）或为您的AJAX请求使用不同的path（即调用http://localhost:8001/getstring）。 然后在服务器端，您需要检查请求对象以确定在响应上写什么。 对于后面的选项，你需要使用'url'模块来parsing请求。 -
你正确地调用了
listen()但是错误地写了这个响应。 首先，如果您希望在导航到http：// localhost：8001 /时提供index.html，则需要使用response.write()或response.end()将文件的内容写入response.end()。 首先，您需要包含fs=require('fs')才能访问文件系统。 然后，您需要实际提供文件。 -
XMLHttpRequest需要一个指定的callback函数，如果你asynchronous使用它（第三个参数= true，如你所做的那样）并且想对响应做些什么。 你现在的方式，
string将是undefined（或可能为null），因为该行将在AJAX请求完成之前执行（即，responseText仍为空）。 如果您同步使用它（第三个参数= false），则可以像完成一样写入内联代码。 这是不推荐的，因为它在请求期间locking浏览器。 asynchronous操作通常与onreadystatechange函数一起使用，它可以在完成后处理响应。 您需要了解XMLHttpRequest的基础知识。 从这里开始
这是一个简单的实现，包含了所有上述内容：
server.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提供的其他东西，可以在这里find一个好的AJAX库： http ： //microjs.com/ 。 您还需要获得这里find的node.js文档的舒适。 searchhttp://google.com一些好的node.js服务器和静态文件服务器教程。 http://nodetuts.com是一个很好的起点。;
更新：我已经改变了response.writeHead()在上面的代码中新的response.writeHead() ！
Express使这种东西非常直观。 语法如下所示：
var app = require('express').createServer(); app.get("/string", function(req, res) { var strings = ["rad", "bla", "ska"] var n = Math.floor(Math.random() * strings.length) res.send(strings[n]) }) app.listen(8001)
http://expressjs.com/guide.html
如果你在客户端使用jQuery，你可以这样做：
$.get("/string", function(string) { alert(string) })
我正在面对以下代码错误（nodejs 0.10.13），由＆符号提供：
访问控制允许来源不允许来源
问题已经解决了
response.writeHead(200, {"Content-Type": "text/plain"});
至
response.writeHead(200, { 'Content-Type': 'text/html', 'Access-Control-Allow-Origin' : '*'});
这是你正在努力完成的一个全function的例子。 我在hyperdev里创build了这个例子，而不是jsFiddle，所以你可以看到服务器端和客户端的代码。
查看代码： https : //hyperdev.com/#!/ project/ destiny-authorization
查看工作申请： https ： //destiny-authorization.hyperdev.space/
此代码为获取请求创build一个处理程序，返回一个随机string：
app.get("/string", function(req, res) { var strings = ["string1", "string2", "string3"] var n = Math.floor(Math.random() * strings.length) res.send(strings[n]) });
这个jQuery代码然后发出ajax请求并从服务器接收随机string。
$.get("/string", function(string) { $('#txtString').val(string); });
请注意，这个例子是基于Jamund Ferguson的回答中的代码，所以如果你觉得这个有用的话，一定要赞同他。 我只是认为这个例子会帮助你看到一切如何结合在一起。
