Ed Akhmetshin
Ed Akhmetshin

Reputation: 173

Unexpectedly blank Ajax response text

I try to test my Ajax code with Node.js. I didn't use it before, so I'm newbie. Here's my code:

<script>
  var xmlHttp = false;
    /*@cc_on @*/
    /*@if (@_jscript_version >= 5)
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
        xmlHttp = false;
      }
    }
    @end @*/

  if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
  }

  function callServer() {
    var url = "http://localhost:8888/";
    xmlHttp.open("GET", url, true);
    xmlHttp.onreadystatechange = updatePage;
    xmlHttp.send(null);
  }

  function updatePage() {
    if (xmlHttp.readyState == 4) {
      var response = xmlHttp.responseText;
      alert(response);
    }
  }
</script>

And my Node.js server:

var http = require("http");

http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Test");
  response.end("Test");
}).listen(8888);

I run the script with attribute: onclick="callServer()". And alert shows me nothing. Thank you.

Upvotes: 1

Views: 326

Answers (2)

Manohar Reddy Poreddy
Manohar Reddy Poreddy

Reputation: 27495

Try these changes:

  1. Change

xmlhttp.send(null); to xmlhttp.send();

  1. Change

var xmlHttp = false; to var xmlHttp = null;

  1. Change if else to as below:

if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');}

  1. Below looks redundant, you may want to comment it:
    // response.write("Test");

  2. Make sure node is running.

Best of luck.

Upvotes: 0

Andrey
Andrey

Reputation: 1553

Your code works fine, the problem is that you are running your client on diffrent domain or port then your server runs.

Try to run your client on http://localhost:8888/.

EDIT:

It's very simple with Express package:

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

app.get('/', function(req, res) {
  res.send('Test');
});

app.get('/index.html', function(req, res) {
  res.sendfile('index.html');
});

app.listen(8888, function() {
  console.log('Server started at port 8888');
});

EDIT#2

Without Express:

var http = require('http'),
    fs   = require('fs');    

var server = http.createServer(function(req, res) {
  fs.readFile('./index.html', function(err, data) {
    res.writeHeader(200, { 'Content-Type': 'text/html' });
    res.write(data);
    res.end();
  });
}).listen(8888);

server.on('request', function(req, res) {
  if(req.url == '/test') {
    res.writeHeader(200, { 'Content-Type': 'text/plain' });
    res.write('Test');
    res.end();
  }
});

EDIT#3

To serve static assets use express.static middleware like this:

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

app.use(express.static(__dirname + '/public'));

You should place your assets to the public directory in the root.

Upvotes: 2

Related Questions