Question

作为JavaScript和相关框架的初学者，如果我的问题看起来很愚蠢，我很抱歉。

无论如何......是否有一些本地技术可以加载和显示与Node.js和Express异步的网页内容？是否应该将XMLHttpRequest对象用于此目的或存在更好的替代方案？

最好的问候，Vi。

Answer 1

我可以帮助你解决问题的第一部分，比如@JohnnyHK说，这是一个广泛的问题。我在这里要解释的是如何使用node.js加载网页的原始数据并表达并将其发送回json对象内的客户端。

让我们从我们的请求开始

我们的目标是在浏览器中输入以下网址并获取网页的原始数据（html来源）：http://localhost:8080/www.yahoo.com

http://localhost:8080 - 我们的node.js / express服务器正在运行
www.yahoo.com - 我们想要从 - http：//获取源代码的网站的DOMAIN

现在，到服务器代码

请注意，这是一个非常简单/基本的服务器，因此您可以更好地改进它

var http    = require('http');        // the http `native` module of node
var express = require('express');     // the express :)
var app = express();              // creating the server...

app.enable("jsonp callback");         // enable jsonp callbacks
app.listen(8080);                     // listening to port 8080.


app.get('/:domain', function(req, res){  // each request to the pattern `http://localhost:8080/URL_HERE

    // building the http `options` param
var options = {
    host: req.params.domain,     // the host will be the `domain` we sent
    port: 80,                 // the port the website is running on (basically post 80)

    path: '/',                // the path, now, this is important to pages inside
                              // the website, if you want the source of 
                              // `http://www.website.com/path/to/page.html` you better
                              // transfer `/path/to/page.html` as another param to the
                              // request and put it here
    method: 'GET'             // well, you know...
}

var buffer = '';                            // i'm creating a buffer to hold the data
http.get(options, function(httpres){        // creating the request with a callback function
    httpres.setEncoding('utf8');            // setting the encoding for the data...
    httpres.on('data', function(chunk){     // listening to the `data` event, each chunk will get into this function
        buffer += chunk;                    // saving the data...
    });
    httpres.on('end', function(){       // listening to the `end` event will be raised when we got all the raw data
        res.json({                      // this is it, now we are sending a response to the client as a json
            success: true,
            data: buffer
            });
        });
    });
});

就是这样，刈割你可以将这个解决方案与jsonp结合起来，你很高兴...

客户端

让我们使用jQuery jsonp请求来获取数据：

function loadData (domain) {
    $.ajax({
        url: 'http://localhost:8080/' + domain
        cache: false,
        dataType: 'jsonp',
        jsonp: 'callback',
        data: { },
        success: function (response) {
            if(response.success) {
                console.log(response.data); // `response.data` holds the html
                                            // data from the server, do what you want :)
            }
        }
    });
}

你问题的第二部分是关于如何在客户端显示数据，我的建议是创建一个iframe并将原始数据注入其中，你会遇到一些问题（如相对css和javascript文件）路径）但我希望你现在有一个起点...

干杯：）

<强>更新

还有一件事......此示例仅适用于http协议网站...如果您想从https网站获取数据，则需要使用https模块在http（var https = require('https');）和options中，使用端口443 ......

Answer 2

我不是100％确定你的问题是什么，但我猜你正在寻找一种方法来在服务器端获取客户端异步请求的数据。

在express中，在您的路由器中，在检索到某些数据后，使用以下内容发回您的javascript可以在客户端使用的JSON对象：

res.send(JSON.stringfy(data));

了解这一点的最佳方式可能是谷歌搜索使用您想要使用的技术的示例。例如，我刚刚搜索了Express Mongoose JSON（其中Mongoose是MongoDB数据库的数据模型），我发现了这个：A simple Node.js web application that uses Mongoose, Express and MongoDB and returns JSON

Node有其他框架（Express除外），还有其他数据库，所以有很多方法可以实现你所要求的。此外，客户端还有一些框架可以使事情变得更容易，比如JQuery。

如何与Node.js和Express异步加载和显示网页内容？

2 个答案: