Blog
AJAX: The Technology that Saved the Web
Excerpt by Don Kiely | October 16, 2012
Many people see Ajax as the technology that saved the Web, that made it possible to create much richer Web 2.0 applications than was ever possible using just HTML and plain old JavaScript. Part of the key to Ajax's success is that it uses standards-based, widely implemented technologies instead of proprietary tools like Flash, Air, Silverlight, and many others. All modern browsers have an implementation of JavaScript and include the key object used to make asynchronous calls to the server, XmlHttpRequest (XHR).
Ajax is a powerful Web technology because it makes pages far more interactive to the user, performing actions and updating parts of the page with data from the Web server without requiring a full page refresh and accompanying flash of a blank page. This is one of the biggest visual differences between a regular Web application and a rich client application, and gives the illusion of running on the client machine even though it is in a browser. An Ajax page feels faster to the user and reduces the load on the server by requiring small chunks of data and HTML rather than the content of full pages on every user action. Ajax is inherently asynchronous, so it leaves the user interface responsive to the user even if the last operation takes a while to complete.
Updating a Web Page Using Ajax
Using Ajax to call a Web service on the server is one of the best ways to dynamically update part of a Web page using Ajax. You can request only the data you need to save bandwidth and thereby get the best performance, and you can do anything you want in the Web service to retrieve data. You can read files, hit a database, call other Web services, format the server's hard drive (although we don't recommend this one), whatever you want. Best of all, Ajax and jQuery can handle several different data formats, so you usually won't have to write any client-side JavaScript code to parse the response before using it.
There is really not all that much different when using the load method to retrieve data from a Web service rather than static HTML files. The HelloWorld.html sample page uses the HelloWorld Web service in AjaxServices to retrieve a string, which the page uses to update the content of three div elements on the page, as shown in Figure below. The Web service increments the number with each invocation, so that you can see that the page updates with each click.
The Web service that the page calls is just about as simple as a Web service can be, using the following code. The HelloWorld method returns a string consisting of the requisite Hello World along with an integer that increments with each call. There is nothing special about this Web service that indicates that the client page will use jQuery to invoke the method.
private static int count = 0;[WebMethod]public string HelloWorld(){count++;return "Hello World #" + count.ToString();}The following code defines the body section of the page. The only interesting thing here is that there are three div elements, which the page uses to demonstrate that using a 'div' selector for the load method will update all three of the matching elements. There is also a style in the page that sets the divSays1 element to 24pt font size, just to vary things a bit.
<body><h1>Hello World from Web Service</h1><button type="button" id="buttonSays">Get Info</button><p>The site says....</p><div id="divSays1"></div><div id="divSays2"></div><div id="divSays3"></div></body>The following code defines the click event function for the button. Yes, that's all the code you need to call the Web service and update the contents of the div elements with the string retrieved from the Web service. The sole argument in this very simple example is the URL with the name of the desired method appended as a path element.
$(function () {$('#buttonSays').click(function () {$('div').load('AjaxServices.asmx/HelloWorld');});});
Don Kiely
This course excerpt was originally posted October 16, 2012 from the online courseware ASP.NET 4 AJAX and jQuery Using Visual C# by Don Kiely