problem with calling remote ASMX using jQuery

Question

Been trying my best to understand this correctly. What is the difference between an XML, SOAP and JSON response? And how does one know how to call a web service whose response is one of the above? (...Please correct me if I'm off-track)

The reason I ask this because I am trying to call a remote ASMX from jQuery within my .NET3.5 webapp, and no luck at all!! Basically I am trying to call a CurrencyConverter method as shown at this address: http://www.webservicex.net/CurrencyConvertor.asmx?op=ConversionRate

I can see that it returns XML, but the following code does not work:

$('#Currency').bind('change', function() {
    var targetDiv = '#Result'
    var currencyValue = $('#Currency option:selected').attr('value')
    var webMethod = 'http://www.webservicex.net/CurrencyConvertor.asmx/ConversionRate'
    var parameters = "{'FromCurrency':'GBP','ToCurrency':'" + currencyValue + "'}"

    $(targetDiv).html('loading...');

    $.ajax({
        type: "POST",
        url: webMethod,
        data: parameters,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            $(targetDiv).html(response.d);
        },
        error: function(response) {
            $(targetDiv).html("Unavailable:" + response);
        }
    });
});

Please could someone assist me with this, as I am really lost!

Thank you!

Answer 1

I have used this web service before. It expects and returns XML. Here's the code I used to get to work in Internet Explorer (For Firefox you need to use the jsonp).

$('#Currency').bind('change', function() {
    var targetDiv = '#Result'
    var currencyValue = $('#Currency option:selected').val();
    var webMethod = 'http://www.webservicex.net/CurrencyConvertor.asmx/ConversionRate';
    var parameters = "?FromCurrency=GBP&ToCurrency=" + currencyValue;

    $(targetDiv).html('loading...');

    $.ajax({
        type: "GET",
        url: webMethod + parameters ,
        contentType: "text/xml; charset=utf-8", 
        dataType: "xml", //for Firefox change this to "jsonp"
        success: function(response) {
            $(targetDiv).html(response.text);
        },
        error: function(xhr, textStatus, errorThrown) {
            $(targetDiv).html("Unavailable: " + textStatus);
        }
    });
)};

Answer 2

[Edit] Another thing you could try is to change the dataType in the JQuery call to "xml". If that doesn't work, you could make your own proxy Web-Service that calls the remote one, and then return the data in a JSON format.

I suspect the problem is in the server side code. I'm not sure if this will work for you but here is some working code that shows JQuery calling my WebMethod. Hopefully you can compare this with yours and get it working. Let us know what the solution is. I hope this helps.

[Server Code]

using System;
using System.ComponentModel;
using System.Data;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;

[WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ToolboxItem(false)]
    [ScriptService]
    public class ForumService : System.Web.Services.WebService
    {

        [WebMethod]
        [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
        public VoteCastResult CastQuestionVote(string itemID, QAForum.Bll.VoteType voteType)
        {
            try
            {
                User usr = SecurityHelper.GetOrCreateUser();
                Guid question = new Guid(itemID);
                return new QuestionVoteController().CastQuestionVote(usr, question, voteType);
            }
            catch (Exception ex)
            {
                return new VoteCastResult(VoteCastStatusType.otherIssue, 0, ex.Message);
            }
        }
    }


[JQuery Code]

    function AFTopicCastVote(clickContext, itemID, voteDirection, voteMethod)
    {
          $.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8",
          url: (AFServiceUrl + voteMethod),
          data: "{'itemID': '" + itemID + "','voteType': '" + voteDirection + "'}",
          dataType: "json",
          success: function (data, textStatus) {
                               AFTopicProcessVoteResult(clickContext, data.d);
                                //alert("data : " + data.d);
                            },

          error: function (  XMLHttpRequest, textStatus, errorThrown) 
          {
            alert("error casting vote: " + errorThrown);
          }
        });    
    }

Answer 3

in page load function add the next lines for a client ....

        base.Response.AddHeader("Access-Control-Allow-Origin", "*");
        base.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
        base.Response.AddHeader("Access-Control-Allow-Headers", "X-Requested-With");
        base.Response.AddHeader("Access-Control-Max-Age", "86400");

Answer 4

The problem has to do with Cross-Site posting. You may be getting the error "Access to restricted URI denied code: 1012" because you are posting to a WebService in another domain.

Please refer this post on Error 1012