CN101122921B - Method forming tree-shaped display structure based on ajax and html - Google Patents
Method forming tree-shaped display structure based on ajax and html Download PDFInfo
- Publication number
- CN101122921B CN101122921B CN2007101221162A CN200710122116A CN101122921B CN 101122921 B CN101122921 B CN 101122921B CN 2007101221162 A CN2007101221162 A CN 2007101221162A CN 200710122116 A CN200710122116 A CN 200710122116A CN 101122921 B CN101122921 B CN 101122921B
- Authority
- CN
- China
- Prior art keywords
- data
- page
- tree
- ajax
- html
- 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.)
- Expired - Fee Related
Links
Images
Landscapes
- Information Transfer Between Computers (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a method for forming a tree display structure based on ajax and html tags, which utilizes a combination of ajax technologies and html-tagged javaScript to display data in a tree structure. In order to increase efficiency, the invention is designed to firstly display level 2 data and then display lower level data of a level on each click on the level. The uUse of ajax technologies enables partial refresh of a page while users will not feel the refresh, and greatly increases the page efficiency.
Description
Technical field
What the present invention relates to is a kind of computer interface display packing, particularly be a kind of method that forms tree-shaped display structure based on ajax and html mark.
Background technology
Tree is that a class is used data structure very widely.The organizational form of the family tree of clan and modern enterprise all is a tree in the human society.In computer realm, the management structure of file, the page table in the memory management, the index in the database etc. also all are trees in the file system.Along with the develop rapidly of Internet, tree in the application of browser/server (Browser/Server, be called for short B/S) application system also more and more widely.
Need list tree root earlier at page demonstration tree effectively arranges all data based relationships between superior and subordinate then, be marked at according to html again and demonstrate tree on the page, owing on the page, organize tree structure to need a lot of codes, add data volume when huge page processing speed become very slow, cause the page overtime and show imperfect.
At above-mentioned defective, creator of the present invention has obtained creation of the present invention finally through long term studies and test.
Summary of the invention
The objective of the invention is to, provide a kind of method, in order to overcome above-mentioned defective based on ajax and html mark formation tree-shaped display structure.
For achieving the above object, the technical solution adopted in the present invention is, a kind of method based on ajax and html mark formation tree-shaped display structure is provided, and it step that comprises is:
Step a: client sends request of access;
Step b: server accepts request, two-step mechanism data before inquiring from database;
Step c: described data are transferred on the corresponding page from key-course;
Steps d: after the page receives data, the tree of two-step mechanism before generating;
Step e: click institutional icon, the page will send request to server once more;
Step f: server accepts request, and inquires the Lower Establishment structured data from database; And be converted to the data back page of XML form;
Step g: the page receives the data of XML form, carry out dom and resolve, with the data load after resolving below the current mechanism;
Step h: whether click institutional icon once more, judging has the Lower Establishment that has obtained below the current mechanism, if carry out following step I, otherwise carries out above-mentioned steps f;
Step I: described Lower Establishment is hidden or demonstration;
Wherein before each the generation during next stage of rank mechanism, all to add last layer div label in other outside of this prime, when launch next stage mechanism be not shown out-of-date, the described page will transmit a request to server and obtain data, when next stage be shown out-of-date, with the data of hiding hide or show the next stage of this preceding rank mechanism of described div label.
Preferable, the tree of two-step mechanism is realized by javaScript and DHTML mark before generating in the described steps d;
Preferable, the data load after will resolving in the described step g realizes by javaScript and DHTML mark below current mechanism;
Preferable, described steps d also comprises: whether decision mechanism is company or department simultaneously, and adds suitable picture, adds the click event of html label picture on picture, click event will be carried out and launch or close other mechanism tree of current level;
Preferable, when click event will be carried out expansion, the described page can be created an XmlHttpRequest object, sent parameter to server, and produced the xmldoc object that a reception server passes over data by this object;
Preferable, when the page by the XmlHttpRequest object when server sends parameter, server is carried out the method for corresponding business layer according to parameter at key-course, obtains the data of next stage mechanism of the mechanism of current expansion;
Pass the data that data become the xml form back the page again at key-course after obtaining data, the page can get access to the data of the xml data layout of passing back automatically;
Resolve the xml data dynamically generate subordinate again by dynamic html and javaScript organizational structure by dom then;
Beneficial effect of the present invention compared with the prior art is, for having used ajax technology and dynamic html mark javaScript script combination data presentation to be tree with the form of tabulation, and be designed to show 2 grades data earlier that in order to raise the efficiency every then click one-level demonstrates subordinate's data of this grade again! Owing to used the ajax technology to make the page local to refresh to allow the variation that refreshes of the imperceptible page of user, and improved the efficient of the page greatly.
Description of drawings
Fig. 1 is the process flow diagram that the present invention is based on the method for ajax and html mark formation tree-shaped display structure.
Embodiment
Below in conjunction with accompanying drawing, be described in more detail with other technical characterictic and advantage the present invention is above-mentioned.
Ajax is to use the Web application and development method of client script and Web server swap data.Like this, the Web page need not interrupt interaction flow and add sanction again, just can dynamically upgrade.Use Ajax, the user can create direct, high available, abundanter, the more dynamic Web User Interface near local desktop application.
Ajax is used for describing one group of technology, and it makes browser provide more natural viewing experience for the user.Before Ajax, Web website force users enters submission/wait/show again example, and user's action is always synchronous with " think time " of server.Ajax provides the ability with the server asynchronous communication, thereby the user is freed from the circulation of request.By means of Ajax, can be when the user click button, use JavaScript and DHTML new user interface more immediately, and send asynchronous request to server, upgrade or Query Database to carry out.When request is returned, just can use JavaScript and CSS to come correspondingly more new user interface, rather than refresh full page.
Ajax is not a kind of technology.In fact, it is combined in new powerful mode by several flourish technology.Ajax comprises:
Expression based on XHTML and CSS standard;
Use Document Object Model dynamically to show with mutual;
Use XMLHttpRequest and server to carry out asynchronous communication;
Use JavaScript to bind all.
The core of Ajax is JavaScript object XmlHttpRequest.This object is introduced in Internet Explorer 5 first, and it is a kind of technology of supporting asynchronous request.In brief, XmlHttpRequest uses JavaScript to file a request and processing response to server, and does not block the user;
Dynamic HTML (Dynamic HTML is called for short DHTML) is not a new language in fact, and it is a kind of integrated of HTML, CSS and client script.
DHTML is based upon on the basis of original technology, can be divided into three aspects:
First aspect HTML, various page elements objects in the page just, the content that they are dynamically handled;
Second aspect CSS, CSS attribute also are the contents of dynamically handling, thereby obtain dynamic form effect;
Third aspect client script (for example JavaScript), HTML and CSS on its manipulation of physical Web page or leaf.
Use the DHTML technology, the Web page maker is created out can and comprise the page of dynamic content with user interactions.In fact, DHTML makes the dynamically all elements on the manipulating web pages of Web page maker---or even after these pages are loaded.Utilize DHTML, the Web page maker can dynamically hide or displaying contents, the definition of modification pattern, active element and be the element location.DHTML also can make the Web page maker show external information on webpage, and method is that element is bundled on the external data source (as file and database).The equal available browser of all these functions is finished and be need not to ask Web server, also need not the webpage of reloading simultaneously.This is because all functions are included in the html file, along with to the request of webpage and the disposable browser end that downloads to.
JavaScript has a kind ofly had JavaScript based on object and event-driven and script with security performance, can make webpage become lively.The purpose of using it is to be implemented in the webpage a plurality of objects of link with HTML Hypertext Markup Language, java script language, with the network client reciprocation, thereby can develop the application program of client.It is by realizing in the html language that embeds or be tuned in standard.JavaScript is a kind of language based on client browser, the reciprocal process that the user fills in a form in browsing, verifies just makes an explanation to carry out and finishes calling in JavaScript source code in the html document by browser, even must call the part of CGI, browser is only submitted to long-range server with the information behind user's input validation, has significantly reduced server expenses.
See also shown in Figure 1ly, it is to the present invention is based on the process flow diagram that ajax and html mark form the method for tree-shaped display structure, and it step that comprises is:
Step a: client sends request of access;
Step b: server accepts request, two-step mechanism data before inquiring from database;
Step c: described data are transferred on the corresponding page from key-course;
Steps d: after the page receives data, the tree of two-step mechanism before generating;
Step e: click institutional icon, the page will send request to server once more;
Step f: server accepts request, and inquires the Lower Establishment structured data from database; And be converted to the data back page of XML form;
Step g: the page receives the data of XML form, carry out dom and resolve, with the data load after resolving below the current mechanism;
Step h: whether click institutional icon once more, judging has the Lower Establishment that has obtained below the current mechanism, if carry out following step I, otherwise carries out above-mentioned steps f;
Step I: described Lower Establishment is hidden or demonstration;
The tree of two-step mechanism is realized by javaScript and DHTML mark before generating in the wherein said steps d; Data load after will resolving in the described step g realizes by javaScript and DHTML mark below current mechanism;
Wherein, described steps d also comprises: whether decision mechanism is company or department simultaneously, and adds suitable picture, adds the click event of html label picture on picture, and click event will be carried out and launch or close other mechanism tree of current level;
Because system is OO MVC pattern (Model-View-Controller, model-view-controller) application in the Web exploitation, Model represents that the Business Logic used, View are the presentation layer pages of using, and Controller provides the processing procedure control of application.Applied logic, processing procedure is divided into different assemblies with display logic, module realizes by this MVC Design Mode, and inter-module can carry out mutual and reuse.
We are bright to be the multi-layer framework that adopts J2EE, in conjunction with the Struts framework presentation layer, Business Logic and data Layer is divided into different modules during design.The outward appearance that presentation layer is absorbed in tree shows, processing procedure is controlled to be the page and provides and turn to and data, and key-course is as the contact between presentation layer and the model layer; Business Logic is the storage and the expression of service logic and data.
During this page of user capture at first system can from database, inquire the preceding two-step mechanism data that comprise root under the tree, data are passed on the corresponding page at key-course then.After the page receives data, the tree of two-step mechanism before at first generating by javaScript and dynamic html mark, whether this can decision mechanism be company or department simultaneously, add suitable picture, the click event that adds the html label picture on picture, click event will be carried out and launch or close other mechanism tree of current level.Certainly remaining other Data Source of expansion level will be realized by the ajax technology except 2 grades of organization data that show at the beginning.
When clicking corresponding mechanism deploying, the page will be realized transmitting and receive data by the ajax technology, the page can be created an XmlHttpRequest object, sends parameter to server, and produces an xmldoc object that can reception server passes over data by this object.
When the page by the XmlHttpRequest object when server sends parameter, server can be carried out corresponding business method once at key-course according to parameter, obtains the data of next stage mechanism of the mechanism of current expansion.Pass the data that data become the xml form back the page again at key-course after obtaining data, the page can get access to the data of the xml data layout of passing back automatically.Resolve the xml data dynamically generate subordinate again by dynamic html and javaScript organizational structure by dom then.
When the next stage of the current rank of each generation mechanism, all to add last layer div label in other outside of this prime, be not shown when launching next stage mechanism, the page will transmit a request to server and obtain data, yet when next stage be shown out-of-date we can be with the data of hiding hide or show the next stage of this preceding rank mechanism of div label, whether had data just can accomplish as long as judge under the mechanism of current click.So just can avoid sending request to server and obtaining the data that we had obtained of repetition, the pressure that brings to server is asked in the transmission that the time of so not only having saved also can reduce repetition.
The above only is preferred embodiment of the present invention, only is illustrative for the purpose of the present invention, and nonrestrictive.Those skilled in the art is understood, and can carry out many changes to it in the spirit and scope that claim of the present invention limited, revise, even equivalence, but all will fall within the scope of protection of the present invention.
Claims (6)
1. one kind forms the method for tree-shaped display structure based on ajax and html mark, it is characterized in that it step that comprises is:
Step a: client sends request of access;
Step b: server accepts request, two-step mechanism data before inquiring from database;
Step c: described data are transferred on the corresponding page from key-course;
Steps d: after the page receives data, the tree of two-step mechanism before generating;
Step e: click institutional icon, the page will send request to server once more;
Step f: server accepts request, and inquires the Lower Establishment structured data from database; And be converted to the data back page of XML form;
Step g: the page receives the data of XML form, carry out dom and resolve, with the data load after resolving below the current mechanism;
Step h: whether click institutional icon once more, judging has the Lower Establishment that has obtained below the current mechanism, if carry out following step I, otherwise carries out above-mentioned steps f;
Step I: described Lower Establishment is hidden or demonstration;
Wherein, before each the generation during next stage of rank mechanism, all to add last layer div label in other outside of this prime, when launch next stage mechanism be not shown out-of-date, the described page will transmit a request to server and obtain data, when next stage be shown out-of-date, with the data of hiding hide or show the next stage of this preceding rank mechanism of described div label.
2. the method based on ajax and html mark formation tree-shaped display structure according to claim 1 is characterized in that the tree of two-step mechanism is realized by javaScript and DHTML mark before generating in the described steps d.
3. the method based on ajax and html mark formation tree-shaped display structure according to claim 1 is characterized in that the data load after will resolving in the described step g realizes by javaScript and DHTML mark below current mechanism.
4. the method based on ajax and html mark formation tree-shaped display structure according to claim 1, it is characterized in that, described steps d also comprises: whether decision mechanism is company or department simultaneously, and add suitable picture, the click event that adds the html label picture on picture, click event will be carried out and launch or close other mechanism tree of current level.
5. the method based on ajax and html mark formation tree-shaped display structure according to claim 4, it is characterized in that, when click event will be carried out expansion, the described page can be created an XmlHttpRequest object, send parameter to server, and produce the xmldoc object that a reception server passes over data by this object.
6. the method based on ajax and html mark formation tree-shaped display structure according to claim 5, it is characterized in that, when the page passes through the XmlHttpRequest object when server sends parameter, server is carried out the method for corresponding business layer according to parameter at key-course, obtains the data of next stage mechanism of the mechanism of current expansion;
Pass the data that data become the xml form back the page again at key-course after obtaining data, the page can get access to the data of the xml data layout of passing back automatically;
Resolve the xml data dynamically generate subordinate again by dynamic html and javaScript organizational structure by dom then.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2007101221162A CN101122921B (en) | 2007-09-21 | 2007-09-21 | Method forming tree-shaped display structure based on ajax and html |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2007101221162A CN101122921B (en) | 2007-09-21 | 2007-09-21 | Method forming tree-shaped display structure based on ajax and html |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN101122921A CN101122921A (en) | 2008-02-13 |
| CN101122921B true CN101122921B (en) | 2011-09-28 |
Family
ID=39085256
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN2007101221162A Expired - Fee Related CN101122921B (en) | 2007-09-21 | 2007-09-21 | Method forming tree-shaped display structure based on ajax and html |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN101122921B (en) |
Families Citing this family (21)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101901220B (en) * | 2009-05-27 | 2012-05-23 | 北京启明星辰信息技术股份有限公司 | General data display method and equipment |
| CN101707627B (en) * | 2009-10-30 | 2014-11-05 | 中兴通讯股份有限公司 | Method and device for presenting page information |
| CN101763423B (en) * | 2010-01-21 | 2014-02-19 | 中兴通讯股份有限公司南京分公司 | Method for realizing presentation of tree-structure data in World Wide Web page as well as system and device therefor |
| CN102339291B (en) * | 2010-07-23 | 2014-09-10 | 阿里巴巴集团控股有限公司 | Method and equipment for generating list |
| CN101976264A (en) * | 2010-11-16 | 2011-02-16 | 深圳市五巨科技有限公司 | Method, device and system for user-defined page data display |
| CN102073686A (en) * | 2010-12-24 | 2011-05-25 | 汉柏科技有限公司 | Vertical dynamic loading method of page document and device thereof |
| CN102651000A (en) * | 2011-02-28 | 2012-08-29 | 福建星网视易信息系统有限公司 | XML (extensible markup language)-based financial data display method and system |
| CN103166916B (en) * | 2011-12-12 | 2016-08-17 | 深圳市金蝶中间件有限公司 | Method for updating pages and system |
| CN102629195B (en) * | 2012-02-09 | 2015-06-10 | 福建联迪商用设备有限公司 | Display control method for self-service terminal software webpage interface |
| CN102981853B (en) * | 2012-11-15 | 2015-11-25 | 北京奇虎科技有限公司 | A kind of Text Entry by webpage submits long article method and apparatus originally to |
| CN102982138B (en) * | 2012-11-19 | 2017-02-15 | 北京思特奇信息技术股份有限公司 | Customer identity dynamically showing method and device |
| US9934204B2 (en) * | 2012-11-30 | 2018-04-03 | Lenovo Enterprise Solutions (Singapore) Pte. Ltd. | Conditionally reload workarea user interfaces using a flag indicator to balance performance and stability of web applications |
| US9483571B2 (en) | 2013-03-04 | 2016-11-01 | International Business Machines Corporation | Persisting the state of visual control elements in uniform resource locator (URL)-generated web pages |
| CN103473214B (en) * | 2013-09-06 | 2017-04-12 | 百度在线网络技术（北京）有限公司 | Method and device for displaying page characters |
| CN103744676A (en) * | 2014-01-07 | 2014-04-23 | 上海新炬网络技术有限公司 | Method for displaying relevance of multi-level information |
| CN103995835A (en) * | 2014-04-25 | 2014-08-20 | 江苏思迈斯电子商务有限公司 | Method for searching for webpage elements of user interface framework |
| CN105487848B (en) * | 2014-10-08 | 2019-03-19 | Tcl集团股份有限公司 | A kind of the display method for refreshing and system of 3D application |
| CN104699820B (en) * | 2015-03-30 | 2018-06-12 | 郑州悉知信息科技股份有限公司 | Product classification navigation edit methods, Webpage display process and the device of a kind of webpage |
| CN108259533B (en) * | 2016-12-28 | 2022-03-04 | 阿里巴巴集团控股有限公司 | Data transmission method and device |
| CN107544801A (en) * | 2017-08-30 | 2018-01-05 | 杭州迪普科技股份有限公司 | The generation method and device of tree menu in a kind of webmaster page |
| CN112102050A (en) * | 2020-02-10 | 2020-12-18 | 云池网络科技(上海)有限公司 | Financial management system of Internet of things card platform |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1987850A (en) * | 2005-12-20 | 2007-06-27 | 腾讯科技（深圳）有限公司 | Method for realizing AJAX webpage |
-
2007
- 2007-09-21 CN CN2007101221162A patent/CN101122921B/en not_active Expired - Fee Related
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1987850A (en) * | 2005-12-20 | 2007-06-27 | 腾讯科技（深圳）有限公司 | Method for realizing AJAX webpage |
Non-Patent Citations (2)
| Title |
|---|
| 李楠等.一种基于ajax的动态树形结构的设计与实现.《2007中国控制与决策学术年会论文集》.2007,论文第735页右栏第1行-第737页右栏倒数第7行,图2-3. * |
| 邓少勋.基于AJAX技术的web树状菜单实现.《贵州工业大学学报(自然科学版)》.2007,第36卷(第2期),论文第65页倒数第13行-第68页第14行,图2-5. * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN101122921A (en) | 2008-02-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN101122921B (en) | Method forming tree-shaped display structure based on ajax and html | |
| US10592319B2 (en) | API notebook tool | |
| CN101127655B (en) | Method and system for integrating existing www systems | |
| US8930824B2 (en) | Facilitating propagation of user interface patterns or themes | |
| US8161498B2 (en) | Providing globalization functionalities for javascript applications | |
| CN104573066B (en) | Page multiplexing method and device | |
| US20020032706A1 (en) | Method and system for building internet-based applications | |
| CN103988200B (en) | For the lightweight frame of web applications | |
| CN102184184B (en) | Method for acquiring webpage dynamic information | |
| US20070239726A1 (en) | Systems and methods of transforming data for web communities and web applications | |
| CN101909082B (en) | Model-driven grid portal configuration system and method | |
| CN101826085A (en) | AJAX-based method for importing/exporting large file into/from web page on line | |
| EP1283993A2 (en) | Method and system for building internet-based applications | |
| CN102567400B (en) | Method for realizing Web visit and Web server | |
| CN103383687A (en) | Page processing method and device | |
| CN102253986A (en) | Method and device for improving webpage displaying effect in multiple terminals | |
| US9516088B2 (en) | Systems and methods to consistently generate web content | |
| CN102004729A (en) | Method and system for showing website webpage and website server | |
| CN102929636A (en) | Method and device for creating human-computer interaction interface | |
| CN113268232B (en) | Page skin generation method and device and computer readable storage medium | |
| Walczak et al. | Adaptable mobile user interfaces for e-learning repositories | |
| CN108763296B (en) | Database structure generation method and device for online checking and editing | |
| CN105117473A (en) | Information inquiry system based on Web and information inquiry method based on Web | |
| KR100792109B1 (en) | Wrapper creating apparatus for extracting a web-information in mobile web-server based user interface and method therefor | |
| Jakupov | Development of a web-based application for automated energy management system |
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 | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20110928 Termination date: 20140921 |
|
| EXPY | Termination of patent right or utility model |