How can I load and display webpage contents asynchronously with Node.js and Express?

Being a beginner with JavaScript and related frameworks, I'm sorry if my question seems stupid.

Anyway... Are there some native techniques for load and display webpage contents asynchronously with Node.js and Express? Should it be used the XMLHttpRequest object for the purpose or exist better alternatives?

Best regards, Vi.

I can help you with the first section of your question, like @JohnnyHK said, it's to broad issue. What i'm going to explain here is how to load the raw data of a webpage using node.js and express and send it back to the client inside a json object.

Lets start with our request

Our goal is to enter the following URL in the browser and get the raw data (html source) of the page: http://localhost:8080/www.yahoo.com

  • http://localhost:8080 - Where our node.js/express server is running
  • www.yahoo.com - The DOMAIN of the site that we want to get the source from - http:// is not needed

And now, to the server code

Note that this is a very simple/basic server, so you better improve it in your side

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

This is it, mow you can combine this solution with a jsonp and you are good to go...

Client side

Lets use a jQuery jsonp request to get the data:

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

The second part of your question is about how to display the data in the client, my suggestion is to create an iframe and inject the raw data into it, you will have some problems in the way (like relative css and javascript file paths) but I hope you now have a start point...

Cheers :)

UPDATE

One more thing.. this example works only for http protocol websites... if you want to get the data from a https website you need to use the https module instead of the http ( var https = require('https'); ) and in the options, use port 443...

I'm not 100% sure what your question is, but I'm guessing you're looking for a way to get data on the server side for asynchronous requests on the client side.

In express, in your router, after you've retrieved some data, use the following to send back a JSON object that your javascript can use on the client side:

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

The best way to learn this is probably to do a google search for an example that uses the technologies you want to use. For instance, I just did a google search for Express Mongoose JSON (where Mongoose is the Data Model for the MongoDB database) and I found this: A simple Node.js web application that uses Mongoose, Express and MongoDB and returns JSON

There are alternative frameworks for Node (other than Express), and there are other databases as well, so there are many ways to accomplish what you're asking for. Also, the client-side has frameworks to make things easier as well, like JQuery.