CODEWITHSUNDEEP
javascriptapifirefoxrest
Shahzad Latif
Shahzad Latif

Reputation: 1424

Calling REST API from JavaScript with Firefox is not working

I'm using the following code to make a call to a REST API using JavaScript. This code works fine with IE but hangs at send method with Firefox 9.0.1. I believe IE is not cashing the previous response.

I have tried debugging with Firebug, but it's not helping. XMLHttpRequest object, which is for Firefox, is created successfully and it goes through all the code, but no response.

<script language="javascript" type="text/javascript">

    function processRequest() {
         var signedURI = "http://api.saaspose.com/v1.0/storage/disc?appSID=myappSID&signature=mySignature";

        var xmlhttp = null;

        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
            if (typeof xmlhttp.overrideMimeType != 'undefined') {
                xmlhttp.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            alert('Not supported!');
        }

        xmlhttp.open('GET', signedURI, true);

        xmlhttp.onreadystatechange = function () {

            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            alert(xmlhttp.responseText);

            } else {
                //alert("ready state : " + xmlhttp.readyState.toString() + " status : " + xmlhttp.status.toString());
            }
        };

         xmlhttp.send(null);
    }
</script>

Any idea why is this issue occurring with Firefox but not with IE?

Upvotes: 1

Views: 2450

Answers (1)

Shahzad Latif
Shahzad Latif

Reputation: 1424

The team had to resolve this issue by adding JSONP support to the WCF services and then using the jQuery at the client end like this: 

        $(function () {
        $("#disc").click(function () {
            $.getJSON("http://api.saaspose.com/v1.0/storage/disc?appSID=appsid&signature=signature&callback=?", function (data) {
                var items = [];
                $("#discResult").append('<br/><b>Status: ' + data.Status + '</b>');
                if (data.Status = 'OK') {
                    var discUsage = data.DiscUsage;
                    $.each(discUsage, function (key, val) {
                        items.push('<li id="' + key + '">' + key + ': ' + val + '</li>');
                    });

                    $('<ul/>', {
                        'class': 'my-new-list',
                        html: items.join('')
                    }).appendTo('#discResult');
                }
            });
        });
    });

Thank you all for your comments.

Upvotes: 2

Related Questions