Implementing AJAX-style Web development with ASP.net 2.0

Ajax|asp.net|web

In the past few months, the design patterns of highly interactive Web applications based on AJAX technology have rapidly spread. Today, highly configurable web applications, such as Google Maps and A9, are making a comprehensive use of these technologies to create a rich client user experience. In fact, the combination of AJAX technology for Web development is not the latest research results, but these technologies have been continuously updated and improved.

I have three goals in this article. First, I want to provide a high-level overview of AJAX-style applications. Second, I want to describe in detail the asynchronous callback mechanism for ASP.net 2.0. Finally, I want to look forward to future improvements to the tools and frameworks for building AJAX-style applications.

In summary, AJAX-style Web applications show the following characteristics:

· Asynchronous requests to the Web server-the browser user interface is not blocked while the user waits for a response from the Web server, and can continue to respond to user interaction.

· The latest improvements and standardization of the browser-based Logic-W3C DOM, which is highly dependent on JavaScript, provides support for implementing dynamic client-side UI updates.

· The Exchange-xmlhttp object based on XML data between the browser and the Web server makes it possible to communicate with the Web server without having to overload the page.

The biggest difference between an AJAX application and a traditional Web application is that each user interaction does not cause each HTTP request to be sent to the Web server; instead, the browser-based logic that is implemented with JavaScript holds control, The control then decides whether to make a local processing request or an asynchronous call to the server. Once the asynchronous call to the server ends, the client logic immediately updates the relevant parts of the UI appropriately. This approach has the following advantages:

· The user experience is richer. For example, when a Google map user drags a map in one direction, the system sends an asynchronous request to the server in the background, resulting in the ability to continue dragging after the screen boundary is exceeded. Since then, when the user drags the map further, the new image is already available. This leads to a feeling of faster response.

· Now that the call state across XMLHTTP to the server is not lost, Ajax applications can avoid the UI interface being regenerated every time.

· More logic is on the browser side, which reduces the number of requests to and from the Web server, thereby improving the potential of the system overall.

Despite this many advantages, AJAX-style applications still have some drawbacks. For example, the development of AJAX-style applications is difficult because of the lack of a corresponding framework (a set of UI classes similar to Windows MFC Toolkit) and the IDE (debug, visual design, and so on) support. In addition, development based on Ajax requires that one person must master at least two languages (DHTML and JavaScript). Also, the encoding of an AJAX-style application takes longer because it requires additional testing to enable it to support multiple browser versions and types. Finally, because JavaScript based source is accessible to end users, security analysis in the development process becomes very important.

Fortunately, for example, Atlas,ajax. NET and the advent of tools such as Google Maps API provide better support for building AJAX-style applications in the future. Next, we'll discuss the evolution of support technologies for building AJAX-style applications and what we expect from the latest release of Toolset Atlas.

Let's discuss the XMLHTTP object first. The object was first introduced by Microsoft and later implemented on other platforms, including Mozilla and Apple's Safari browser. XMLHTTP supports asynchronous requests to the Web server, allowing clients to invoke the Web server based on JavaScript logic without overloading the entire page.

In other words, it is entirely possible to interact with the Web server in the background without causing an entire page overload.

The use of XMLHTTP objects is fairly straightforward. For simplicity's sake, let's just consider IE-specific syntax. In fact, XMLHTTP's implementation syntax on other browsers is similar to the discussion here.

Request = new ActiveXObject ("Microsoft.XMLHTTP");
if (request) {request.onreadystatechange = CallbackHandler;
Request.open ("Get", URL, True);
Request.send ();
}
function CallbackHandler () {
if ((request.readystate = 4) && (Request.status = = 200) {
string response = Request.responsexml;
Update the relevant parts of the UI
}
}

In the code snippet above, the first step is to implement the instantiation of the Microsoft.XMLHTTP class. The second step is to set the properties of the XMLHTTP instance that we just created, including the address of the callback function that will be controlled when the XMLHTTP request completes. Because we are making an asynchronous call to the server (implemented by setting the third argument of the Open method to true), we need the address of the callback function. During the callback function implementation, we make additional checks to ensure that the request is completed.

[1] [2] [3] Next page