Read webservice data in JavaScript

Question

2.00/5 (1 vote)

See more:

Below is a piece of code in .Net, that reads data from a webservice:

string url = "http://localhost:48677/Service1.svc/GetDataSet1/FENCEGATE";
var webClient = new System.Net.WebClient();
string data = webClient.DownloadString(url);

Now I want to do the same thing in JavaScript, but don't know how to do it. Appreciate if you can share your experience.

Posted 2-Jan-14 9:25am

Member 10454592

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2014-01-02T09:37:00

Solution 1

You don't really use a Web service, you are just get HTTP response by URL, not using any of HTTP commands. Are you sure you get the result you want? If this is really way you want, you can do the same using Ajax:
http://en.wikipedia.org/wiki/Ajax_%28programming%29[^].

One convenient way to use Ajax is using jQuery Ajax: http://api.jquery.com/jquery.ajax/[^].

—SA

Permalink

Posted 2-Jan-14 9:37am

Sergey Alexandrovich Kryukov

Comments

[no name] 6-Jan-14 8:57am

SA: I read the article in http://api.jquery.com/jquery.ajax/. Through the URL, the expected results are:
{"Geometry":[{"paths":[[[201394.01178484457,173661.08635829584],[201392.0117168416,173661.08690949593],[201390.01164883861,173661.08746069603],[201388.01158083565,173661.08801189612],[201386.01151283266,173661.08856309619],[201384.0114448297,173661.08911429628],[201382.0113768267,173661.08966549637],...
But in my codee, the 'data' is undefined. I know that the problem is due to the settings (see below) in my code.
$.ajax( {
type:'Get',
url:'http://10.10.22.50:6080/arcgis/rest/services/Test/RailLRSDef/MapServer/exts/SOE_LRSSegment/Segment_Operation?LRSSegInput=A1&MeasureInputA=100&MeasureInputB=1000&f=pjson',
dataType: 'json',
success:function(data) {
debugger;
ajaxData = data;
} error(xhr,status,error) { debugger; }
});
Per your experience, what is wrong in the settings? Besides, How should/can dataFilter be used to remove the {"Geometry":[ , which in the actual result retrieved through the URL? Is it possible to retrieve the data as a string (like my 1st post in thread through .Net's webClient)? Thanks.

Sergey Alexandrovich Kryukov 6-Jan-14 9:17am

I don't know for sure, did not use it this way, because... did you see that "success" has been deprecated?
The most usual pattern is using .done/.fail/.always:



var jqxhr = $.ajax( "example.php" )

.done(function() {

alert( "success" );

})

.fail(function() {

alert( "error" );

})

.always(function() {

alert( "complete" );

});

// Perform other work here ...

// Set another completion function for the request above

jqxhr.always(function() {

alert( "second complete" );

});

(from http://api.jquery.com/jquery.ajax/).
There are more events you can use: deferred.fail, deferred.done, beforeSent, etc...
—SA

[no name] 6-Jan-14 9:32am

SA: Thanks for your script. Could you hint me the "example.php"? I have never used any php before. Where should I put it. What's the content of the "example.php"? Thanks.

Sergey Alexandrovich Kryukov 6-Jan-14 9:39am

I don't have time for that, sorry; you can easily experiment with PHP using $_POST: http://www.php.net/manual/en/reserved.variables.post.php.
And are you going to accept my answer formally? I already explained you what to do.
—SA

Kornfeld Eliyahu Peter · Accepted Answer · 2014-01-02T09:38:00

Solution 2

The best way is use some JavaScript framework - like jQuery...

$.ajax( {
  type:'Get',
  url:'http://localhost:48677/Service1.svc/GetDataSet1/FENCEGATE',
  success:function(data) {
    alert(data);
  }
})

See here for more: http://api.jquery.com/jquery.ajax/[^]

Permalink

Posted 2-Jan-14 9:38am

Kornfeld Eliyahu Peter

Comments

[no name] 2-Jan-14 15:06pm

Thanks for your response. Can I do like that:
var data = $.ajax( {
type:'Get',
url:'http://localhost:48677/Service1.svc/GetDataSet1/FENCEGATE',
success:function(data) {
alert(data);
}
})

Kornfeld Eliyahu Peter 2-Jan-14 15:11pm

More like this...

var ajaxData;
$.ajax( {
type:'Get',
url:'http://localhost:48677/Service1.svc/GetDataSet1/FENCEGATE',
success:function(data) {
ajaxData = data;
}
})

[no name] 2-Jan-14 15:40pm

Thanks. Loaded your code, but got error: Microsoft JScript runtime error: '$' is undefined.
However, between <head> </head>, I do load
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
Any hint? Thanks.

Kornfeld Eliyahu Peter 2-Jan-14 15:44pm

It seems jQuery does not loaded after all. Check your page on the client...

[no name] 2-Jan-14 15:52pm

The error: Microsoft JScript runtime error: '$' is undefined was gone by change
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
to
<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>

Kornfeld Eliyahu Peter 2-Jan-14 16:07pm

And? Are you fixed now?

[no name] 2-Jan-14 16:12pm

Used the code below and put debugger there as the break point. But the ajaxData is 'undefined'. Any hint? Thanks.
var ajaxData;
debugger;
$.ajax( {
type:'Get',
url:'http://10.10.22.50:6080/arcgis/rest/services/Test/RailLRSDef/MapServer/exts/SOE_LRSSegment/Segment_Operation?LRSSegInput=A1&MeasureInputA=100&MeasureInputB=1000&f=pjson',
dataType: 'json',
success:function(data) {
ajaxData = data;
}
})

Kornfeld Eliyahu Peter 2-Jan-14 16:14pm

Put the break point inside the success function...

[no name] 2-Jan-14 16:19pm

Put like that but no break point in the debugging
success:function(data) {
debugger;
ajaxData = data;
}

Kornfeld Eliyahu Peter 2-Jan-14 16:26pm

It's possible you got an error...
Add after the success function this:
error(xhr,status,error)
{
debugger;
}
(Don't forget comma!)

[no name] 2-Jan-14 16:31pm

After add the error part, No action on any debegger
The code:
var ajaxData;
debugger; // - No action on debegger
$.ajax( {
type:'Get',
url:'http://10.10.22.50:6080/arcgis/rest/services/Test/RailLRSDef/MapServer/exts/SOE_LRSSegment/Segment_Operation?LRSSegInput=A1&MeasureInputA=100&MeasureInputB=1000&f=pjson',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success:function(data) {
debugger; // - No action on debegger
ajaxData = data;
}
error(xhr,status,error) { debugger; }
})

Kornfeld Eliyahu Peter 2-Jan-14 16:36pm

1. My wrong
success ... {
},
error: function(xhr, status, error) {
debugger;
}

[no name] 3-Jan-14 8:12am

The 'debugger' works. But the still couldn't get value passed. Put the myURL on IE, the json values are:
{
"Geometry": [
{
"paths": [
[
[
201394.01178484457,
173661.08635829584
],
[
201392.0117168416,
173661.08690949593
],
...
]
}
]
}
The related code is below:
var myURL = 'http://10.10.22.50:6080/arcgis/rest/services/Test/RailLRSDef/MapServer/exts/SOE_LRSSegment/Segment_Operation?LRSSegInput='
+ routeById + '&MeasureInputA=' + mA + '&MeasureInputB=' + mB + '&f=pjson';
var ajaxData;
$.ajax( {
type:'Get',
url: myURL,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success:function(data) {
debugger;
ajaxData = data;
},
error: function(xhr, status, error) { debugger; }
})
Here the ajaxData is still undefined.

Kornfeld Eliyahu Peter 4-Jan-14 14:56pm

Where the debugger stops? Inside the error function?

[no name] 6-Jan-14 7:02am

ajaxData - undefined, which means something wrong in my code. I am still checking. Thanks.

[no name] 6-Jan-14 10:12am

Retrieved the error: function(xhr, status, error) { debugger; }
xhr: ResponseJSON: undefined
status: error
error: No transport

Kornfeld Eliyahu Peter 6-Jan-14 10:21am

In that case you have some problem wit the web service. probably some cross scripting problem...

[no name] 6-Jan-14 10:33am

After adding
$.support.cors = true;
Got IE Message: This page is accessing information that is not under its control. This poses a security risk. Do you want to continue?
After clicking the 'Yes' button, the program passed the $.ajax() block, but the the ajaxData is still undefined. Any additional hint? Thanks.
$.support.cors = true;
$.ajax( {
type:'Get',
url: myURL,
dataType: 'text',
crossDomain : true,
success:function(results) {
console.log('Success!');
debugger;
ajaxData = results;
},
error: function(xhr, status, error) {
debugger;
console.log(error);
}
});

Kornfeld Eliyahu Peter 6-Jan-14 13:22pm

Where you are standing (in the debug) when ajaxData is undefined?
And what about results?

[no name] 6-Jan-14 13:57pm

Tried dozens of scenarios but always got undefined.

Kornfeld Eliyahu Peter 6-Jan-14 14:43pm

I have a feeling that you have some issues with the service. I just tried your code with an other url and it's works like charm...
Try replace your url with this: https://api.github.com/users/mralexgray/repos

[no name] 6-Jan-14 15:03pm

Dear KEP: Thanks for your test. I tried your url, and got
ajaxData's value is [object object].
It means that my code should be fine. As you pointed out, the problem could be either my server or dataType. The dataType in my case looks like:
{ "Geometry": [ { "paths": [ [ [ 201394.01178484457, 173661.08635829584 ], ...
I wonder the the format I used here is a problem. Appreciate if you can provide some hint to me. Thanks again.

Kornfeld Eliyahu Peter 6-Jan-14 15:22pm

Validate you JSON here http://jsonlint.com/

[no name] 6-Jan-14 15:37pm

Tested got valid results. Then I run my URL using the same script (where dataType: 'jsonp json text html',) but The error's description is
jQuery110208376298625159104_1389040314819 was not called error.
Googled but no result for it.

Kornfeld Eliyahu Peter 6-Jan-14 15:50pm

Maybe the url as it created in JavaScript is wrong, not well formatted?
Copy its value form the debugger and paste into your browser address bar and see what you get...

[no name] 6-Jan-14 10:38am

In case I changed my URL's f=html (also returned results), and dataType: 'html' (or 'text'), alwasy got ajaxData undefined.

Read webservice data in JavaScript

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Read webservice data in JavaScript

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us