javascript - XMLhttpRequest with a node js server with express - Stack Overflow

admin管理员组

文章数量:1344238

for a reason that i don't know i can't use the xmlhttprequest in my local server created in node js and express. Let me show you... Here is the server in node JS:

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

app.get('/count', function(req, res) {
    res.type('text/plain');
    res.write('Hello!')
     res.end();
});

app.listen(4003);

And it runs jus fine! when i acess localhost:4003/count i see "Hello!".

Now that the server is O.K, let's check the html page:

<script>

var xmlhttp = new XMLHttpRequest();
var resp = ""
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        resp = xmlhttp.responseText;
        }
}

var cam = "localhost:4003/count"


function show(){
    xmlhttp.open("GET",cam,  true);
    xmlhttp.send();
    alert(resp);
}

</script>

<center><h1><div style="color:#339966"> <input type="button" value="Return of /count" onclick="javascript:show()"> </div> </h1>

So, it just don't work =[, i've already tried to:

• change localhost:4003/count as value of the variable cam, for http://localhost:4003/count, 127.0.0.1:4003/count.
• Open in Firefox, Safari and Chrome.
• When i try to see the xmlhttp.status with an alert() it shows '0'. (but the page open normally in any browser)

for a reason that i don't know i can't use the xmlhttprequest in my local server created in node js and express. Let me show you... Here is the server in node JS:

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

app.get('/count', function(req, res) {
    res.type('text/plain');
    res.write('Hello!')
     res.end();
});

app.listen(4003);

And it runs jus fine! when i acess localhost:4003/count i see "Hello!".

Now that the server is O.K, let's check the html page:

<script>

var xmlhttp = new XMLHttpRequest();
var resp = ""
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        resp = xmlhttp.responseText;
        }
}

var cam = "localhost:4003/count"


function show(){
    xmlhttp.open("GET",cam,  true);
    xmlhttp.send();
    alert(resp);
}

</script>

<center><h1><div style="color:#339966"> <input type="button" value="Return of /count" onclick="javascript:show()"> </div> </h1>

So, it just don't work =[, i've already tried to:

• change localhost:4003/count as value of the variable cam, for http://localhost:4003/count, 127.0.0.1:4003/count.
• Open in Firefox, Safari and Chrome.
• When i try to see the xmlhttp.status with an alert() it shows '0'. (but the page open normally in any browser)

• javascript
• node.js
• express

Share Improve this question Follow edited Sep 24, 2014 at 12:10 DB5 14k77 gold badges6868 silver badges7272 bronze badges asked Aug 24, 2013 at 1:28 Harald HoerwickHarald Hoerwick 14811 gold badge11 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Along with the timing issues that Morgan already covered...

• When including a host in a URL, it needs to be prefixed by //.

  var cam = "//localhost:4003/count";
  

  Otherwise, it'll be treated as a relative path with localhost:4003 as a directory name.

• You also have to deal with the Same-Origin Policy when using Ajax.

  So, if you're trying to use file:// for the page, this won't typically work well. The FILE protocol doesn't have an origin, so it can't pass the SOP, resulting in errors similar to:

  Origin null is not allowed by Access-Control-Allow-Origin.
  

  The easiest solution is to also serve the page from the application.

  You can do so either with a static() middleware.

  // `GET /` will serve `./public/index.html`
  app.use(express.static(__dirname + '/public'));
  

  Or with another route that sends the file itself.

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

  Then, access the page from:

  http://localhost:4003/
  

• Also, with both the page and the count now served from the same origin, the URL can simply be relative-from-root:

  var cam = "/count";
  

At the time you are trying to alert(resp) the resp variable hasn't been assigned, because onreadystatechange has not been called. If you moved the alert into onreadystatechange you should get the desired effect. This is also the point you could assign that value to an Element in the page.

本文标签： javascriptXMLhttpRequest with a node js server with expressStack Overflow