Login or Sign Up to become a member!
LessThanDot Site Logo

LessThanDot

A Technical Community for IT Professionals

Less Than Dot is a community of passionate IT professionals and enthusiasts dedicated to sharing technical knowledge, experience, and assistance. Inside you will find reference materials, interesting technical discussions, and expert tips and commentary. Once you register for an account you will have immediate access to the forums and all past articles and commentaries.

LTD Social Sitings

Lessthandot twitter Lessthandot Linkedin Lessthandot facebook Lessthandot rss

Note: Watch for social icons on posts by your favorite authors to follow their postings on these and other social sites.

Highly Rated Users

Forum
No Posts Rated

Top 50
Given
Received

Links

Wiki
Blog

Forum Statistics

Users
Members:
1879
Members Online:
1
Guests Online:
91

Total Post History
Posts:
81448
Topics:
18714

7-Day Post History
New Posts:
0
New Topics:
0
Active Topics:
0

Our newest member
mwojcik

Other

FAQ
All times are UTC [ DST ]

Google Ads

Call .net Webservice using JQuery?

Please wait...

Call .net Webservice using JQuery?

Postby AlexCuse on Thu Oct 16, 2008 4:07 am

Hey guys, this is all new to me so I'll get right to the point. I'm currently able to call a webservice successfully using the following:

  1. <script type="text/javascript">
  2. function ajaxTest() {
  3.     var xmlHttp;
  4.     try
  5.       {
  6.         // Firefox, Opera 8.0+, Safari
  7.         xmlHttp=new XMLHttpRequest();
  8.       }
  9.     catch (e)
  10.       {
  11.       // Internet Explorer
  12.       try
  13.         {
  14.             xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  15.         }
  16.       catch (e)
  17.         {
  18.         try
  19.           {
  20.             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  21.           }
  22.         catch (e)
  23.           {
  24.           alert("Your browser does not support AJAX!");
  25.           return false;
  26.           }
  27.         }
  28.       }
  29.      xmlHttp.onreadystatechange=function()
  30.      {
  31.         if(xmlHttp.readyState==4)//if request is complete
  32.         {
  33.             //get the data from server's response
  34.             document.getElementById("tdiv").innerHTML=xmlHttp.responseText;
  35.         }
  36.      }
  37.      xmlHttp.open("POST", "http://localhost:50860/Services/Service1.asmx/People", true);
  38.      xmlHttp.send(null);
  39. }
  40. </script>


I'm trying to figure out how to do this using JQuery (and then hopefully graduate to using JSON instead of XML). People returns a list array of custom objects, if that matters.

Any ideas?

Thanks in advance,

Alex
Say what you like about the tenets of National Socialism Dude, at least it's an ethos
User avatar
AlexCuse
LTD Admin
LTD Admin
LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031
LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031
LTD Gold - Rating: 1031
 
Posts: 5523
Joined: Tue Oct 09, 2007 5:26 pm
Location: Pennsylvania, US
Unrated

Re: Call .net Webservice using JQuery?

Postby chrissie1 on Thu Oct 16, 2008 7:33 am

I know, I'm no help but a call to a webservice doesn't belong in client code IMHO anyway.
pink fuzzy slippers
User avatar
chrissie1
Senior Guru
Senior Guru
LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135
LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135
LTD Gold - Rating: 2135LTD Gold - Rating: 2135
 
Posts: 9475
Joined: Wed Oct 10, 2007 7:18 pm
Location: Belgium
Unrated

Re: Call .net Webservice using JQuery?

Postby damber on Thu Oct 16, 2008 12:18 pm

chrissie1 wrote:I know, I'm no help but a call to a webservice doesn't belong in client code IMHO anyway.


huh ? How do you figure that ?
a smile is worth a thousand kind words, so smile, it's easy! :-)


CODE: $5
WORKING CODE: $500
PROPERLY DESIGNED & WORKING CODE: Priceless
User avatar
damber
LTD Admin
LTD Admin
LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663
LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663
 
Posts: 3138
Joined: Tue Oct 09, 2007 1:48 pm
Location: North Wales, UK
Unrated

Re: Call .net Webservice using JQuery?

Postby chrissie1 on Thu Oct 16, 2008 12:26 pm

Because I consider webservice as part of the dataaccesslayer. And as such could be replaced by a local datalayer on your local server. I would always keep a layer in between them that can call both if needed. Just a small thought.
pink fuzzy slippers
User avatar
chrissie1
Senior Guru
Senior Guru
LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135
LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135
LTD Gold - Rating: 2135LTD Gold - Rating: 2135
 
Posts: 9475
Joined: Wed Oct 10, 2007 7:18 pm
Location: Belgium
Unrated

Re: Call .net Webservice using JQuery?

Postby damber on Thu Oct 16, 2008 12:32 pm

doesn't matter that it is .NET really - it is a remote web page that returns xml or json or html (or whatever).

It does matter how you want to request the data though - is it a GET or POST etc. This will determine which method you want from the jquery api (though you can use the lower level jquery.ajax() call rather than $.get() or $.post() etc)

The jquery API for ajax calls has several examples that should help: http://docs.jquery.com/Ajax

One example from that list to use a get request and then run a function on callback:

  1. $.get("test.cgi", { name: "John", time: "2pm" },
  2.   function(data){
  3.     alert("Data Loaded: " + data);
  4.   });
  5.  


or for loading it directly to a data element, like your example:

  1. $("#tdiv").load("http://localhost:50860/Services/Service1.asmx/People");
  2.  


from here: http://docs.jquery.com/Ajax/load#urldatacallback

The Jquery API Documentation is really useful and easy to understand - so if you haven't seen it before now, it might make life a bit easier :-)
a smile is worth a thousand kind words, so smile, it's easy! :-)


CODE: $5
WORKING CODE: $500
PROPERLY DESIGNED & WORKING CODE: Priceless
User avatar
damber
LTD Admin
LTD Admin
LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663
LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663
 
Posts: 3138
Joined: Tue Oct 09, 2007 1:48 pm
Location: North Wales, UK

Re: Call .net Webservice using JQuery?

Postby damber on Thu Oct 16, 2008 1:07 pm

chrissie1 wrote:Because I consider webservice as part of the dataaccesslayer. And as such could be replaced by a local datalayer on your local server. I would always keep a layer in between them that can call both if needed. Just a small thought.


Chrissie,

I'm not sure I follow the bit about "local datalayer on your local server", are you refering to a data access layer on the client / UI? I assume you're talking about the actual server, in which case..

Web services are a presentation (server) tier component - just like a User Interface (from a presentation server perspective), a System Interface provides a view into the application that runs through the application tier (and enveloped layers) through to the data tier etc. This way the System Interface (e.g. Web service) can re-use the same application logic and thus lower level layers consistently along with the User Interface (e.g. Web UI Presentation Server). A web service in this context (for a web app) is just another way of saying what the html says, except for systems to understand instead.

How you interact with other applications from the application tier may be abstracted through a data access layer to give you consistency of your domain model in the core application and abstract away from the technical differences of Database A, File B, Queue C, Application D etc, however the web service in this context is part of the other applications presentation tier - in this case, the data access layer can conceivably be considered the 'client' in that part of the process.

