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 Js

Solution 1:

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 iturl: '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
    }
});

Solution 2:

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.

Solution 3:

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.