CODEWITHSUNDEEP
javascriptajaxnode.js
Sahebjot Singh
Sahebjot Singh

Reputation: 11

Post happening multiple times for ajax javascript, nodejs,expressjs

Its a simple todo list, I wanted to try it in ajax from javascript.

app.js

var express=require('express');
var MongoClient=require('mongodb').MongoClient;
var db;
MongoClient.connect("mongodb://admin:[email protected]:10070/todo",function(err,database){
    if(!err){
        console.log("We are connected");
        db=database;
    }
});
var app=express();
app.use(express.static(__dirname+'/views'));
app.use(express.bodyParser());
app.use(express.logger('dev'));
app.set('title','todo');
app.engine('jade',require('jade').__express);

// for home page of the website
app.get('/',function(req,res){
    res.render(index);
});
app.post('/additem',function(req,res){
    db.collection('todo').insert({'item':req.body.item},function(err,result){
    });
    console.log(req.body.item);
});
app.get('/list',function(req,res){
    db.collection('todo').find().toArray(function(err,items){
        res.send({'items':items});
    });
});
var server = app.listen(3000,function(){
    console.log("Listening on port %d",server.address().port);
});

index.html

<html>
<head>
<script>
function dataSend(e){

    var listItem=document.getElementById('item').value;
    var xmlhttp;
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }
    else{
        xmlhttp=ActiveXObject("Microsoft.XMLHttp");
    }
    xmlhttp.open('post','/additem',true);   
    xmlhttp.setRequestHeader("Content-type","application/json;charset=UTF-8");
    xmlhttp.send(JSON.stringify({"item":listItem}));
}
function receive(){
    var xmlhttp;
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }
    else{
        xmlhttp=ActiveXObject("Microsoft.XMLHttp");
    }
    xmlhttp.onload=function(){
        var jlist=JSON.parse(xmlhttp.responseText);
        var arr=jlist.items;
        var parent=document.getElementById('items');
        var node;

        for(var i=parent.children.length;i<arr.length;i++){         
            var li=document.createElement('li');
            node=document.createTextNode(arr[i].item);
            li.appendChild(node);
            parent.appendChild(li);
        }
    }

    xmlhttp.open('get','/list',true);
    xmlhttp.send();
}
</script>
</head>
<body>
    <div id="container">
        <div id="input">
            <input id="item" type="text"/>
            <input type="button" value="Add" onclick="dataSend()"/>
        </div>
        <div id="items">
            <input type="button" value="current list" onclick="receive()"/>

        </div>
    </div>
</body>
</html>

index.jade

include index.html

Problem is around every 2 minutes same values gets sent again to the server, why is it happpening and how to prevent this? http://prntscr.com/3nae0e

Upvotes: 1

Views: 365

Answers (1)

dezinezync
dezinezync

Reputation: 3012

I believe this happens due to express hanging onto the request, even after you've processed it since you don't send out a response. Sending out a response removes the request from the stack and this should no longer happen.

Upvotes: 1

Related Questions