Is a get request possible with javascript?

Question

I was wondering if it was possible to make a GET request with javascript, so it can update text without refreshing the page.

If this is possible, how can I make a get request with javascript & get the result/decode it from json?

I tried this from a past question:

function updateButton(){

    var xmlHttp = null;

    xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", "http://xxxx.com/getSpecialSale.php", false);
    xmlHttp.send(null);
    document.getElementById("dicebutton").innerHTML=xmlHttp.responseText;
}

And, it completely stops the main thread, making the website unresponsive. What is wrong?

Async is set to false (third param of .open), so it will lock up the UI until it completes. Your code will need modification to work with async true. — James
– James, Commented Jun 2, 2017 at 21:10
Yes - But why would aysnc be needed to GET data? It is not performance I'm worried about, the script is not working even though it should on the main thread. — JavaC3code
– JavaC3code, Commented Jun 2, 2017 at 21:13
AJAX requests should be asynchronous. Fix that first. Is there any problem after that? — David
– David, Commented Jun 2, 2017 at 21:15
Please don't edit your question to remove the question; I've rolled it back to the original version as your edit invalidated all answers. If you no longer want this question associated with your account please use the "contact us" link in the footer of the page to contact Stack Overflow staff to have them sort that out. — David Thomas
– David Thomas, Commented Jun 16 at 2:54

Philipp · Accepted Answer · 2017-06-02 21:14:20Z

1

Currently you set the async parameter to false, so the request is sent to the server and the browser waits for the response. To make an async request, just pass true as thrid param to open

xmlHttp.open("GET", "http://xxxx.com/getSpecialSale.php", true);

in addition to that, you have to register an callback, which waits for the response (and maybe to handle errors..)

xmlHttp.onload = function (e) {
    if (xmlHttp.readyState === 4) {
        if (xmlHttp.status === 200) {
            console.log(xmlHttp.responseText);
        } else {
           console.error(xmlHttp.statusText);
        }
    }
};
xmlHttp.onerror = function (e) {
    console.error(xmlHttp.statusText);
};

In addition to that a note from the mozilla docs

Note: Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.

edited Jun 2, 2017 at 21:14

answered Jun 2, 2017 at 21:11

Philipp

15.7k4 gold badges38 silver badges54 bronze badges

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

1 Comment

Barmar Over a year ago

he also needs to move the code that uses responseText to a callback.

XLR · Accepted Answer · 2017-06-03 01:25:15Z

1

var isAjax=false;
function updateButton(){
     if(!isAjax) { //Stops the user making a million requests per minute
        isAjax=true;
        var xmlHttp = null;

        xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET", "http://xxxx.com/getSpecialSale.php", true);
        xmlHttp.send(null);
        document.getElementById("dicebutton").innerHTML=xmlHttp.responseText;
        isAjax=false;
    }
}

OR jQuery...

$("#btnUpdate").click(function(){
    $.get("http://xxxx.com/getSpecialSale.php", function(data, status){
        $("#dicebutton").html(data);
    });
});

answered Jun 3, 2017 at 1:25

XLR

3095 silver badges17 bronze badges

Comments

James · Accepted Answer · 2017-06-02 21:13:00Z

0

If you want to use async you will need some code modifications, ie the stuff that happens after the response completes needs to be in a callback function as follows:

function updateButton(){

    var xmlHttp = null;

    xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", "http://xxxx.com/getSpecialSale.php", true);
    xmlHttp.onload = function () {
      document.getElementById("dicebutton").innerHTML=xmlHttp.responseText;
    };
    xmlHttp.send(null);

}

answered Jun 2, 2017 at 21:13

James

22.4k5 gold badges29 silver badges44 bronze badges

Comments

owenizedd · Accepted Answer · 2025-06-16 03:48:02Z

-1

Actually nowadays browser is modern enough to say that, it's best use fetch function instead of using XMLHTTPRequest() as it's easier to manage. and much simpler.


async function updateButton(){
    const response = await fetch("http://xxxx.com/getSpecialSale.php");
    document.getElementById("dicebutton").innerHTML=await response.text();
}

answered Jun 16 at 3:48

owenizedd

1,29312 silver badges18 bronze badges

Collectives™ on Stack Overflow

Is a get request possible with javascript?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related