CN102299966B - Method and device for loading data in large volume at WEB client - Google Patents
Method and device for loading data in large volume at WEB client Download PDFInfo
- Publication number
- CN102299966B CN102299966B CN 201110261768 CN201110261768A CN102299966B CN 102299966 B CN102299966 B CN 102299966B CN 201110261768 CN201110261768 CN 201110261768 CN 201110261768 A CN201110261768 A CN 201110261768A CN 102299966 B CN102299966 B CN 102299966B
- Authority
- CN
- China
- Prior art keywords
- data
- flex control
- loading
- origin url
- web client
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a method and a device for loading data in a large volume at a WEB client. By the method and the device for loading the data in the large volume at the WEB client based on a Flex technology in combination with asynchronous data loading, the loading of the data in the large volume at the WEB client can be realized, the rate of loading the data in the large volume at the WEB client can be increased, and the usability and reliability of the WEB client are improved.
Description
Technical field
The invention belongs to the WEB technical field, in particular to a kind of method and device that loads big data quantity in the WEB client.
Background technology
In the WEB client, sometimes need to load big data quantity, the problem that but speed is slow when being limited to HTTP, HTTPS protocol transmission data, efficient is lower, generally can not load big data quantity in the WEB client, even the loading big data quantity, traditional method generally is to adopt following dual mode to realize at present:
First kind: by AJAX(Asynchronous JavaScript and XML, be asynchronous JavaScript and XML, be a kind of webpage development technology for the application of establishment interaction network page) next asynchronous loading big data quantity, this method exists a very big drawback to be exactly: WEB client loaded data finally marks to be presented on the html page by HTML, when data volume more big, the quantity of HTML mark also will be thereupon at double increase, thereby will cause page loading velocity more and more slower, operate more and more not smoothly, and thing followed problem also has: the internal memory that the WEB client takies system also becomes increasing.
Such as: a cell in tabulation of WEB client is used for showing set of number " 23 ", and the HTML marked content that passes to the WEB client from service end for "＜td〉23＜/td ", as can be seen, list has just turned over 5 times from character quantity, if the pattern that shows numeral also will be set, such as showing that red runic, left and right margins are 8, the HTML marked content that passes to the WEB client from service end is "＜td style=" color:#ff0000 so; Font-weight:bold; Padding-left:8px; Padding-right:8px; "〉23＜/td〉", it is just more that character quantity increases.
Second kind: the form by ActiveX or WEB client plug-in loads big data quantity, this mode also has a very big drawback: can't load big data quantity by browser-cross, ActiveX can only use at IE, and the WEB client plug-in can only be at specific browser, but also need to install, so this method is not high in the ease for use of WEB client.
As seen, use conventional methods and will be implemented in the method that the WEB client loaded and presented big data quantity, its limitation is bigger.
Summary of the invention
The purpose of the embodiment of the invention is to provide a kind of method and device at WEB client loading big data quantity, and it can improve the speed that the WEB client loads big data quantity, improves ease for use and the reliability of WEB client.
In order to reach purpose of the present invention, the present invention realizes by the following technical solutions:
A kind of method at WEB client loading big data quantity comprises:
A, the Flex control of WEB client is arranged root node data origin url;
B, Flex control obtain first according to root node data origin url from the WEB server and load data and be shown on this Flex control;
C, Flex control visiting first load all child nodes of data, obtain the parameter attribute value of the child node that needs continuation loading data, and the parameter attribute value is made up to form the son node number of this each child node according to origin url with described root node data origin url respectively;
D, Flex control according to described son node number according to origin url from the WEB server obtain second load data and with described first load data and be shown on this Flex control after merging;
E, repeating step C-D, Flex control visiting N-1 loads all child nodes of data, obtain the parameter attribute value of the child node that needs continuation loading data, and the parameter attribute value is made up to form the son node number of this each child node according to origin url with described root node data origin url respectively; The Flex control obtains N according to origin url from the WEB server according to described son node number and loads data and load data with described N-1 and be shown on this Flex control after merging.
Preferably, described Flex control comprises the loading data-interface and loads data-interface by URL.
Preferably, described Flex control is Tree control, and it is inherited in mx.controls.Tree class or its base class.
Preferably, described Flex control is grid control, and it is inherited in mx.controls.DataGrid class, mx.controls.AdvancedDataGrid class, spark.components.DataGrid class or described three's base class.
Preferably, described Flex control is the data of XML type from the loading data that the WEB server obtains.
More preferably, the loading data that obtain from the WEB server of described Flex control are asynchronous loading.
A kind of device at WEB client loading big data quantity comprises:
Information arranges module, is used for the Flex control of WEB client is arranged root node data origin url;
The Flex control, be used for according to the son node number of the child nodes at different levels under root node data origin url and the root node according to origin url from the WEB server obtain load data and merge after presented;
Wherein, described Flex control according to the son node number of the child nodes at different levels under root node data origin url and the root node according to origin url from the WEB server obtain load data and merge after the method that presented comprise:
(1) the Flex control obtains first according to root node data origin url from the WEB server and loads data and be shown on this Flex control;
(2) Flex control visiting first loads all child nodes of data, obtain the parameter attribute value of the child node that needs continuation loading data, and the parameter attribute value is made up to form the son node number of this each child node according to origin url with described root node data origin url respectively;
(3) the Flex control according to described son node number according to origin url from the WEB server obtain second load data and with described first load data and be shown on this Flex control after merging;
(4) repeating step (2)-(3), Flex control visiting N-1 loads all child nodes of data, obtain the parameter attribute value of the child node that needs continuation loading data, and the parameter attribute value is made up to form the son node number of this each child node according to origin url with described root node data origin url respectively; The Flex control obtains N according to origin url from the WEB server according to described son node number and loads data and load data with described N-1 and be shown on this Flex control after merging.
Preferably, the described loading data that obtain from the WEB server are the data of XML type.
Preferably, the described loading data that obtain from the WEB server are asynchronous loading.
By above technical scheme of the present invention as can be seen, the present invention relates to how in the WEB client, to load big data quantity and how to use the Flex technology to load big data quantity, big data quantity scope described here is generally 10,000 more than the record, presents in the mode of tree structure or tabulation.The existing mode that presents big data quantity in the WEB client is generally by HTTP, HTTPS agreement and obtains from server end, because HTTP is a WEB client and server end request and the standard (TCP) of replying, general speed is slower, can not show very big data volume in the WEB client so traditional method is general, can not show up to ten thousand nodes such as a tree menu, a form can not show up to ten thousand records.In order to address this problem, the invention provides a kind of based on the Flex technology and load method and the device of big data quantity in conjunction with asynchronous loading data in the WEB client, can be implemented in the WEB client and load big data quantity, it can improve the speed that the WEB client loads big data quantity, improves ease for use and the reliability of WEB client.
Description of drawings
Fig. 1 is the schematic flow sheet that loads the method for big data quantity in the WEB client provided by the invention;
Fig. 2 is the structural representation that loads the device of big data quantity in the WEB client provided by the invention;
Fig. 3 be the embodiment of the invention provide load the schematic flow sheet of the method for big data quantity in the WEB client;
The realization of the object of the invention, functional characteristics and excellent effect are described further below in conjunction with specific embodiment and accompanying drawing.
Embodiment
Below in conjunction with the drawings and specific embodiments technical scheme of the present invention is described in further detail, can be implemented so that those skilled in the art can better understand the present invention also, but illustrated embodiment is not as a limitation of the invention.
As shown in Figure 1, the invention provides a kind of method at WEB client loading big data quantity, comprising:
S100, the Flex control of WEB client is arranged root node data origin url;
S101, Flex control obtain first according to root node data origin url from the WEB server and load data and be shown on this Flex control;
S102, Flex control visiting first load all child nodes of data, obtain the parameter attribute value of the child node that needs continuation loading data, and the parameter attribute value is made up to form the son node number of this each child node according to origin url with described root node data origin url respectively;
S103, Flex control according to described son node number according to origin url from the WEB server obtain second load data and with described first load data and be shown on this Flex control after merging;
S104, repeating step S102-S103, Flex control visiting N-1 loads all child nodes of data, obtain the parameter attribute value of the child node that needs continuation loading data, and the parameter attribute value is made up to form the son node number of this each child node according to origin url with described root node data origin url respectively; The Flex control obtains N according to origin url from the WEB server according to described son node number and loads data and load data with described N-1 and be shown on this Flex control after merging.
Wherein, described N gets positive integer, suppose that described N layer has M child node (wherein, described M also gets positive integer), execute so after the described step S100-S104, the node number that is carried in the WEB client is N*M, thereby as can be seen, when described N and M satisfied certain size requirements, what present in the WEB client had been exactly big data quantity.
Under the preferred implementation, described Flex control comprises the loading data-interface and loads data-interface by URL.Wherein, described loading data-interface is used for loading and presenting the data that obtain from the WEB server at the Flex control, describedly loads data-interface by URL and is used for making that the Flex control can be by the URL that pre-sets to WEB server request msg.
Under the preferred implementation, described Flex control is Tree control, and it is inherited in mx.controls.Tree class or its base class.Described succession refers to, Flex control of the present invention is on all functions basis of inheriting original mx.controls.Tree class or its base class, also can expand some other function, such as expanding above-mentioned loading data-interface and loading data-interface by URL, can enough load and present data, and by the URL request msg.
Under the preferred implementation, described Flex control is grid control, and it is inherited in mx.controls.DataGrid class, mx.controls.AdvancedDataGrid class, spark.components.DataGrid class or described three's base class.In like manner, succession described here refers to, Flex control of the present invention is on all functions basis of the base class of inheriting original mx.controls.DataGrid class, mx.controls.AdvancedDataGrid class, spark.components.DataGrid class or described three, also can expand some other function, such as expanding above-mentioned loading data-interface and loading data-interface by URL, can enough load and present data, and by the URL request msg.
Under the preferred implementation, described Flex control is the data of XML type from the loading data that the WEB server obtains.This is because the data of XML type can well be expressed the data of tree structure and list structure.
Under the preferred implementation, loading data that described Flex control obtains from the WEB server are asynchronous loading.Generally speaking, in the WEB client, loading for big data quantity is all slow, the present invention adopts the mode of asynchronous loading for the loading of big data quantity so, load a spot of data first and show, merge on the original data from the remaining data of trend WEB server acquisition request and with the data that obtain on the backstage by the Flex control then, and finally present by the Flex control.
As shown in Figure 2, the present invention also provides a kind of device at WEB client loading big data quantity, comprising:
Information arranges module 10, is used for the Flex control of WEB client is arranged root node data origin url;
Wherein, described Flex control 20 according to the son node number of the child nodes at different levels under root node data origin url and the root node according to origin url from the WEB server obtain load data and merge after the method that presented comprise:
(1) Flex control 20 obtains first according to root node data origin url from the WEB server and loads data and be shown on this Flex control 20;
(2) Flex control 20 traversals first load all child nodes of data, obtain the parameter attribute value of the child node that needs continuation loading data, and the parameter attribute value is made up to form the son node number of this each child node according to origin url with described root node data origin url respectively;
(3) Flex control 20 according to described son node number according to origin url from the WEB server obtain second load data and with described first load data and be shown on this Flex control 20 after merging;
(4) repeating step (2)-(3), Flex control 20 traversal N-1 load all child nodes of data, obtain the parameter attribute value of the child node that needs continuation loading data, and the parameter attribute value is made up to form the son node number of this each child node according to origin url with described root node data origin url respectively; Flex control 20 obtains N according to origin url from the WEB server according to described son node number and loads data and load data with described N-1 and be shown on this Flex control 20 after merging.
Under the preferred implementation, the described loading data that obtain from the WEB server are the data of XML type.In like manner, this is because the data of XML type can well be expressed the data of tree structure and list structure.
Under the preferred implementation, described loading data that obtain from the WEB server are asynchronous loading.In the WEB client, loading for big data quantity is all slow, the present invention adopts the mode of asynchronous loading for the loading of big data quantity so, load a spot of data first and show, merge on the original data from the remaining data of trend WEB server acquisition request and with the data that obtain on the backstage by the Flex control then, and finally present by the Flex control.
As shown in Figure 3, it loads the schematic flow sheet of the method for big data quantity for what the embodiment of the invention provided in the WEB client, describes detailed implementation process of the present invention in detail below in conjunction with this accompanying drawing 3.
The first step: make the Flex control
The present invention is mainly based on the Flex technology, when the WEB client presents big data quantity, adopt self-defining Flex control, wherein, tree-like Flex control is inherited from mx.controls.Tree class or its base class, form Flex control is inherited from mx.controls.DataGrid class, mx.controls.AdvancedDataGrid class, spark.components.DataGrid class or front three's base class, because existing Flex control functionality is limited, so self-defined Flex control not only has all functions of existing Flex control, also need to expand following function:
That is, described Flex control need be expanded and load data-interface and load data-interface by URL, in addition, and described Flex control but also can expand other corresponding interface as required.Notice that in the present embodiment, the data source of this Flex control must be the data of supporting the data of XML form or supporting the XML form indirectly, because the XML data can well be expressed the data of tree structure and list structure.
Second step: data are handled
Flex control data presented is obtained by the WEB server, and form is the XML form, because the asynchronous loading of The data, so must set form and the standard that loads data.The principle that loads mass data is as follows:
1, the Flex control earlier loads a part of data by its root node data origin url that sets in advance from the WEB server (generally this partial data that at first loads is for giving data presented at the Flex control first, or be that the first order of clicking under "+" symbol needs data presented), as obtain following data 1:
2, the Flex control loads automatically according to the information that loads data or loads the next stage data by Event triggered, mainly the value according to attribute isload in the XML data determines whether to load data, if the value of attribute isload is true, expression loads, therefore further it has been carried out load operation again with regard to not needing, otherwise just expression needs to load subordinate's data, at this moment just the value of parameter attribute value params is combined into son node number according to origin url and passes to the WEB server as parameter and root node data origin url, the WEB server returns following data 2:
3, Flex control merging data 2 gets following data 3 on data 1, merges the attribute isload value of revising data 2 father nodes after finishing and is true.
If 4 child nodes for the loading data that get access to also have the next stage child node to need to load, then also need to obtain the next stage data, the step of obtaining the next stage data is repetition 2 and 3, and the like, be true up to the isload of all XML nodes property value.
The WEB client load big data quantity and the method detailed step that presents referring to Fig. 3, specifically describe as follows:
S201, initialization Flex control arrange the data origin url, and the data origin url is http://a.com/data as described;
S202, Flex control obtain data 1(according to the data origin url of importing into from the WEB server and see above) and be presented on the Flex control;
All nodes of S203, the automatic ergodic data 1 of Flex control;
S204, to find all nodal community isload of data 1 be the node of false;
S205, load the operation that data are obtained for each such node, a node of Xuan Zeing for example, the params property value of its taking-up is a=b, then params property value while and the above-mentioned data origin url with this node is combined as the data origin url of this node and it passed to the WEB server, and for example the described UTL that newly obtains is http://a.com/data a=b;
S206, WEB server return corresponding data 2(according to the described data origin url of sending and see above);
S207, merge to data 2 in the data 1 a new big XML data source to show by the Flex control simultaneously;
S208, ergodic data 2, repeating step S205 is to load the data of next stage;
S209, judge whether to travel through all nodes, if, then change step S210, if not, then change step S204.
S210, big data quantity loaded at this moment, can present big data quantity on the Flex control.
The above only is the preferred embodiments of the present invention; be not so limit claim of the present invention; every equivalent structure or equivalent flow process conversion that utilizes specification of the present invention and accompanying drawing content to do; or directly or indirectly be used in other relevant technical fields, all in like manner be included in the scope of patent protection of the present invention.
Claims (9)
1. the method at WEB client loading big data quantity is characterized in that, comprising:
A, the Flex control of WEB client is arranged root node data origin url;
B, Flex control obtain first according to root node data origin url from the WEB server and load data and be shown on this Flex control;
C, Flex control visiting first load all child nodes of data, obtain the parameter attribute value of the child node that needs continuation loading data, and the parameter attribute value is made up to form the son node number of this each child node according to origin url with described root node data origin url respectively;
D, Flex control according to described son node number according to origin url from the WEB server obtain second load data and with described first load data and be shown on this Flex control after merging;
E, repeating step C-D, Flex control visiting N-1 loads all child nodes of data, obtain the parameter attribute value of the child node that needs continuation loading data, and the parameter attribute value is made up to form the son node number of this each child node according to origin url with described root node data origin url respectively; The Flex control obtains N according to origin url from the WEB server according to described son node number and loads data and load data with described N-1 and be shown on this Flex control after merging.
2. the method at WEB client loading big data quantity as claimed in claim 1 is characterized in that, described Flex control comprises the loading data-interface and loads data-interface by URL.
3. the method at WEB client loading big data quantity as claimed in claim 2 is characterized in that described Flex control is Tree control, and it is inherited in mx.controls.Tree class or its base class.
4. the method that loads big data quantity in the WEB client as claimed in claim 2, it is characterized in that, described Flex control is grid control, and it is inherited in mx.controls.DataGrid class, mx.controls.AdvancedDataGrid class, spark.components.DataGrid class or described three's base class.
5. the method at WEB client loading big data quantity as claimed in claim 1 is characterized in that described Flex control is the data of XML type from the loading data that the WEB server obtains.
6. as claimed in claim 5ly load the method for big data quantity in the WEB client, it is characterized in that, the loading data that described Flex control obtains from the WEB server are asynchronous loading.
7. the device at WEB client loading big data quantity is characterized in that, comprising:
Information arranges module, is used for the Flex control of WEB client is arranged root node data origin url;
The Flex control, be used for according to the son node number of the child nodes at different levels under root node data origin url and the root node according to origin url from the WEB server obtain load data and merge after presented;
Wherein, described Flex control according to the son node number of the child nodes at different levels under root node data origin url and the root node according to origin url from the WEB server obtain load data and merge after the method that presented comprise:
(1) the Flex control obtains first according to root node data origin url from the WEB server and loads data and be shown on this Flex control;
(2) Flex control visiting first loads all child nodes of data, obtain the parameter attribute value of the child node that needs continuation loading data, and the parameter attribute value is made up to form the son node number of this each child node according to origin url with described root node data origin url respectively;
(3) the Flex control according to described son node number according to origin url from the WEB server obtain second load data and with described first load data and be shown on this Flex control after merging;
(4) repeating step (2)-(3), Flex control visiting N-1 loads all child nodes of data, obtain the parameter attribute value of the child node that needs continuation loading data, and the parameter attribute value is made up to form the son node number of this each child node according to origin url with described root node data origin url respectively; The Flex control obtains N according to origin url from the WEB server according to described son node number and loads data and load data with described N-1 and be shown on this Flex control after merging.
8. the device at WEB client loading big data quantity as claimed in claim 7 is characterized in that, the described loading data that obtain from the WEB server are the data of XML type.
9. as claimed in claim 7ly load the device of big data quantity in the WEB client, it is characterized in that, the described loading data that obtain from the WEB server are asynchronous loading.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN 201110261768 CN102299966B (en) | 2011-09-06 | 2011-09-06 | Method and device for loading data in large volume at WEB client |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN 201110261768 CN102299966B (en) | 2011-09-06 | 2011-09-06 | Method and device for loading data in large volume at WEB client |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN102299966A CN102299966A (en) | 2011-12-28 |
| CN102299966B true CN102299966B (en) | 2013-10-09 |
Family
ID=45360136
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN 201110261768 Active CN102299966B (en) | 2011-09-06 | 2011-09-06 | Method and device for loading data in large volume at WEB client |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102299966B (en) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104572430B (en) * | 2013-10-24 | 2018-04-27 | 腾讯科技（深圳）有限公司 | A kind of test method, the device and system at terminal applies interface |
| CN103593473A (en) * | 2013-11-28 | 2014-02-19 | 国家电网公司 | Form displaying method and system |
| CN104281676A (en) * | 2014-09-29 | 2015-01-14 | 蓝盾信息安全技术股份有限公司 | Method for dynamically generating query lists on basis of flex |
| CN104462247B (en) * | 2014-11-19 | 2018-10-09 | 北京奇虎科技有限公司 | webpage loading method and device |
| CN105488123B (en) * | 2015-11-23 | 2019-03-26 | 国云科技股份有限公司 | A kind of method that quick load multistage pulls down selection, linkage frame |
| CN107861964A (en) * | 2017-03-23 | 2018-03-30 | 平安科技（深圳）有限公司 | Image loading method and device |
| CN110987079A (en) * | 2019-12-19 | 2020-04-10 | 安徽天玄智能科技有限公司 | Safety environment and intelligent lightning on-line monitoring and early warning system and method |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101609474A (en) * | 2009-07-24 | 2009-12-23 | 国网电力科学研究院 | A kind of based on the data encapsulation of FLEX and the method for distribution |
| CN101826085A (en) * | 2009-12-30 | 2010-09-08 | 厦门市美亚柏科信息股份有限公司 | AJAX-based method for importing/exporting large file into/from web page on line |
-
2011
- 2011-09-06 CN CN 201110261768 patent/CN102299966B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101609474A (en) * | 2009-07-24 | 2009-12-23 | 国网电力科学研究院 | A kind of based on the data encapsulation of FLEX and the method for distribution |
| CN101826085A (en) * | 2009-12-30 | 2010-09-08 | 厦门市美亚柏科信息股份有限公司 | AJAX-based method for importing/exporting large file into/from web page on line |
Also Published As
| Publication number | Publication date |
|---|---|
| CN102299966A (en) | 2011-12-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102299966B (en) | Method and device for loading data in large volume at WEB client | |
| CN105630902B (en) | A method of rendering and incremental update webpage | |
| US8799353B2 (en) | Scope-based extensibility for control surfaces | |
| CN102184184B (en) | Method for acquiring webpage dynamic information | |
| JP5496113B2 (en) | Queries that narrow down targets using the OMA DM protocol | |
| CN102891765B (en) | A kind of method realizing web network topology based on SNMP and HTML5 | |
| CN108572819A (en) | Method for updating pages, device, terminal and computer readable storage medium | |
| CN104778211A (en) | Method, client, server and system for refreshing partial page modules | |
| CN101291253A (en) | Man-machine command interaction method for network management terminal based on graphical interface | |
| CN112100550A (en) | Page construction method and device | |
| CN101673199A (en) | Terminal parameter configuration server and automatic generating method of software interface thereof | |
| CN103577568A (en) | Cross-platform mobile safety comprehensive information aggregation system and method adopting same | |
| CN103546476A (en) | Transmission method and system for information between page assemblies | |
| CN102447585A (en) | Method and device for converting network configuration protocol response message into command line | |
| CN102520933A (en) | Method and device for establishing tree menu based on user right | |
| EP2933731A1 (en) | Method for configuring browser bookmarks, device and terminal thereof | |
| CN103885764A (en) | Network media information display system, method, device and server | |
| CN1808381A (en) | User panel manager and method for creating user-defined dynamic subwindow | |
| CN112269576A (en) | Component display method and device, server and storage medium | |
| CN112711418A (en) | Front-end interface layout method and device for multiple components, electronic equipment and storage medium | |
| CN110059278A (en) | Web page configuration method, server and computer readable storage medium | |
| CN101587437A (en) | Tree control designing and generation system and method | |
| CN102508887A (en) | System and method for resolving digital television interaction service markup language | |
| CN104361098A (en) | Method applied to customization of nodes in topological graph of cloud system | |
| CN106168959A (en) | Page layout method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant |