CODEWITHSUNDEEP
ajaxnode.jsrequestresponse
zhang_rick
zhang_rick

Reputation: 123

ajax live search with node.js

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);

Upvotes: 2

Views: 2859

Answers (1)

Sarim Javaid Khan
Sarim Javaid Khan

Reputation: 830

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.

Upvotes: 1

Related Questions