Analysis of AJAX-driven website development technology

I. Introduction

Recently, many Web sites have attracted the attention of most developers. These sites act more like a desktop application than a Web application. When you interact with it, they will quickly display a large amount of information to your browser without reload the page.

For example, at the Google Maps site (http://maps.google.com/), you can click the map, zoom in, zoom out, and drag back and forth the map as needed. Your browser continues to use data from the server, but your browser does not need to be refreshed. They do not use applets, nor Flash-like technologies. What have they done?

First, we will introduce Asynchronous JavaScript + XML, also known as Ajax. To accurately describe what Ajax is, we 'd better compare it with a technology other than Ajax. For most Web sites, interacting with a Web server is a single communication-just like talking to your friends through a wireless phone. You are talking about him or vice versa, but you cannot do it at the same time. For a Web user, when he/she fills in an online form and clicks the submit button, the entire page is sent to the Web server, and the user must wait for the server to accept the request. After the server completes request processing, it sends the processed content back to the browser. Only at this time can the user's page be refreshed for reference 1 ). Ajax is a powerful attempt to alleviate this series of events. When a user is on an Ajax Web site, the browser can call the Web server asynchronously in the background without sending the entire page.

Figure 1. Typical Web application architecture click to view the source Image

Ii. Detailed technical analysis

Currently, no SDK for Ajax exists, so this is not something you can download. It is actually a mix of several techniques that may or even do not use XML, although XML is explicitly mentioned in Ajax naming. Based on in-depth analysis at the underlying layer, we found that they use a hybrid technology-JavaScript, DOM, XMLHttp, and XML. However, remember that there are no standards or strict definitions for such technology. The implementation technology you found somewhere may be very different from the Implementation Technology of another place. However, the common point for Ajax implementation is that they all use JavaScript.

When a user interacts with a browser, JavaScript code processes various events, such as key-click or mouse-click events, and processes them separately. JavaScript uses the XMLHttpRequest object to contact the browser and remote server. In fact, Microsoft first implemented the XMLHttpRequest object in its Internet Explorer 5. Later, some other browsers added support for this object ).

The cool thing about the XMLHttpRequest object is that when it runs asynchronously in the background, it can interact with the Web server without the need to reload the entire page. When the Web server receives a request from the browser, it processes the request and sends the processed XML data back to the browser. The JavaScript Engine receives the processed XML and uses DOM to operate on the corresponding page elements. For example, on an Ajax-driven page, for example, Google Suggest website (www.google.com/webhp? Complete = 1 & hl = en). When you enter content in the search domain, each character is asynchronously transmitted to the server. It looks like when you enter data, words will quickly appear in the text field. In fact, in the background, each key-click sends several calls to the server. Users are basically not disturbed by this because their interaction is not interrupted and only a part of the page is refreshed. All of these can be effectively implemented, because only a small part of page data is transferred to the line, rather than the whole page.

Iii. Ajax example

Next, let's analyze a simple Ajax example. This example contains only two pages: HTMLStartPage.htm, see List 1) and HandleAjaxRequests. aspx, see List 2 ).

List 1: HTMLStartPage.htm

List 2 HandleAjaxRequests. aspx

Public Class HandleAjaxRequests Inherits System. Web. UI. Page Private Sub Page_Load (ByVal sender As System. Object, ByVal e As System. EventArgs) Handles MyBase. Load Dim sStringOut As String 'create a string variable to echo back to the browser SStringOut = "You typed:" + Request. QueryString ("sStringIn"). ToString () Response. Write (sStringOut) // "Reflection back" the text we received End Sub End Class

Among them, htmlstartpage.htm contains two text boxes. In the second text box. 2. The visual description of the sample program is displayed.

Figure 2. Sample program framework click to view the source Image

In fact, the most attractive part of Ajax is JavaScript. Through code analysis, we can see that the text box txtStart calls the SendValue (val) function for any onKeyUp event that occurs in the domain.

When you enter a character, the SendValue (Val) function is called and the HTTPRequest object is initialized first. At this point, we need to determine whether the current browser is IE or other browsers similar to Mozilla or Netscape, so that we can create the correct objRequestHTTPRequest object. Then, in order to process the server, we use the location of the aspx page that will execute our processing to load the "url" variable.

Next, let's analyze the three objRequest rows in the above Code. First, call the objRequest. onreadystatechange; onreadystatechange attribute to help us establish a callback function. This callback function is called only when the readyState attribute changes, that is, when we retrieve data from the Web server ).

ObjRequest. open requires three parameters: a get or POST, a string corresponding to the previously defined "url", and a Boolean value that defines whether asynchronous calls are performed. Note that if this Boolean value is set to true, a callback function must be provided.

The row objRequest. send (null) actually calls the aspx page defined in the "url" variable. However, before we go to the aspx page, pay attention to the callback function Process ()). Remember, this is the function that will be called after the Web Page code processes our request; it is our "re-entry" point. In this example, we simply retrieve values from our aspx page and put them in the second text box txtEchoOutPut.
For our aspx page, I try to make things as simple as possible. It receives key hits in the form of query string values. I add some text to the string "You typed:") to confirm that we arrive at the server, and then we "Reflection back" the same text. When this aspx page is triggered, the callback function Process () is fired inside JavaScript, as described above.

From the user's point of view, this operation is quite fast. When users enter content in the first text box, their characters will soon appear in the second text box. The entered character is actually "visited" once on the server and then returned.

4. Ajax is not a new thing"

It should be noted that Ajax is not a new technology-this method has been around for many years. Web sites like Google Now only prove the practicality and Stability of Ajax and make Web applications look very similar to desktop applications. For Ajax, a special point is that it can implement all these functions by using proven existing technologies. In other words, any standard browser can handle JavaScript and DOM) can work with similar technologies-you no longer have to install other independent content such as plug-ins.
In short, as we know, Ajax is not a replacement of all website things, but it does have a place, and is a kind of Web development skills that we should master.

5. AJAX support for ASP. Net 2.0

ASP. Net 2.0 adds support for AJAX technology by greatly improving the script model. In ASP. Net 2.0, they are called script callbacks rather than Ajax. The working principle is actually consistent with what I described earlier, but ASP. Net 2.0 has taken it further by providing a set of tools and corresponding support. For a comprehensive understanding of the callback mechanism in ASP. Net 2.0, refer to the article http://msdn.microsoft.com/msdnmag/issues/04/08/cuttingedge /.

Vi. Summary

Ajax blur the boundaries between layers in the N-layer structure in enterprise development because a large amount of work is migrated to the client. When using a developing technology to design such an application, we should choose carefully. Client browser) to achieve more processing work, but the JavaScript that completes this task has become increasingly complex. It needs to process key-clicks, mouse clicks, interaction with DOM, processing these events, and data collaboration with the server.

It should also be noted that many users may not want to run JavaScript on their browsers, so it is necessary to consider the type of visitor to your Web site during actual development.

(