I am trying understand the process / philosophy behind making the most efficient asynchronous calls from a client.
To start, my initial requirement is to have the ability to make an asynchronous call from the client to the server and return results in a sortable table based on a primary key / search string.
From my research, I think that the best or most efficient way is to make the call from a client action (click, blur, keyup, etc), via jQuery.ajax(), to a Web Method. The Web Method would then query the database for records and return them to the client as
a JSON serialized string. Then on the client side I would make jQuery parse the JSON data into a table for users to interact with (edit, delete, add).
So a roadmap would look something like this.
Client Action
jQuery.ajax(parameters) / Initiate Web Method on the server
Web Method calls Business Logic Layer
Business Layer calls Data Access Layer
Data Access Layer returns data to Web Method
Web Method returns JSON to client
jQuery parses JSON at the client
jQuery returns data to user's interface
Is there something that I am missing? Is there a more effiecient alternative? Thanks for your input!
These are both the same step, calling $.ajax automatically initiates the web service call. One thing to watch out for (and I see this a lot) is that ,as you pointed out, ajax is asynchronous by default. So don't put any code you want to fire after the $.ajax
call, instead put it in a success handler. Code immediately after the ajax call will fire , even if the web service hasn't completed. However, code in the success handler will only fire when the web service response has come back. For example:
//bind an event handler to the javascript click event of "btnSearch
$("#btnSearch").click(function(){
$.ajax({
url: 'ajax/test.asmx',
success: function(data) {
// This is only updated when the response return. This is where you want to update the UI
$('.result').html(data);
alert('Load was performed.');
}
});
// This is executed immediately. You don't want to update the ui here.
someMethod();
});
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});
Initiate Web Method on the server
These are both the same step, calling $.ajax automatically initiates the web service call.
Great! Thanks for the feedback. I have updated the original post so that it is clearer.
CodeHobo
One thing to watch out for (and I see this a lot) is that ,as you pointed out, ajax is asynchronous by default. So don't put any code you want to fire after the $.ajax call, instead put it in a success handler. Code immediately after the ajax call will fire
, even if the web service hasn't completed. However, code in the success handler will only fire when the web service response has come back. For example:
//bind an event handler to the javascript click event of "btnSearch
$("#btnSearch").click(function(){
$.ajax({
url: 'ajax/test.asmx',
success: function(data) {
// This is only updated when the response return. This is where you want to update the UI
$('.result').html(data);
alert('Load was performed.');
}
});
// This is executed immediately. You don't want to update the ui here.
someMethod();
});
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});
JoeFletch
Member
451 Points
147 Posts
Basic ASP.net, jQuery and WebService Questions
Apr 17, 2012 03:16 PM|LINK
I am trying understand the process / philosophy behind making the most efficient asynchronous calls from a client.
To start, my initial requirement is to have the ability to make an asynchronous call from the client to the server and return results in a sortable table based on a primary key / search string.
From my research, I think that the best or most efficient way is to make the call from a client action (click, blur, keyup, etc), via jQuery.ajax(), to a Web Method. The Web Method would then query the database for records and return them to the client as a JSON serialized string. Then on the client side I would make jQuery parse the JSON data into a table for users to interact with (edit, delete, add).
So a roadmap would look something like this.
Is there something that I am missing? Is there a more effiecient alternative? Thanks for your input!
kanakaraju
Member
94 Points
28 Posts
Re: Basic ASP.net, jQuery and WebService Questions
Apr 17, 2012 03:52 PM|LINK
fine, JSON serialization need to be handled.. for sharing the data across client browser and server
CodeHobo
All-Star
18669 Points
2648 Posts
Re: Basic ASP.net, jQuery and WebService Questions
Apr 17, 2012 04:12 PM|LINK
These are both the same step, calling $.ajax automatically initiates the web service call. One thing to watch out for (and I see this a lot) is that ,as you pointed out, ajax is asynchronous by default. So don't put any code you want to fire after the $.ajax call, instead put it in a success handler. Code immediately after the ajax call will fire , even if the web service hasn't completed. However, code in the success handler will only fire when the web service response has come back. For example:
//bind an event handler to the javascript click event of "btnSearch $("#btnSearch").click(function(){ $.ajax({ url: 'ajax/test.asmx', success: function(data) { // This is only updated when the response return. This is where you want to update the UI $('.result').html(data); alert('Load was performed.'); } }); // This is executed immediately. You don't want to update the ui here. someMethod(); }); $.ajax({ url: 'ajax/test.html', success: function(data) { $('.result').html(data); alert('Load was performed.'); } });Another thing, in terms of updating the ui. Take a look at JSRender.
https://github.com/BorisMoore/jsrender
It allows you to pass the results of your webservice to a template and makes dynamically adding elements to an html page much cleaner (and easier).
Blog | Twitter : @Hattan
JoeFletch
Member
451 Points
147 Posts
Re: Basic ASP.net, jQuery and WebService Questions
Apr 17, 2012 04:52 PM|LINK