First, the question is proposed
With the rise of Internet technology, the structure of the application has been turned from the original C / S (Client / Server, Client / Server) structure mode to B / S (Browser / Server, Browser / Server) mode. The client of the B / S structure is completely borne by the browser, which brings great convenience to the publishing and maintenance of the application; but because it is not possible to provide a rich GUI graphical interface as the client of the C / S structure, The data entry interface is too simple and is not humanized, and the problem of data entry efficiency is often caused by the complaints of customers. Such as: Enter key cannot be switched between the input focus; you cannot easily display, delete, modify the operation, etc., delete, modify the record directly in a page of the browser. The problem of these data entry does not require special techniques and methods in C / S mode, and the general development tools can be solved, and in the software design of the B / S structure, it is necessary for software developers to spend their own efforts and time. Go to solve this problem. This article gives a method based on JavaScript and DBGRID control technology to enhance data entry efficiency under the B / S structure, and hope to do some exploration in addressing the entry speed and easy operationalness of the B / S structure client. The role of the throwing jade.
Second, JavaScript and DBGRID control introduction
JavaScript is a scripting language based on object (Object) and event driven and has a safe performance. It can be directly embedded in an HTML document, or it can be loaded. It responds directly to the user or customer input in an event-driven manner, without having to depend on the browser itself without the web service program, as long as you can run your browser, and support the JavaScript browser to properly execute, and action The environment has nothing to do.
DBGRID can be known as a data grid, starting to appear, is a data operation control provided for the database application development under the C / S mode, which is used to display and edit the record in the database table, which is characterized by the mesh. Therefore, using this control can improve the efficiency of data entry.
In the B / S mode, the client (browser) can improve the user's operation interface by using the DBGRID control. Alternative DBGRID controls are divided into both ActiveX technology and based on two forms based on JavaScript technology. These two DBGRID controls are different when used. When using an ActiveX technology-based DBGRID control, you need to install on each client, so once the needs changes, the controls on each client must also re-download and install. When using the DBGRID control based on JavaScript technology, it is not necessary to install separately. It is equivalent to executing the entry interface written by the browser directly to perform the JavaScript scripting language, and saves the user's operation data, so that the DBGRID control varying due to changes in demand, it is also the browser to directly explain the execution, It doesn't need to be installed, which reduces the difficulty of software upgrades.
Sample code for using two DRGRID controls in IE is given below:
(1) DBGRID control based on ActiveX technology
ID = "Control ID name, provide HTML code to access the control of the control"
ClassID = "The only ID number of the control object in the operating system"
CodeBase = "Control Location" sets the width, height, etc. of the control in IE>
(2) Use a DBGRID control based on JavaScript technology
The JavaScript function function init_load () is called when importing, which mainly includes the following functional statements in this function:
1 "New Query object, define new query ('querymaster') in the JS packet of DBGRID;
2 "The XML file binding with the server-side fixed format is defined to define the names of the DBGRID.
Querymaster.openurl = "readxml.jsp? name = student.xml";
3 "Setting the server-side procedure for submitting data
Querymaster.posturl = "studentsave.jsp";
4 "Definition Query Column Name
VAR f = New Field ("Student_no", "VARCHAR");
QueryMaster.fields.Add (f);
5 "Define DBGRID objects
New DBGRID ('dbgrid');
6 "Setting attributes in HTML, such as wide, higher, and add data grid
Var col1 = new colorn ('student_no', 'student number);
COL1.WIDTH = 30;
DBGRID.COLS.ADD (col1);
7 "Set the data set, bind with the previous QUERY object
DBGRID2.DATASET = querymaster;
The association entry implementation method described herein is to use a DBGRID control based on JavaScript technology.
Third, the implementation technology of the B / S structure client-related enrollment function
In the B / S structure, the client-side enhanced entry function refers to when entering a record in the browser, when entering a code, do not need to be submitted to the server to find the database, you can display the code directly on the client. Related information. For example, in the software management of a student's performance, when the client-connected entry function is not provided, after entering the school number, you must first submit it to the server, in order to display the student's name, gender, class, etc. Information; if the client-based enhanced entry function can be provided, an input learning can be implemented at the client, and the student's name, gender, class and other information can be displayed.
When using JavaScript-based DBGRID controls, the client is used to store data in an XML file on a local hard disk. The user operates in the DBGRID entry area. When an ID number in the underlying information is input, the XML parser instance (Microsoft.xmldom) embedded in the IE browser will be used by triggering the corresponding JavaScript method. Microsoft.xmldom object parses the XML file of the basic information, finds the node of the DOM (Document Object Model) tree where the ID number is located, removes its corresponding other information, and displays the corresponding data item position in the DBGRID.
When the user adds, modifies or deletes the operation of the DBGRID entry area on the browser, the JavaScript method will be triggered into the input stream of the corresponding change to another XML format. The input stream is in the client's memory. In the middle, it is called entry information. When the user submits the final entry result to the server, there is a corresponding program parsing the XML input stream in the server side, analyzing what added, modified, deletes data, and updates the analysis results to the database table. The working principle of the client-connected entry function is shown in Figure 1:
The specific implementation of the association entry function in student performance management is given below. The basic information of the client student is organized into XML files in the following format:
"
?
"
Name =
"
?
"
Gender =
"
?
"
Home address =
"
?
"
>
After entering a student's student number in DBGRID, a JavaScript method will trigger a JavaScript method, including: (1) Defining ActiveXObject
Var v_studentdata = new activXObject ("Microsoft.xmLDom");
v_studentdata = false;
(2) Analysis of local XML files
v_studentdata.loadxml (?. xml);
(3) Find the corresponding node
NOD = v_studentdata .selectsinglenode ("// Row [@ 学 号 = '" "");
IF (NOD! = null) {
Remove the required data
Vaddress = nod.getttribute ("Name");
}
(4) Assign the value to the DBGRID corresponding data item
Figure 1 Schematic diagram of the working principle of the client-side enhanced entry function
In practical applications, the user needs Lenovo displayed information is not necessarily in a table of the database, but to join in several tables in the database; in addition, even these basic information, the content is also changed, such as A student's home address changes, and so on. Therefore, the application software also needs to provide a program on the server, responsible for the basic information maintenance, ie query and organize the basic information required by the user, form an XML file, and download it locally; when the basic information changes, Automatically organize new basic information, remind users or automatically update the client's XML file.
Fourth, conclude
In a B / S structure that needs to meet the more large entry workload, the simpleness and rapidity of user operations are issues that have to be considered. This article uses JavaScript and DBGRID controls to implement client-based entries, which can improve the efficiency of data entry. In the actual application of the software, when the records entered by the user are in average, the software running speed is normal, and the entry speed of the interface and the easy-operability can meet the user's business needs. However, due to this method, the user's entry information is stored in the client memory in the form of an XML document. When the user reaches more than 300 pieces of data at once, the XML document in memory is very bloated, and the client entry The speed begins becomes very slow, so the format of the XML document for entry information should be more streamlined.
Implementing the use of the initial information to simplify the user entry operation method using microsoft.xmldom parsing the client XML file, and the structure of the document object model (DOM) is time consuming. For a DOM instance, the RAM they use can reach five times the input XML stream calculated by the original byte. This usually causes excessive switches that are excessively switched in use, causing the performance straight line to decline. This is also where this method can continue to improve.
