Error with setRequestHeader in GET request

Question

The following JS function should be sending out a GET request to

http://127.0.0.1:5000/api.xml

with

?query=toast

function sendRequest(str){
    var request = new XMLHttpRequest();
    console.log('sending request');
    request.onreadystatechange = function() {
        if (request.readyState == XMLHttpRequest.DONE) {
            json=request.responseText;
            //json.forEach(function(obj) { 
            //});
            for (word in json){
                var row=table.insertRow();
                var scoreC=row.insertCell();
                var wordC=row.insertCell();
                scoreC.innerHTML=json[word];
                wordC.innerHTML=word;
            }
        } else {
            concole.log("Silence on the line");
        }
    }
    request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    request.open('GET', 'http://127.0.0.1:5000/api.xml?query='+str, true);
    request.send();
  // and give it some content 
    //var newContent = document.createTextNode(resp); 
    //console.log(resp.responseType);
}

Instead, it always queries

http://127.0.0.1:5000/?word=toast

ignoring the fact that I required a GET on

http://127.0.0.1:5000/api.xml

*Note*: you should set the request header after a request is opened. — Stephan Schrijver, May 30 '19 at 08:23
@eddie No, I want to see something like `sendRequest("toast")`, when the function has been called? — hoangdv, May 30 '19 at 08:54

eddie · Answer 1 · 2019-05-30T08:42:22.980

1)As Stephan Schrijver lined out

request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

is only valid when it follows

request.open('POST', 'http://127.0.0.1:5000/api.xml?query='+str, true);

as part of a POST request

It is no longer required for GET requests

2) Also,

request.open('GET', 'http://127.0.0.1:5000/api.html?query='+str, true);

must be defined before the readyStateChange function

score 0 · Answer 2 · answered May 30 '19 at 08:38

Try this out

function sendRequest(str) {
    const request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (this.readyState === 4) {
            if (this.status === 200) {
                console.log(this.responseText);
                const json = this.responseText;
                for (word in json) {
                    var row = table.insertRow();
                    var scoreC = row.insertCell();
                    var wordC = row.insertCell();
                    scoreC.innerHTML = json[word];
                    wordC.innerHTML = word;
                }
            } else if (this.response == null && this.status === 0) {
                console.log(this.responseText);
            } else {
                console.log('Error');
            }
        }
    };
    request.open('GET', 'http://127.0.0.1:5000/api.xml?query=' + str, true);
    request.send(null);
}

StepUp · Answer 3 · 2019-05-30T08:56:19.647

At first, you should create desired URL, open request and then set request header. Let me show an example:

function sendRequest(){
  let theUrl = 'http://127.0.0.1:5000/api.xml'

  let xmlHttp = new XMLHttpRequest();
  let fooStr='?query=toast';
  theUrl = `http://127.0.0.1:5000/api.xml${fooStr}`;
  xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
  xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

  xmlHttp.send( null );
  return xmlHttp.responseText;
}

sendRequest();

Or in your case:

request.open('GET', 'http://127.0.0.1:5000/api.xml?query='+str, true);
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.send();

Error with setRequestHeader in GET request

3 Answers3

Linked