Getting AJAX to Work With JavaScript

Question

Just to point out, I know how to do this with jQuery and AngularJS. The project I am currently working on requires me to use plain JavaScript.

I'm trying to get AJAX to work with just plain JavaScript. I am using Java/Spring for backend programming. Here is my JavaScript code:

/** AJAX Function */
ajaxFunction = function(url) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.status == 200) {
            var JSONResponse = JSON.parse(xhttp.responseText);
            return JSONResponse;
        }
    }
    xhttp.open('GET', url, true);
    xhttp.send();
}

/** Call Function */
searchResults = function() {
    var test = ajaxFunction('http://123.456.78.90:8080/my/working/url');
    console.log(test);
}

/** When the page loads. */
window.onload = function() {
    searchResults();
}

It's worth noting that when I go directly to the URL in my browser's address bar (example, if I go directly to the link http://123.456.78.90:8080/my/working/url), I get a JSON response in the browser.

When I hover over xhttp.status, the status is saying 0, not 200, even though I know that the link I am calling works. Is this something that you have to set in Spring's controllers? I didn't think that was the case because when I inspect this JS URL call in the Network tab, it states that the status is 200.

All in all, this response is coming back as undefined. I can't figure out why. What am I doing wrong?

I have some experience with JavaScript, so I definitely wouldn't categorize myself as having "no clue". My question was specifically about AJAX. I never said jQuery would replace JavaScript, either. I've asked JavaScript questions on SO before, and a common response is that whatever I'm trying to do is easier to do in jQuery which is why I made my first statement. Your comment is rude and nonconstructive. If this question really brought out that amount of resentment, then you could have went without responding at all. — aCarella
– aCarella, Commented Jul 6, 2016 at 20:42
Take a look at the Network tab in your browser console and see the nature of the GET request when you browse to it. In particular, look at the request headers. You may have to explicitly set the mime type, for instance. Then, just emulate what your browser is doing successfully in your JavaScript request. Is it a public URL? Can you post it, if so? — ManoDestra
– ManoDestra, Commented Jul 6, 2016 at 21:03

Neil Mountford · Accepted Answer · 2016-07-06 21:11:16Z

1

An XMLHttpRequest is made asynchronously meaning that the request is fired off and the rest of the code continues to run. A callback is provided and when the asynchronous operation completes the callback function is called. The onreadystatechange function is called upon completion of an AJAX request. In your example the ajaxFunction will return immediately after the xhttp.send() line executes, so your var test won't have the JSON in it as I assume you expect.

In order to do something when an AJAX request completes you need to use a callback function. If you wanted to log the result to the console as above you could try something like the following:

var xhttp;

var handler = function() {
    if(xhttp.readyState === XMLHttpRequest.DONE) {     
        if (xhttp.status == 200) {
            var JSONResponse = JSON.parse(xhttp.responseText);
            console.log(JSONResponse);
        }
    }
};

/** AJAX Function */
var ajaxFunction = function(url) {
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = handler;
    xhttp.open('GET', url, true);
    xhttp.send();
};    

/** Call Function */
var searchResults = function() {
    ajaxFunction('http://123.456.78.90:8080/my/working/url');
};

/** When the page loads. */
window.onload = function() {
    searchResults();
};

If you want to learn more about how XMLHttpRequest works then MDN is a much better teacher than I am :)

edited Jul 6, 2016 at 21:11

answered Jul 6, 2016 at 20:16

Neil Mountford

2,0213 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aCarella Over a year ago

Do I have to call the callback function anywhere? I see it as a parameter in ajaxFunction. Where do I use it?

Neil Mountford Over a year ago

My apologies, the callback parameter isn't needed in this case, I forgot to remove it. Though you could pass the callback function in to your Ajax function if you wanted to do it that way too

Collectives™ on Stack Overflow

Getting AJAX to Work With JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related