How to decode XML response from jQuery $.ajax request in Firefox

Question

I am trying to create an ajax request to a WebService that returns data given some specified parameters in XML. This seems to work well in IE, but Firefox can't decode the response. I can view the response successfully in Fiddler after decoding also. Here is the code:

$(function() {
    $.ajax({
        type: "GET",
        url: 'http:/localhost/webservice.asmx/GetTags?groupId=10',
        contentType: "text/xml; charset=utf-8",
        dataType: "xml",
        success: function(response) {
            $('#result').html('success',response);
            $(response).find("string").each(function() {
                $('#result').append($(this).text());
            });
        },
        error: function(response) {
            $('#result').html('failure',response);
        }
    });

});

Is there a way to specify that response needs to be decoded? Or any other way to make it work?

EDIT: @Nikki9696 - it's not JSON encoded as the data is returned in XML.

@Oleg - The sample XML I can see in the browser if accessing webservice via a URL is as follows:

<?xml version="1.0" encoding="utf-8"?>
<ArrayOfString xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
  <string>tag 1</string>
  <string>tag 2</string>
  <string>tag 3</string>
</ArrayOfString>

The fiddler in TextView returns � and a message

"Response is encoded and may need to be decoded before inspection. Click here to transform."

Once clicked it displays the same XML. I turn off dynamic content compression in the IIS then the XML is visible in fiddler straight away, but FF still can't cope, so that rules out compression.

I played around with the script a little bit, seems like jQuery can default to or guess some parameters, so dataType, for example, is not compulsory. With these settings I get a success message, however it still doesn't know what to do with the data. I tried setting dataType to "jsonp" as suggested in some SS thread (can't find it at the moment, will link it when I do) and the error changes to missing ; before statement, I guess because it's not JSON object, but XML. Is there a way to set webservice to return a JSON instead?

EDIT 2: I've updated url to reflect what actually happened. Sorry I missed it out, made it impossible for anyone to spot it.

Answer 1

Because you use relative URL like '/webservice.asmx/GetTags?groupId=10' you had no problem with different domain. It seems to me that you should just fix a litle your JavaScript code. For example the following code

$(function () {
    $.ajax({
        type: "GET",
        url: '/WebService1.asmx/GetTags',
        contentType: "text/xml; charset=utf-8",
        data: {groupId:10},
        success: function (response) {
            $('#result').html('success:');
            $(response).find("string").each(function () {
                $('#result').append('<br />'+$(this).text());
            });
        },
        error: function (response) {
            $('#result').html('failure:<br />' + response.responseText);
        }
    });
});

works fine in Internet Explorer, Firefox and Google Chrome. If you need I could post the URL where you could download the whole working Visual Studio 2010 project.

UPDATED: To return JSON instead of XML from the web method you can replace [ScriptMethod(UseHttpGet = true)] to the [ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] attribute (in .NET 4.0 you can do the same in different other ways) and modify JavaScript code to the following

$(function () {
    $.ajax({
        type: "GET",
        url: '/WebService1.asmx/GetTagsJson',
        contentType: "application/json; charset=utf-8",
        data: { groupId: 10 },
        //dataType: "xml",
        success: function (response) {
            $('#result').html('success:');
            $(response.d).each(function () {
                $('#result').append('<br />' + this);
            });
        },
        error: function (response) {
            $('#result').html('failure:<br />' + response.responseText);
        }
    });
});

Answer 2

The short answer is: I tried to make the call from a different domain to my webservice.

Here are some more details: In Firebug looking at the XML tab I noticed that the error returned was XML Parsing Error: no element found Location: moz-nullprincipal:{757cb587-20da-4d2f-bf80-e3b915a234d4} Line Number 1, Column 1:, so I looked for this particular message and stumbled across someone having the same issue http://forum.jquery.com/topic/jquery-ajax-and-xml-issues-no-element-found. Here is the part that solved my problem:

Though it's not clear in the documentation, you can not use AJAX calls to fetch data from other domains.

It occured to me that the reason it worked in IE is that the first time it asked me whether I would allow to make this unsafe call (or some such), and it must have been referring to making an ajax call to a different domain. FF never prompted me about it and probably disabled the call by default.

Making it cross domain compatible is an issue for another day, for now it's doing everything I need.