如何在xmlhttp.open（）中設置參數「url」，當我想使用Ajax與node.js發送/接收請求時

server.js可以產生隨機數。所以現在我想從服務器獲得的隨機數，並使用xmlhttp發送請求。但是當我加載http://localhost:3000/index.html時，字符串的值沒有改變。發生什麼事？如何在xmlhttp.open（）中設置參數「url」，當我想使用Ajax與node.js發送/接收請求時

index.js如下所示：

$(document).ready(function() { 
    getRandomNum(); 
}); 

function getRandomNum() { 
    $(".button").each(function() { 
     var that = $(this); 
     that.click(function() { 
      var span = $("<span></span>").addClass("unread"); 
      that.append(span); 
      span.text("..."); 
      server(span); 
     }); 
    }); 
} 

function server(span) { 
    var string; 
    var xmlhttp = new XMLHttpRequest(); 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     string = xmlhttp.responseText; 
    } 
    xmlhttp.open("GET","http://localhost:3000/", true); 
    xmlhttp.send(); 
    span.text(string); 
}

server.js顯示如下：

var http = require('http'); 
var url = require('url'); 
var path = require('path'); 
var fs = require('fs'); 
var port = 3000; 

http.createServer(function(req,res) { 
    var pathname = url.parse(req.url).pathname; 
    var mimeType = getMimeType(pathname); 
    if (!!mimeType) { 
     handlePage(req, res, pathname); 
    } else { 
     handleAjax(req, res); 
    } 
}).listen(port, function(){ 
    console.log('server listen on ', port); 
}); 

function getMimeType(pathname) { 
    var validExtensions = { 
    ".html" : "text/html", 
    ".js": "application/javascript", 
    ".css": "text/css", 
    ".jpg": "image/jpeg", 
    ".gif": "image/gif", 
    ".png": "image/png" 
    }; 
    var ext = path.extname(pathname); 
    var type = validExtensions[ext]; 
    return type; 
} 

function handlePage(req, res, pathname) { 
    var filePath = __dirname + pathname; 
    var mimeType = getMimeType(pathname); 
    if (fs.existsSync(filePath)) { 
     fs.readFile(filePath, function(err, data){ 
     if (err) { 
      res.writeHead(500); 
      res.end(); 
     } else { 
      res.setHeader("Content-Length", data.length); 
      res.setHeader("Content-Type", mimeType); 
      res.statusCode = 200; 
      res.end(data); 
     } 
     }); 
    } else { 
    res.writeHead(500); 
    res.end(); 
    } 
} 

function handleAjax(req, res) { 
    var random_time = 1000 + getRandomNumber(2000); 
    var random_num = 1 + getRandomNumber(9); 
    setTimeout(function(){ 
     res.writeHead(200, {'Content-Type': 'text/plain'}); 
     res.end("" + random_num); 
    }, random_time); 
} 

function getRandomNumber(limit) { 
    return Math.round(Math.random() * limit); 
}

來源

2016-11-18 Nicholas Liao

當Ajax返回響應時，在瀏覽器控制檯中看到什麼錯誤/消息？ –

只有在收到來自服務器的響應後，才應更新文本。您可以將該更新語句放入檢查請求狀態的if塊中。我更喜歡jQuery的ajax方法。 –

@MohitBhardwaj我認爲問題存在，由於網址，我想知道什麼時候我加載http：// localhost：3000/index.html –

在你server(span)方法，初始化發送請求，並立即在該行xmlhttp.send();之後通過span.text(string)將空字符串分配給跨度。

從服務器收到響應（隨機數）後，您將同樣分配給變量string = xmlhttp.responseText;，但不會將其更新爲span。

另外，您還沒有處理onreadystatechange方法中的響應。

我修改了下面的代碼。我創建了一個測試應用程序並進行了相同的測試。它按照你的預期工作。

function server(span) { 
      var string; 
      var xmlhttp = new XMLHttpRequest(); 
      xmlhttp.onreadystatechange= function(){ 
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
        string = xmlhttp.responseText; 
        span.text(string); 
       } 
      }; 
      xmlhttp.open("GET","http://localhost:3000/", true); 
      xmlhttp.send(); 
     }

來源

2016-11-18 10:21:47 Aruna

如何在xmlhttp.open（）中設置參數「url」，當我想使用Ajax與node.js發送/接收請求時

回答

相關問題