CODEWITHSUNDEEP
javascriptjqueryjsonweb-services
user818700
user818700

Reputation:

Calling a web service in JQuery and assign returned Json to JS variable

This is my first time attempting working with JQuery, Json AND calling a web service.. So please bear with me here.

I need to call a webserivce using JQuery, that then returns a Json object that I then want to save to a javascript variable. I've attempted writing a little something. I just need someone to confirm that this is indeed how you do it. Before I instantiate it and potentially mess up something on my company's servers. Anyways, here it is:

var returnedJson = $.ajax({
    type: 'Get',
    url: 'http://172.16.2.45:8080/Auth/login?n=dean&p=hello'
});

So there it is, calling a webservice with JQuery and assigning the returned jsonObject to a javascript variable. Can anyone confirm this is correct?

Thanks in advance!

Upvotes: 0

Views: 9150

Answers (3)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038780

Can anyone confirm this is correct?

It will depend on which domain you stored this script. Due to the same origin policy restriction that's built into browsers you cannot send cross domain AJAX requests. This means that if the page serving this script is not hosted on http://172.16.2.45:8080 this query won't work. The best way to ensure that you are not violating this policy is to use relative urls:

$.ajax({
    type: 'Get',
    url: '/Auth/login?n=dean&p=hello'
});

There are several workarounds to the same origin policy restriction but might require you modifying the service that you are trying to consume. Here's a nice guide which covers some of the possible workarounds if you need to perform cross domain AJAX calls.

Also there's another issue with your code. You have assigned the result of the $.ajax call to some returnedJson variable. But that's not how AJAX works. AJAX is asynchronous. This means that the $.ajax function will return immediately while the request continues to be executed in the background. Once the server has finished processing the request and returned a response the results will be available in the success callback that you need to subscribe to and which will be automatically invoked:

$.ajax({
    type: 'Get',
    url: '/Auth/login?n=dean&p=hello',
    success: function(returnedJson) {
        // use returnedJson here
    }
});

And yet another remark about your code: it seems that you are calling a web service that performs authentication and sending a username and password. To avoid transmitting this information in clear text over the wire it is highly recommended to use SSL.

Upvotes: 1

Simon
Simon

Reputation: 37978

The jQuery ajax function does not return the data, it returns a jQuery jqHXR object.

You need to use the success callback to handle the data, and also deal with the same origin policy as Darin mentions.

Upvotes: 1

Johan
Johan

Reputation: 35194

var returnedJson = $.ajax({
    type: 'Get',
    url: 'http://172.16.2.45:8080/Auth/login?n=dean&p=hello'
});

If you do it like this returnedJson would be an XHR object, and not the json that youre after. You want to handle it in the success callback. Something like this:

$.ajax({
    // GET is the default type, no need to specify it
    url: 'http://172.16.2.45:8080/Auth/login',
    data: { n: 'dean', p: 'hello' },
    success: function(data) {
         //data is the object that youre after, handle it here
    }
});

Upvotes: 1

Related Questions