javascript XMLhttpRequest 与带有 express 的节点 js 服务器

XMLhttpRequest with a node js server with express

提问by Harald Hoerwick

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:

出于我不知道的原因，我无法在节点 js 和 express 中创建的本地服务器中使用 xmlhttprequest。让我告诉你......这是节点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!".

它运行得很好！当我访问 localhost:4003/count 我看到“你好！”。

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

现在服务器已经OK了，让我们检查一下html页面：

<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/countas 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.statuswith an alert()it shows '0'. (but the page open normally in any browser)

• 更改localhost:4003/count为变量的值cam，对于http://localhost:4003/count，127.0.0.1:4003/count。
• 在 Firefox、Safari 和 Chrome 中打开。
• 当我尝试查看它xmlhttp.status时，alert()它会显示 ' 0'。（但页面在任何浏览器中都能正常打开）

回答by Jonathan Lonowski

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:4003as a directory name.

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

  So, if you're trying to use file://for the page, this won't typically work well. The FILEprotocol 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 fileitself.

  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 countnow served from the same origin, the URL can simply be relative-from-root:

  var cam = "/count";
  

• 在 URL 中包含主机时，它需要以//.

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

  否则，它将被视为localhost:4003具有目录名称的相对路径。

• 使用 Ajax 时，您还必须处理同源策略。

  因此，如果您尝试使用file://该页面，这通常不会很好地工作。该FILE协议没有起源，因此无法通过SOP，导致类似以下错误：

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

  最简单的解决方案是也从应用程序提供页面。

  您可以使用static()中间件来做到这一点。

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

  或者使用另一个发送文件本身的路由。

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

  然后，从以下位置访问该页面：

  http://localhost:4003/
  

• 此外，由于页面和countnow 来自同一来源，URL 可以简单地是相对于根的：

  var cam = "/count";
  

回答by Morgan ARR Allen

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

在你尝试alert(resp)的时候resp变量还没有被赋值，因为onreadystatechange还没有被调用。如果您将警报移动到onreadystatechange您应该获得所需的效果。这也是您可以将该值分配给Element页面中的一个点。