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:

C#

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 8:25am

Member 10454592

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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-02T08: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

Posted 2-Jan-14 8: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-02T08:38:00

Solution 2

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

JavaScript

$.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/[^]

Posted 2-Jan-14 8: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.