AJAX request on Node.js server

Question

I am unable to make an AJAX request from my .html page to my node.js server for a JSON file. I've been reading on AJAX requests, but all I am able to make out is how to display the servers responseText.

It would be great if you could help me out, it would be even better if you could link me some tutorials on this, anyway this is what I've got at this moment:

server.js

var express = require('express');
var fs = require('fs');
var app = express();

app.get('/test', function(req, res){
    var arr = new Array();
    var rd = readline.createInterface({
        input: fs.createReadStream('info.json'),
        output: process.stdout,
        terminal: false
    });
 
    rd.on('line', function(line) {
        arr.push(line);
    }).on('close', function(){
        res.send(arr);
    });
});

app.get('/', function(req, res) {
    fs.readFile('test2.html',function (err, data){
        res.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
        res.write(data);
        res.end();
    });
});

app.listen(process.env.PORT || 3000);

test.html

<html>
    <head>
        <script>
            function sendAjax(){
                var xmlHttp = new XMLHttpRequest();

                xmlHttp.onreadystatechange = function(){
                    if(xmlHttp.readyState==4 && xmlHttp.status == 200){
                        console.log(xmlHttp.responseText);
                    }
                    document.getElementById("myDiv").innerHTML=xmlHttp.responseText;
                }

                xmlHttp.open("GET", "/test", true);
                xmlHttp.send();
            }
         </script>
    </head>

    <body>
        <input type="submit" onClick="sendAjax()" value="SendAjax" />
        <div id="myDiv"><h2>Let AJAX change this text</h2></div>
    </body>
</html>

I know this may not look like much, I've been struggling with this, and the book I have (Node.js in Action) doesn't help me alot. But as I said, what I want is to display the .json info in the browser. Thx for reading

What's the problem? Do you get any errors in the JS console? Does your browser's developer tools Net tab show the HTTP request being sent? Does it show the response? Are they what you expect? — Quentin
– Quentin, Commented Feb 12, 2014 at 12:01
+1 to @Quentin's comment. Is it working when you open it on the browser directly? — Salvatorelab
– Salvatorelab, Commented Feb 12, 2014 at 12:55

Oleg · Accepted Answer · 2014-02-12 13:38:53Z

1

If I understand right, you may replace

document.getElementById("myDiv").innerHTML=xmlHttp.responseText;

with

var parsed = JSON.parse(xmlHttp.responseText);
var html = '';
for (var i = 0; i < parsed.length; i++) {
    html += '<div>' + parsed[i] + '</div>';
}
document.getElementById("myDiv").innerHTML = html;

You may also try to replace

res.send(arr);

with

res.json(arr);

Update
Or maybe you just forgot to write this line in the beginning of server.js:

var readline = require('readline');

edited Feb 12, 2014 at 13:38

answered Feb 12, 2014 at 12:57

Oleg

23.5k10 gold badges72 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AJAX request on Node.js server

server.js

test.html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

server.js

test.html

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related