Efficient Dynamic Web pages with data binding

Source: Internet
Author: User
Tags button type comparison modify object model requires sort client
Dynamic | data | page data binding (Binding) is not a new concept, IE 4.0 has been given a wealth of support. However, data binding has not been given the attention it deserves, and many developers seem more willing to use server-side scripting. In practice, however, data binding is more efficient in terms of both the code implementation of dynamic Web pages and the productivity of dynamic Web pages.

This paper will introduce the architecture, working principle and implementation of data binding, and finally make comparison and conclusion between the two methods in terms of programming workload and Web page efficiency.

First let's look at a simple example. A Web page shows the current inventory of the warehouse, the user can choose their own way to sort the data: by the name of the goods, prices, inventory and other orders. Using server-side technologies such as CGI, ISAPI, or ASP middleware, the application script will submit at least n times the data request to the server if the user needs n sort methods. For the same content of data, just because of the different display mode, it is necessary to do a number of database operations, consuming a lot of network bandwidth.

Another common example is that when a large amount of data needs to be paged out, each page will need to be reconnected to the server, submit a query request, and then locate the data. For these similar problems, data binding provides an efficient solution.

the architecture and working principle of data binding
The data-binding architecture consists of four components: the data source object, the data display object (consumers), and the two agents (the Binding agent and the table Reptition agent). The data source object provides data to the Web page, and the data display object is the HTML element that displays the data, and the agent is used to keep the work of the first two synchronized. Figure 1 shows the principle of the four parts working together.

As shown in Figure 1, the data source object is responsible for communicating with the background database server and caching the data returned by DB Server as a collection in the local cache. Thereafter, any operations on the dataset, such as sorting, filtering, subsets, and so on, are done in the local cache, and the agent is responsible for communication and synchronization between the data source and the HTML elements that display the data.

Http://www.ccidnet.com/tech/web/2000/12/25/image/001225i1-1.jpg
Figure 1

This way of working with data binding makes it possible for program developers to minimize the amount of script programming by using extended HTML and pluggable data source objects. Compared to the traditional server-side script-generated web pages, once the data has been downloaded to the client, no additional server requests are required for any operations on the data, thus saving network bandwidth and increasing the download speed.

implementation of data binding
This section describes each of its components and their implementation, based on the architecture of the data binding.

1. Data source Object

The first step in implementing data binding is to determine the data to be displayed on the Web page, select a suitable Data source object (DSO), and then refer to the DSO in the Web page. The flexibility of data binding first in support of a variety of Dso,ie 4.0 and above supports the following DSO types:

Tabular Data Control (TDC): This is a simple DSO that provides access to formatted text files. In other words, the data source provided by TDC is a text file formatted with the specified delimiter.

Remote data Service (RDS): The predecessor of RDS is ADC (Access Data Control). RDS communicates with the database through OLE-DB or ODBC to obtain data.

JDBC DataSource Applet: It differs from RDS in that the database connection uses JDBC.

XML data Source: Extensible Markup Language XML uses a standard way to describe and exchange structured data, and XML data is described in an open, text-based format and transmitted through a standard HTTP protocol. The nature of XML itself determines that it is inherently a flexible and powerful DSO. IE4.0 uses Java applets to implement XML dso;ie5.0 support for Data Island, which can be used directly by <XML> tags as DSO.

MSHTML Data Source: In addition to using external controls as DSO, developers can also define datasets in HTML documents and use the MSHTML itself as the data source.

Custom Type DSO: In addition to the above clearly defined five types of Dso,ie also support the user-defined type of DSO, as long as the DSO follow IE 4/mshtml Data Binding interface can.

DSO can be specified at design time, and can be dynamically added, modified, and deleted at runtime.

2. Data display objects that support data binding (Consumer)

The bindable HTML elements are divided into two broad categories: Single value objects (single-valued Consumer) and Table objects (tabular Consumer). A single Value object displays one field of the current record provided by the DSO, and each row element in the Table object corresponds to a different field in the record, repeating each record in the dataset as a template. Data display objects can be either bound to DSO at design time or dynamically bound at run time.

The dynamic characteristics of DSO and data consumer enable the existing element bindings to be modified; not only that, the DHTML object Model (DHTML objects Modle) also supports runtime dynamic addition of data-binding elements and data source objects. Therefore, the data can be downloaded asynchronously to the client. This feature allows developers to reduce the initialization download time for Web page content, and to display the contents of multiple different datasets on one page, resulting in high-quality service for the interactive user.

HTML elements that support data binding include: A, Applet, Button, Div, Frame, Iframe, IMG, Input (including checkbox, Hidden, Label, Password, Radio, text, etc.), Label, Marquee, Select, span, and textarea. Where a, Button, Div, IMG, Frame, Iframe, lable, marquee, and span support data binding with read-only functionality, and input (except Button type), Select, Textarea, object and Applet elements support the update functionality of the data being bound.

3. Operations supported by data binding

For a read-only type of data consumer, the operation supported by DataBinding is to display the data set provided by the DSO. Specific features include:

Dynamically add and modify the bound elements and DSO, such as changing the displayed data fields, filtering and sorting data sets, and so on.

Dynamically changing the way the dataset is displayed, data can be displayed in HTML format, or in a simple text format.

Dynamically controlling the number of displayed data, you can dynamically change the number of records that each page contains when paging is displayed.

The data consumer, which supports the update function, not only supports the above functions, but also supports the addition, modification and deletion of records. That is, the addition, modification, and deletion of data on an interactive page will affect the dataset to which the elements that display the data are bound. To facilitate control of datasets, data binding allows developers to use all the methods and properties provided by ADO (Active Data Objects) to maintain the data set provided by the DSO, including INSERT, Update, delete, and navigation.

A very important issue in data binding is the need to be clear about what data is being done to the data consumer: whether it works only on the local cache, or if the backend database is actually changed (this is related to the type of DSO). TDC, XML data source, and MSHTML data source only support changes in cache, and do not support the submission of data in the changed cache to the back-end database to which the data source is connected. The RDS and JDBC DataSource applets support the ability to modify back-end databases.

Comparison and conclusion
As you can see from table 1, data binding generates a significantly higher productivity of Web pages than server-side scripting. But using this method to the programmer's request is high, needs the deep understanding of the data binding to give full play to its fine characteristic. Complex work is the cost of high efficiency, in the application, developers should be based on specific needs and actual situation, choose the appropriate method or combination of both to achieve the highest performance price ratio.

Table 1

Compare items
Data binding
Server-side scripting
Web page Productivity
Data download
Synchronous/Asynchronous
Synchronous
Filter or sort the data
Only one connection is established
N-time operation to establish N-Time connection
Paging display
Only one connection is established
New connection and location data required for each page turn
Directly modify the database via data consumer
Support, and does not require programming
Supported, but requires programming
Conclusion
Faster download speeds, quicker interaction with users, high quality service
Download speed and interaction speed are not as good as data binding mode
Programming productivity
Programming flexibility
High
High
Programming effort
Less
Many
Programming complexity
High
Low
Conclusion
Less programming effort, flexible use. But requires programmers to be familiar with the special methods and properties supported by DSO and data consumer, programming is more complex than server-side scripts
Although the programming workload is big, but the use is nimble simple, only then familiar with the general database operation programmer can be competent



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.