CODEWITHSUNDEEP
javascriptnode.jsajaxexpress
Bradley William Elko
Bradley William Elko

Reputation: 364

Node.js Doesn't Recognize Ajax Request

I am trying to make a private page dedicated to an Ajax request. Here is the simple request. 

window.onload = loaded;

function loaded(){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/data_annotations', true);
    xhr.onload = function(){
        if(this.status == 200){
            var data = xhr.responseText;
            console.log(JSON.parse(data));
        } else {
            console.log("Rip");
        }
    }
    xhr.send(); 
    //httpreq.abort();
}

Here is the node.js that it's running off of:

...
app.get('/', function(req, res, next){
    console.log("Connected Successfully.");
    res.render('home');
});

app.get('/data_annotations', function(req, res, next){
    if(req.xhr || req.headers.accept.indexOf('json') > -1) {
        const mc = mongo.MongoClient;  
        const url = 'mongodb://localhost:27017/';
        const dbName = 'practiceMDB';
        console.log("Got Data Annotations.");

        mc.connect(url, { useNewUrlParser: true }, (err, client) =>{
            if(err){
                console.log(err);
            } else {
                const db = client.db(dbName);
                data = db.collection('DataAnnotations');
                data.find({}).toArray(function(err, data){
                    res.send(data)
                });
                client.close();
            }
        });
    } else {
        res.redirect('/');
    }  
});

app.listen(port, function(){
    console.log('Server Started on Port '+port);
});

I only want /data_annotaion to run if it's from the Ajax request. If a user types in /data_annotations in the url, it should redirect them to the home page. When I ran this I got these results:

Server Started on Port 3000
Connected Successfully.
Connected Successfully.

This is indicating (to me) that the ajax request isn't registering as an ajax request, and is registering as a normal request. Further, I am getting this error: 

Uncaught SyntaxError: Unexpected token < in JSON at position 0

I believe it is due to the redirection. The Ajax request gets redirected, it takes the response of the home page and is unable to parse it (I believe this to be happening because it cannot parse HTML text or string text - don't quote me on that). How do I get Node JS to register my Ajax request?

PS: I looked at this answer to determine if a request is Ajax or not, but it always determines my requests as not Ajax: https://stackoverflow.com/a/28540611/6804700

Upvotes: 0

Views: 307

Answers (1)

RedJandal
RedJandal

Reputation: 1213

First thing - In your client-side code you need to set the accept header, because that is what you are looking for in your server side code.

xhr.setRequestHeader("accept", "application/json");

Second you can use the following code to return the data as json in your server side code

res.json(data);

Another comment. It is bad practice to change the result type or redirect in an API. Your url is either returning JSON or redirecting to and HTML page which means the result is not consistent.

Upvotes: 2

Related Questions