Adding a web service reference to a
A similar result can be achieved with even less effort by using the jQuery
ajax function to call a page method declared in the code-behind file. A page method is a public static method with the
[WebMethod] attribute so you must import the System.Web.Services namespace. However, remember that this is a static method on a web form class where thread concurrency is expected, so do not be tempted to read or write to shared data via static fields. Although appropriate locking will solve data synchronisation issues, blocking HTTP request threads will have a major impact on performance so it is strongly recommended that you keep your code-behind class stateless. To ensure thread-safety and scalability, only use local objects created within the page method and if you need to persist data across separate requests, use the
HttpContent.Current.Cache property. One last point is that cross-page calls to other page methods are not permitted for ASP.NET security reasons.
This is a very simplistic example, but a page method is an ideal place to make calls to a service to obtain the data which will be sent back to the client. This may be in the form of plain text, JSON, XML, or simply HTML markup which you can inject into the page.
Calling the page method from the client is quite straight forward thanks to jQuery’s
ajax function which takes the URL to the page method, and optionally some JSON parameters.
Note the resulting value obtained in the
getDataSuccess function is via the
<param>.d property which is new to ASP.NET 3.5. Earlier versions can use the parameter value directly. Also note the jQuery
ajax function returns an
XmlHttpRequest object (which is what makes AJAX calls possible in the first place).
The reason I call
XmlHttpRequest.abort first is to prevent overlapping AJAX requests. When you enter the world of asynchronous requests, you will quickly learn the problems associated with receiving responses at undefined times. For example: say you have two buttons on your page (button A and button B). Both buttons trigger AJAX calls to a page method and a single div displays the response from either button. The user clicks button A and then clicks button B immediately afterwards, so they would expect to see the result from button B. However the response from button A is a fraction slower and overwrites the result for button B. You see the problem? It’s all about synchronising the responses from your AJAX calls, and how you do this may depend on the particular functionality you’re trying to create. But by far the simplest solution is just to cancel the previous AJAX call, which is what
Here is some web form markup with a button which initiates the AJAX call:
The reason I’ve added the ‘Async’ suffix to the
onclick event handler name is because that’s exactly what it is – asynchronous. The
getDataAsync function starts an AJAX request and then returns control to the caller immediately (it does not block until the response is received) meaning that the user can continue working in the browser while the AJAX request is being made in the background. It’s always a good idea to make it clear in your code which functions/methods are asynchronous because of the added complexity they bring with them.
In summary, the jQuery
ajax function doesn’t do anything radically new except that you don’t need a
ScriptManager control on your page for it to work. It still uses the
XmlHttpRequest object, and just like