weixin_33724059 2015-03-18 11:34 采纳率: 0%
浏览 46

使用node.js进行ajax实时搜索

I'm new to node.js. Now I'm trying to write a simple website where users can input something for the server to process, and receive a result, e.g. search for something.

I try to implement it as follows:

  1. write the index.html

  2. write the server.js, it creates a server, and display the index page using var index = fs.readFileSync('index.html'); response.end(index);

  3. add ajax codes in index.html, to receive input from users and send it to the server

  4. the last step will be adding codes in server.js, which processes the request and send a result to ajax to display it.

My question is about step 4. In the server.js, when it receives ajax request, should it somehow add the result to the index.html file, and send back usingresponse.end(index), OR send back only the result? If the latter one, which I tried, it will send both the index.html page and the result. But I only want the result.

Below is the two files index.html and server.js:

index.js

<!DOCTYPE html>
<html>
<!-- Client search using Ajax -->

<head>
    <title>live search</title>
    <script>
        function getResults(query) {
        if (query.length===0) { 
        document.getElementById("results").innerHTML="";
        return;
      }
      if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      } else {  // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.open("GET","http://127.0.0.1:2000/search?"+query,true);
      xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
          document.getElementById("results").innerHTML=xmlhttp.responseText;
        }
      };
      xmlhttp.send();
    }
    </script>
</head>
<body>
    <hr>
    <input type="text" id="search" onkeyup="getResults(this.value)"/>
    <br>
    <div id="results">
    </div>      
</body>
</html>

server.js

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

var url = require('url');

http.createServer(function (req, res) {
res.writeHead(200, {'ContentType': 'text/html'});
res.end(index);

//codes for request processing
result="";
var path = url.parse(req.url).pathname;
console.log(path);
if (path.length!==0) {
    result = "I'm the result";
}
res.write(result);

}).listen(2000);
  • 写回答

1条回答 默认 最新

  • elliott.david 2015-03-18 12:34
    关注

    If I understood your question correctly. You want to send data between index.html and server.js on runtime.

    For that, you need to use socket.io library.

    For client(index.html) use client side library for socket.io like following.

    <script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

    Now If you want to send the data which you get in index.html(client) then you can send it to server using 

    socket.emit("EventName",{"data1": value1 , "data2" : value2 , [...]})

    Then you can receive it on server using event listeners like.

    socket.on("EventName",function(data){ 
//here you can use "data" parameter that contains values sent from client 
});

    This was the client to server send/receive scenario. For server to client, do the same thing i.e use socket.emit() on server to send to client and socket.on() at client to receive from server.

    评论

报告相同问题？

悬赏问题

  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog