Work with JSON web service using jQuery

Question

I am developing HTML5, jQuery mobile application. I have to use 3rd party JSON web service to obtain data. However I am having parseerror in my jquery function. It seems the issue is that web service send JSON. I have to use JSONP since it is cross-domain. Is there anyway to do this using jQuery or javascript. Here is the code I am using.

$.ajax({
            url : jsonServiceURL + "scheduleService/retrieveMySchedules.json?callback=?",
            dataType : "json",
             beforeSend: function(x) {
              if(x && x.overrideMimeType) {
               x.overrideMimeType("application/json;charset=UTF-8");
              }
             },
            timeout : 5000
        }).success(function() {
                alert('pass');      
        }).error(function(httpObj, textStatus) {        
            alert(textStatus);
        });

The request goes. The response also comes. But it says parseerror. I feel this has something difference in JSON and JSONP. If I set URL to something like http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=? my code works fine there is no issue. The 3rd party web service also correct since all the iphone apps works fine. Only difference I see is JSON start with [{ and JSONP start with somefunction({.

The JSON is valid. I checked it with some online tools and also there are couple of iphone apps working with that web service without an issue. It seems I can't parse it with jquery since they send JSON instead of JSONP. Please correct me if my thought is wrong. What are the possible solutions for this?

Denys Séguret · Accepted Answer · 2012-04-25 07:57:51Z

1

If you're doing cross-domain requests, use jsonp. That's good. It's just a little different from your standard json request (done with XmlHttpRequest).

You must send your request precising it's jsonp :

$.ajax({
       url : jsonpServiceURL + "scheduleService/retrieveMySchedulesJsonp?callback=?",
       dataType : "jsonp"           
 });

And then you must have a function in your code that will be your callback :

function InBrowser_receive(answer) {
        console.log('received:', answer)
    // do things with answer (the received json)
}

Personally, I usually don't bother with sending the name of the callback to the server, as I write the server part too : I simply hardcode the callback name serverwise.

And I like to send arguments to the server using json structures too. So my function sending the request is usually like this :

function sendToServer(message) {
    $.ajax(
        {
            url: serverUrl,
            data: 'theQuery=' + JSON.stringify(message),
            crossDomain: true,
            dataType: 'jsonp'
        }
    );
}

Here's an example in one of my open source codes : https://github.com/Canop/braldop/blob/master/chrome/braldop/inext_com.js

The sending function is

braldop.sendToBraldopServer

and the receiving one is

receiveFromMapServer

edited Apr 25, 2012 at 7:57

answered Apr 25, 2012 at 6:31

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

7 Comments

Prasad Rajapaksha Over a year ago

Thank you for the answer. But it didn't work since the response is not in JSONP. I have to specify the callback since it is 3rd party.

Denys Séguret Over a year ago

If you precise the callback, then it IS in jsonp. Or I'm missing something.

Prasad Rajapaksha Over a year ago

Yes. The issue is the web service is provide only JSON not JSONP. Thanks.

Denys Séguret Over a year ago

If the web service cannot do jsonp, you won't be able to do cross-domain requests.

Prasad Rajapaksha Over a year ago

Yes. I thought. That's why I asked the question here as well to maksure that. Thank you so much friend.

|

Collectives™ on Stack Overflow

Work with JSON web service using jQuery

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related