my api call doesnot work in javascript but works fine with in postman and browser

Question

this the html file

    <html>
    <head>
        <title>"api call"</title>

    </head>
        <body>
            <div id="demo">

                <script>
                    function list() {
                        var xhttp = new XMLHttpRequest();
                        xhttp.open("GET","192.168.0.101:8000/students/",true);
                        xhttp.setRequestHeader("Content-type", "application/json");
                        xhttp.setRequestHeader("Authorization", "Token ad4140b1caa4f98160bdc979a71a7215ae5972fe");
                        xhttp.send();
                        var1 response = JSON.parse(xhttp.responseText);
                        document.write(var1);
                    }

                </script>

                <button type="button" onclick="list()">click to get the list</button>

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

when i run this in my browser request is not sent(i cannot see anything in my traceball in backend) the url works fine if used in the browser and postman this is the screenshot of postman request and response

the backend is in django

this is the error i get in console

var1 response = JSON.parse(xhttp.responseText);

error:Uncaught SyntaxError: Unexpected identifier

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — James, Jul 13 '17 at 18:31
@Alexandru-IonutMihai i get this error now in the console Uncaught ReferenceError: list is not defined at HTMLButtonElement.onclick (javascriptapi:21) — Kethan Chauhan, Jul 13 '17 at 18:48
Maybe you make some changes. This error looks like does not find your function for click event handler. — Mihai Alexandru-Ionut, Jul 13 '17 at 18:48

cosinepenguin · Answer 1 · 2017-07-13T18:17:11.990

1

I believe your problem is with the xhttp.open code. When you ask to perform the "GET," setting the boolean at the end to true will mean the request will perform asynchronously. You should set this variable to false, which means the method does not return until the response is received.

Try changing

xhttp.open("GET","192.168.0.101:8000/students/",true);

to:

xhttp.open("GET","192.168.0.101:8000/students/",false);

Here are good sources:

Hope it helps!

EDIT

Since it seems you are the owner of the server, you can try manually implementing a CORS header on your server, or use JSONP (which bypasses CORS). Here's some info on CORS and implementing on MDN. There also this nice source on SO. Good luck!

edited Jul 13 '17 at 18:17

answered Jul 13 '17 at 18:05

cosinepenguin

1,545
1
12
21

Yes, that's a good point, but it is not recommended to use `async:false` for ajax(it's a bad practice) because can freezes the window. – Mihai Alexandru-Ionut Jul 13 '17 at 18:07
That's good to keep in mind! If Kethan wants to implement an [ajax promise](https://stackoverflow.com/questions/39751395/whats-the-difference-between-promise-and-ajax) that would allow him to keep the request asynchronous, right? – cosinepenguin Jul 13 '17 at 18:10
1

@KethanChauhan Is your authorization supposed to resemble: `"Token ad4140b1caa4f98160bdc979a71a7215ae5972fe"`? That format seems a little off. Are you receiving errors in the console? – cosinepenguin Jul 13 '17 at 18:12
@cosinepenguin yes i get an error in the console,see up there i have edited – Kethan Chauhan Jul 13 '17 at 18:19
@cosinepenguin see the screenshot that i have added – Kethan Chauhan Jul 13 '17 at 18:22

score 1 · Answer 2 · answered Jul 13 '17 at 18:29

1

When you make the request the content of response will be parsed automatically.

Change

var1 response = JSON.parse(xhttp.responseText);

To

var1 response = xhttp.responseText;

answered Jul 13 '17 at 18:29

Mihai Alexandru-Ionut

47,092
13
101
128

Uncaught ReferenceError: list is not defined at HTMLButtonElement.onclick (javascriptapi:21) @Alexandru-IonutMihail i get this error now – Kethan Chauhan Jul 13 '17 at 18:45

my api call doesnot work in javascript but works fine with in postman and browser

2 Answers2