Consuming a web service in a UI client is a common and natural thing in a web application. Should we not do this, a lot of application functionality of modern web apps would be impossible (well, at least very difficult.. screen scraping in javascript wouldn't be a happy time ;-) ).

And (I think we talked about and agreed this a few months ago) web services are NOT CRUD wrappers, they provide an interface to application functionality, and as such sit between the application and the client (UI or system).

If I've misunderstood what you said please let me know - I'm not sure if you meant data access layer on the server or the client.
a smile is worth a thousand kind words, so smile, it's easy! :-)


CODE: $5
WORKING CODE: $500
PROPERLY DESIGNED & WORKING CODE: Priceless
User avatar
damber
LTD Admin
LTD Admin
LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663
LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663
 
Posts: 3138
Joined: Tue Oct 09, 2007 1:48 pm
Location: North Wales, UK
Unrated

Re: Call .net Webservice using JQuery?

Postby chrissie1 on Thu Oct 16, 2008 1:20 pm

I mean dataacecslayer on the server. I could agree with you if the webservices were the only way to the data then they would form a nice barrier between. But I never considered webservices the only way to the data. What if the webservice isn't yours? but a free supplier from somewhere. Would you still use javascript to get at the data? or would you build an aspx that connects to the data (as a layer in between)?

I know webservices are technically not just CRUD operations. But are they controllers/presenters of your page? I didn't think they were. So I always think of them as providers of data and therefor hide them behind a servicelayer.

Not being used to Ajax and the whole webthing I haven't really thought about the whole thing. But in winforms I would never bind my views directly to a webservice. Perhaps I'm to paranoid.
pink fuzzy slippers
User avatar
chrissie1
Senior Guru
Senior Guru
LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135
LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135
LTD Gold - Rating: 2135LTD Gold - Rating: 2135
 
Posts: 9475
Joined: Wed Oct 10, 2007 7:18 pm
Location: Belgium
Unrated

Re: Call .net Webservice using JQuery?

Postby AlexCuse on Thu Oct 16, 2008 2:35 pm

Thanks Damian, I did look at the JQuery documentation but didn't find anything that helped. I think its' because I'm somewhat green when it comes to javascript. I tried a few things last night, and the call seemed to be working (not causing an error anyway - I was using the method here: http://encosia.com/2008/03/27/using-jqu ... -services/ as well as the $.post method). I'm wondering if maybe its' a problem with how I am trying to consume the data, I was only getting [object Object] returned (if JSON request) or object if xml. I'll keep fiddling and hopefully get it working.

Chrissie - my webservice will return an array of points to display on a map. I'm currently doing this by building the javascript on the server side (with all my data hardcoded into it) and registering the script each time (so it requires a full postback to refresh the map). So I'm trying to eliminate the postbacks and make things a bit more responsive.

I understand your concerns, but I think that it mainlyy just depends on what you want your webservice to do. That's the beauty of 'em I guess, that they're so useful for both client and server side.
Say what you like about the tenets of National Socialism Dude, at least it's an ethos
User avatar
AlexCuse
LTD Admin
LTD Admin
LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031
LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031
LTD Gold - Rating: 1031
 
Posts: 5523
Joined: Tue Oct 09, 2007 5:26 pm
Location: Pennsylvania, US
Unrated

Re: Call .net Webservice using JQuery?

Postby damber on Thu Oct 16, 2008 7:43 pm

Chrissie, how would you provide portlets ?

First, let's just clarify the different scenarios and perspectives:

1) Provide a Web Service API (Publisher)
2) Consume a Web Service API within Application Logic (Consumer at the Server)
3) Consume a Web Service API within the UI e.g. portlets, ajax calls etc (Consumer at the Client)

As Alex is the publisher, he should not place his web service api anywhere other than in the presentation (server) tier, to ensure he can re-use his application functionality and logic in the same way the user interface does when it is generated (e.g. html from the server to the client).

If he wants his application to consume some information from another application for some processing (e.g. to post to his database or create a composite view of data from his and another application), then he should do this at the application tier and behind a data access layer which is effectively the Client for data / web service sources. Forget about the overall complexity of that application, and it essentially becomes analogous to a browser client (in the web context) - a browser accepts multiple protocols of multiple data structures from multiple sources and provides a consistent view of that.. kinda like a data access layer, no? so in concept at least the pattern is very similar, just juxtaposed to another part of the solution.

If he wants his UI to have access to content from the server (most likely structured data, but anything is possible) then he would access the web service he needs directly from the UI - which in the vast majority of cases will be his own web services - due to security restrictions it is not common to fetch content from different domains via the client (e.g. Cross Domain AJAX calls)... which is what I think you're thinking of. But in this case it's not what is being done - it is a fetch from the same domain for content to be used in the web UI - e.g. a page component refreshed without a full page cycle - which is actually just like requesting a page, ironically.

Also, the beauty is, as Alex notes - that web service from your application that can feed your UI, can also be consumed by another application, resulting in that application using point 2 above to consume it

Also, to ensure we're talking about the same things - when I say Presentation (server) tier - I mean the web server and the page generation done before sending to the client - and it should provide Data, Structure, Style and Behaviour components for the UI to render and execute - and that behaviour may enable dynamic updating of content from a remote web service api.

what I thought you might mean from your first post is that the UI/client should have a local data access layer - and in some ways I think that's a reasonable idea... at least in concept. That is kind of what you get with using a framework like jquery - ok it's fairly basic in that respect, but in essence it abstracts away from the data source and returns data as requested and even potentially reformated (e.g. to XML or JSON). In a connected yet sometimes disconnected world, that could prove quite a useful approach to transition local vs remote storage etc.
a smile is worth a thousand kind words, so smile, it's easy! :-)


CODE: $5
WORKING CODE: $500
PROPERLY DESIGNED & WORKING CODE: Priceless
User avatar
damber
LTD Admin
LTD Admin
LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663
LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663LTD Silver - Rating: 663
 
