为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

慕盖茨1488219 2019-12-12 14:52:22

因此,我正在尝试制作一个非常基本的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源均假设用户已经对这些事情有所了解。)


查看完整描述

3 回答

?
DIEA

您的请求应该发送到服务器,而不是实例化它的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非常好,但是如果您不需要jQuery提供的其他功能,请在此处找到一个不错的AJAX库:http : //microjs.com/。您还需要对在这里找到的node.js文档感到满意。在http://google.com上搜索一些不错的node.js服务器和静态文件服务器教程。http://nodetuts.com是一个不错的起点。


更新:我在上面的代码中更改response.sendHeader()为新response.writeHead()代码!!!


查看完整回答
反对 回复 2019-12-12
?
翻翻过去那场雪

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)

})


查看完整回答
反对 回复 2019-12-12
?
若吾皇

我遇到了由&符提供的代码(nodejs 0.10.13)的以下错误:


access-control-allow-origin不允许起源


问题已解决,但正在更改


response.writeHead(200, {"Content-Type": "text/plain"});


response.writeHead(200, {

                 'Content-Type': 'text/html',

                 'Access-Control-Allow-Origin' : '*'});


查看完整回答
反对 回复 2019-12-12

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信