In a typical Ajax based web application, the relatively
complex functionalities usually are performed on the client side. What the
server side requires to do is generally limited to carry out the operations
according to the requests sent from the client side or return the relevant data,
while the client-side JavaScript code will render or update the page according
to the states returned from the server and other data info.
Note the sample tag system is constructed based on the
ASP.NET 2.0/3.5 platform. So, as you will doped out, the server-side jobs are
mainly to provide an interface for the backend database access and to provide
the facilitation for the client-side JavaScript code to access the server-side
page in the Ajax way so as to access the database.
In this sample, in terms of database, we have utilized the existing
ripe and steady Microsoft Enterprise Library. With the help of Microsoft Data
Access Application Block, the database associated programming is drastically
simplified. In fact, if you are a Java/PHP fan (non-familiar with the .NET
platform) you can also easily achieve your target by the similar server-side programming.
Herein, for readers to gain a clearer sight into the system,
let us also illustrate the related architecture diagram, as shown in Figure 7.
Figure 7 - The rough architecture of the system
The web tag system in this article holds only one page (any
other pages just serves as the server-side web gates without providing .aspx
contents). Figure 8 indicates one of the running time snapshots of the main and
only page.
Figure 8 - One of the running time snapshots of the
web tag system
As shown from the above figure, the left part is the list of
the web tag categories. If you click some tag category, the corresponding tag
details will be displayed at the right side. Herein, you can drag either the
tag category or the tag item to change its displaying order. Moreover, you can modify
them in the Ajax mode. And also, adding new tag categories and tag info are all
performed in the Ajax style to achieve the partial updating effect.
OK, that is all for this part. In the next part, we will
start with the detailed programming.