Posts: 3138
Joined: Tue Oct 09, 2007 1:48 pm
Location: North Wales, UK
Unrated

Re: Call .net Webservice using JQuery?

Postby chrissie1 on Thu Oct 16, 2008 8:04 pm

I think we are using different names for the same thing.

Still I think that in an MVC triad the javascript belongs to the view. And in your reasoning the webservice is the Controller. Right? in my opinion the controller should be calling the webservice and not the view. But if you use webservices as your controller then I can understand that.

But what if you consume webservices from a different source (like not one you control)? Would you still call them from the javascript?

Stop the presses.

After reading your reply a couple of times. I can see we are talking about the same thing, just giving at different name (you should learn English it would help. ;-))
pink fuzzy slippers
User avatar
chrissie1
Senior Guru
Senior Guru
LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135
LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135LTD Gold - Rating: 2135
LTD Gold - Rating: 2135LTD Gold - Rating: 2135
 
Posts: 9475
Joined: Wed Oct 10, 2007 7:18 pm
Location: Belgium
Unrated

Re: Call .net Webservice using JQuery?

Postby AlexCuse on Fri Oct 17, 2008 3:40 am

Sorry to distract from the discussion (it is a good one, and raises valid points) but I got this working:

  1. <script type="text/javascript">
  2.     $(document).ready(function() {
  3.         //Google Maps Part
  4.         if (GBrowserIsCompatible()) {
  5.             var map = new GMap2(document.getElementById("map"));
  6.             map.addControl(new GSmallMapControl());
  7.             map.addControl(new GMapTypeControl());
  8.             map.setCenter(new GLatLng(40.234464, -75.475597), 11);
  9.             function createMarker(latitude, longitude, name, age, gender, status, friend) {
  10.                 var point = new GLatLng(latitude, longitude);
  11.                 var icon = new GIcon(G_DEFAULT_ICON);
  12.                 icon.image = (friend == 'true') ? ("http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png") : ("http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png");
  13.                 markerOptions = { icon: icon };
  14.                 var marker = new GMarker(point, markerOptions);
  15.                 GEvent.addListener(marker, "click", function() {
  16.                     marker.openInfoWindowHtml("<font color='#000000'>Name:<b>" + name + "</b>" + "<br>Age: " + age + ", Gender: " + gender + "<br>Status: " + status + "<br>Friend?: " + friend + "</font>");
  17.                 });
  18.                 return marker;
  19.             }
  20.             //ajax call to get points
  21.             $.ajax({
  22.                 type: "POST",
  23.                 url: "http://localhost:50860/Services/Service1.asmx/People",
  24.                 contentType: "text/xml; charset=utf-8",
  25.                 dataType: "xml",
  26.                 success: function(xmlData) {
  27.                     //loop over the xml we get back, add points
  28.                     $(xmlData).find('Person').each(function() {
  29.                         map.addOverlay(createMarker(
  30.                             _latitude = $("Latitude", this).text(),
  31.                             _longitude = $("Longitude", this).text(),
  32.                             _name = $("Name", this).text(),
  33.                             _age = $("Age", this).text(),
  34.                             _gender = $("Gender", this).text(),
  35.                             _status = $("Status", this).text(),
  36.                             _friend = $("Friend", this).text(),
  37.                             _elevation = $("Elevation", this).text()
  38.                             )
  39.                         );
  40.                     });
  41.                 }
  42.             });
  43.         }
  44.     });
  45. </script>


There's a google maps plugin for JQuery that I hope I can use to clean it up a bit, but for now I am just happy to have it working :) Looks like this JQuery thing is gonna make java-scriptin' much more pleasant!
Say what you like about the tenets of National Socialism Dude, at least it's an ethos
User avatar
AlexCuse
LTD Admin
LTD Admin
LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031
LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031LTD Gold - Rating: 1031
LTD Gold - Rating: 1031
 
Posts: 5523
Joined: Tue Oct 09, 2007 5:26 pm
Location: Pennsylvania, US
Unrated

Re: Call .net Webservice using JQuery?

Postby rony123 on Wed Apr 12, 2017 1:39 am

Does it have any connections with bootstrap?
SCHRemedies
rony123
Newbie
Newbie
 
Posts: 2
Joined: Wed Apr 12, 2017 1:31 am
Unrated