Click here to Skip to main content
14,736,873 members
Please Sign up or sign in to vote.
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

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

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900