基本的Ajax使用node.js发送/接收

小编典典

基本的Ajax使用node.js发送/接收

javascript

因此，我正在尝试制作一个非常基本的node.js服务器，该服务器接受字符串请求，从数组中随机选择一个，然后返回所选的字符串。不幸的是，我遇到了一些问题。

这是前端：

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发送字符串到前端。
我对如何在localhost上调用此页面感到有些困惑。前端的名称为index.html，服务器的地址为8001。初始化server.js后，我应该在localhost上访问哪个地址才能访问初始的html页？我应该将其更改为.listen(index.html)或类似的名称吗？
我如何实现这一点（使用.responsetext等）还有其他明显的问题吗？

（对冗长的多问题帖子很抱歉，但是各种教程和node.js源均假设用户已经对这些事情有所了解。）

阅读 325

2020-05-01

共1个答案

小编典典

您的请求应该发送到服务器，而不是实例化它的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”模块来解析请求。
您正在正确调用，listen()但错误地编写了响应。首先，如果您希望在导航到http：// localhost：8001 /时提供index.html ，则需要使用response.write()或将文件内容写入响应中response.end()。首先，您需要包括fs=require('fs')以访问文件系统。然后，您需要实际提供文件。
如果您异步使用XMLHttpRequest，则需要指定一个回调函数（已完成，第三个参数= true），并且想对响应做一些事情。您现在拥有的方式string将是undefined（或可能是null），因为该行将在AJAX请求完成之前执行（即responseText仍然为空）。如果同步使用它（第三个参数= false），则可以编写内联代码。不建议这样做，因为它会在请求期间锁定浏览器。异步操作通常与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非常好，但是如果您不需要

更新：我在上面的代码中已更改response.sendHeader()为新response.writeHead()代码！！！

2020-05-01