0

JavaScriptと関連するフレームワークの初心者なので、私の質問がばかげているように思われる場合は申し訳ありません。

とにかく...Node.jsとExpressを使用してWebページのコンテンツを非同期にロードおよび表示するためのネイティブテクニックはありますか？目的のためにXMLHttpRequestオブジェクトを使用する必要がありますか、それともより良い代替手段が存在する必要がありますか？

よろしく、Vi。

4

2 に答える 2

6

@JohnnyHKが言ったように、私はあなたの質問の最初のセクションであなたを助けることができます、それは広い問題です。ここで説明するのは、node.jsを使用してWebページの生データをロードし、それを表現してjsonオブジェクト内のクライアントに送り返す方法です。

私たちのリクエストから始めましょう

私たちの目標は、ブラウザに次のURLを入力し、ページの生データ（htmlソース）を取得することです。http://localhost:8080/www.yahoo.com

  • http://localhost:8080-node.js/expressサーバーが実行されている場所
  • www.yahoo.com-ソースを取得したいサイトのドメイン-http：//は必要ありません

そして今、サーバーコードに

これは非常にシンプルで基本的なサーバーであるため、自分の側で改善する方がよいことに注意してください

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ます。

クライアント側

jQueryjsonpリクエストを使用してデータを取得しましょう。

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 :)
            }
        }
    });
}

質問の2番目の部分は、クライアントでデータを表示する方法についてです。私の提案は、iframeを作成し、それに生データを挿入することです。途中でいくつかの問題が発生します（相対的なcssやjavascriptファイルパスなど）が、私はあなたが今出発点を持っていることを願っています...

乾杯 ：）

アップデート

もう1つ..この例はhttpプロトコルWebサイトでのみ機能します...Webサイトからデータを取得する場合は、 （）の代わりにモジュールhttpsを使用する必要があり、では、ポート443を使用します...httpshttpvar https = require('https');options

于 2012-10-15T17:13:50.673 に答える
0

あなたの質問が何であるかは 100% わかりませんが、クライアント側の非同期要求に対してサーバー側でデータを取得する方法を探していると思います。

Expressでは、ルーターでデータを取得した後、次を使用して、JavaScript がクライアント側で使用できる JSON オブジェクトを送り返します。

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

これを学ぶ最善の方法は、使用したいテクノロジーを使用する例をグーグルで検索することでしょう。たとえば、Express Mongoose JSON (Mongoose は MongoDB データベースのデータ モデル) を Google で検索したところ、次のようなことがわかりました。

Node には (Express 以外の) 代替フレームワークがあり、他のデータベースもあるため、求めていることを達成する方法はたくさんあります。また、クライアント側には、JQuery など、物事を簡単にするためのフレームワークもあります。

于 2012-10-15T17:46:40.470 に答える