Trying to use javascript with REST

Question

There's quite nothing that makes me as frustrated as web development, which luckily I don't get to do often, and here's an example why. Is there any reason why the following code works perfectly fine in DreamWeaver Live View, stops after alert("2") (alert 3 never appears, neither does anything in output) on Chrome and doesn't work at all in Internet Explorer?

<script type="text/javascript">
    function getStuff() {
        var url = "http://url/to/restful/api";              

        alert("1");     
        var client = new XMLHttpRequest();              
        client.open("GET", url, false);

        client.setRequestHeader("Content-Type", "application/json");
        alert("2")

        client.send();  
        alert("3")              

        document.getElementById("output").value = client.responseText; 
    }    
</script>

This is called like this:

<button onClick="getStuff()">GET</button>

I don't know, should I? I don't really know anything about JS. How'd I do the same with jQuery? — jaho
– jaho, Commented Mar 11, 2013 at 6:07
@Marian: new XMLHttpRequest() wont work in IE. Please go through this link en.wikipedia.org/wiki/XMLHttpRequest — karthick
– karthick, Commented Mar 11, 2013 at 6:08
Different browsers handle things subtly different, so if you're not familiar with JS and the quirks in each browser, a framework is the way to go. jQuery is great since it's so well covered on SO. I like ender or requirejs, but they're probably not what you're looking for. — beatgammit
– beatgammit, Commented Mar 11, 2013 at 6:13
Ok, makes sense. So how do I create the same request with jQuery? — jaho
– jaho, Commented Mar 11, 2013 at 6:18

karthick · Accepted Answer · 2013-03-11 06:32:36Z

1

Try the following code: Please go through this link http://en.wikipedia.org/wiki/XMLHttpRequest

<script type="text/javascript">
    function getStuff() {
        var url = "http://url/to/restful/api";              

        alert("1");     
        var client = getXMLHttpRequestObject();              
        client.open("GET", url, false);

        client.onreadystatechange = function() {
          if(client.readyState == 4){
                  document.getElementById("output").value = client.responseText;
            }
        };

        client.setRequestHeader("Content-Type", "application/json");
        alert("2")

        client.send();  
        alert("3")              


    }    

function getXMLHttpRequestObject() {
    var ref = null;
    if (window.XMLHttpRequest) {
        ref = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // Older IE.
        ref = new ActiveXObject("MSXML2.XMLHTTP.3.0");
    }
    return ref;
}
</script>

edited Mar 11, 2013 at 6:32

answered Mar 11, 2013 at 6:10

karthick

12.2k7 gold badges61 silver badges93 bronze badges

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

3 Comments

jaho Over a year ago

This fixes it for IE but not for Chrome.

karthick Over a year ago

@Marian: Try the code now. Please do learn how to make an Ajax call. I know that it will be new for a guy who is writing C and C++. Well everyone were there in that position. PS: I haven't done any kind of abstraction over here, change it accordingly

jaho Over a year ago

I'll learn one day. So far this is the most Javascript I've written in my life. Still no luck with Chrome with the above code.

gashu · Accepted Answer · 2013-03-11 06:17:47Z

0

On a side note

client.open("GET", url, false);

Using sync connection using ajax is a bad idea. It will freeze your UI code.

This is the reason why alert(3) is never called. When you do xhr.send() the thread stops and waits for the response from the server.

The ideal way to do this would be client.open("GET", url, true);

answered Mar 11, 2013 at 6:17

gashu

4928 silver badges17 bronze badges

5 Comments

jaho Over a year ago

This breaks it for DreamWeaver and doesn't fix it for Chrome. Wow this is terrible.

gashu Over a year ago

Put a console.log in client.onreadystatechange = function() { The control will return to this function after client.send(). P.S. the alert(3) should go inside the if statement in quoted above. Else when you make it async, then all three of alert(1), alert(2), alert(3) should occur as soon as the getStuff() function is called. Also, if you can mention what is the use case you are trying to solve.

gashu Over a year ago

document.getElementById("output").value = client.responseText; should be inside onreadyStateChange handler specifically inside if

jaho Over a year ago

I'm trying to write a simple REST API client. Sending/showing JSON data and response status for get, post, put, delete verbs.

gashu Over a year ago

For the response code, you can either handle it in onreadystatechange putting the if condition to check for readystate=4 (as you have done correctly). Alternatively this can be handled in onload event handler. onload is same as readystate = 4. so a pseudo algorithm would be:

xhr = new XMLHttpRequest(); xhr.open(); xhr.onload = function(e) { // handle response for http verbs here. Access JSON using JSON.parse(e.responseText) and do something } xhr.onerror = function(e) { // something bad happened, handle it here}

Collectives™ on Stack Overflow

Trying to use javascript with REST

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related