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

IT技术 javascript ajax node.js
2021-01-21 05:44:57

所以我正在尝试制作一个非常基本的 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);

很明显,这里有几个问题:

  1. 我觉得我“连接”这两个文件的xmlhttp.open方式在方法和response.on用于将字符串发送回前端时都不正确

  2. 我对如何在本地主机上调用此页面感到有些困惑。前端命名为 index.html,服务器发布到 8001。在我初始化 server.js 后,我应该在 localhost 上访问哪个地址才能访问初始 html 页面?我应该将其更改为.listen(index.html)或类似的内容吗?

  3. 我如何实现这个(使用.responsetext等)还有其他明显的问题吗?

(对不起,多问题的帖子很长,但各种教程和 node.js 源代码都假设用户已经了解这些东西。)

5个回答
  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' module来解析请求。

  2. 您正确调用listen()但错误地编写了响应。首先,如果您希望在导航到http://localhost:8001/时提供 index.html ,您需要使用response.write()将文件的内容写入响应response.end()首先,您需要包含fs=require('fs')以访问文件系统。然后,您需要实际提供文件。

  3. 如果您异步使用 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()的!!!

应该要求 ('url') 吗?
2021-03-19 05:44:57
嗨与号,你能分享我使用 ajax 调用的相同代码吗?
2021-04-06 05:44:57
第一段真好。我已经习惯于编写自己的 .php 文件,并将 XMLHttpRequest 用于那些我忘记可以直接向服务器发出请求的 .php 文件。
2021-04-09 05:44:57

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)

https://expressjs.com

如果您在客户端使用 jQuery,您可以执行以下操作:

$.get("/string", function(string) {
    alert(string)
})

我遇到了由&符号提供的代码(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' : '*'});

这是您尝试完成的功能的完整示例。我在 hyperdev 而不是 jsFiddle 中创建了示例,以便您可以看到服务器端和客户端代码。

查看代码:https : //hyperdev.com/#!/ project/ destiny-authorization

查看工作申请:https : //destiny-authorization.hyperdev.space/

此代码为返回随机字符串的 get 请求创建处理程序:

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 请求并从服务器接收随机字符串。

$.get("/string", function(string) {
  $('#txtString').val(string);
});

请注意,此示例基于 Jamund Ferguson 的答案中的代码,因此如果您觉得这很有用,请务必也给他点赞。我只是认为这个例子会帮助你了解一切是如何组合在一起的。

RESTful API(路由):

rtr.route('/testing')
.get((req, res)=>{
    res.render('test')
})
.post((req, res, next)=>{
       res.render('test')
})

AJAX 代码:

$(function(){
$('#anyid').on('click', function(e){
    e.preventDefault()
    $.ajax({
        url: '/testing',
        method: 'GET',
        contentType: 'application/json',
        success: function(res){
            console.log('GET Request')
        }
    })
})

$('#anyid').on('submit', function(e){
    e.preventDefault()
    $.ajax({
        url: '/testing',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            info: "put data here to pass in JSON format."
        }),
        success: function(res){
            console.log('POST Request')
        }
    })
})
})
node.js 需要 Ajax 请求
2021-03-23 05:44:57