TWI610183B - An operational system for centralized management base on ajax website - Google Patents

Abstract

The present invention relates to a system for operating a common part of a control webpage based on AJAX technology, comprising a first display interface, a front end program module and a second display interface, the first display interface comprising a first common frame having a common identification tag. Receiving a first common data content, and a first constant change frame having a constant change identification tag to receive the first constant change data content, and the second display interface includes a second common frame and a second constant change frame, and the second common interface The framework loads the first common data content according to the common identification tag via the front-end program module, and the second constant change frame loads at least one constant data content according to the constant change identification tag via the front-end program module, wherein the first common frame and the first common frame The second common frame connects the first common data content by using a common identification tag.

Description

Based on AJAX technology to control the operating system of the common part of web pages

The invention relates to the field of network technology, and particularly relates to a framework for planting a common webpage control based on AJAX technology, so that web developers can conveniently use AJAX technology to load webpage content, so that the common part of the webpage is not It needs to be reloaded repeatedly, but when the user reorganizes the page, it can stay at the page content that the user is viewing, which can greatly improve the operation efficiency of the user terminal and the server computer.

The development of the website has become a very important technology and work. In today's society, the representative website of a group (or even an individual) has become another kind of facade. Therefore, various technologies of the website have emerged. Please refer to Figure 1A. And FIG. 1B is a schematic diagram of data transmission of a traditional website application system and an Ajax website application system, which includes at least one computer host 50, the computer host 50 includes a display device for providing a user to enable web browsing through the display device. And browsing the different web pages, wherein the computer host 50 is connected to a web server 10 by wire or wirelessly, and the web server 10 is connected to at least one database 60, which stores the required information in the web page. Various materials, and browsing the plurality of web pages to send a request to the web server 10, as shown in FIG. 1A, or sending a data request to the web server 10 through the Ajax engine, as shown in FIG. 1B, and the web server 10 according to the information Requesting and returning data to these web pages for display to provide users with information on the web pages.

Ajax (Asynchronous JavaScript And XML) is a web development technology for creating interactive web applications. Ajax differs from the traditional web application system in that the browser is responsible for establishing requests to the server and processing the incoming responses. Ajax modules A middle layer is provided to control this communication process. The Ajax engine is actually the JavaScript object and function that the front end calls when requesting server information. Unlike the traditional way in which a link is a URL set to another resource (like another web page), each link now becomes a call to the Ajax engine, which schedules and executes the requests, and These requests are asynchronous, meaning that they don't have to wait for a response, the interface can continue to operate, and the server part, which used to respond to HTML, images, CSS, or JavaScript, is now set to be used by the backhaul Ajax engine. data. These materials can be plain text, XML, or any data format you need, as long as the Ajax engine can interpret the data format.

The more complicated the current website is, the more pages there are in the website, and each page has many common parts, such as page logos or function menus. If the pages are loaded, if you can make these parts The part does not need to be reloaded, only the part of the difference content is replaced, which will improve the computer efficiency of the front-end user and the back-end server. In the past, the implementation of this aspect is no more than the following.

One is to use the frameset method provided by HTML to divide the page into several frames in advance, so that each frame can load the content separately. In the design, only the common part and the difference content part need to be placed in different frames. When the user switches the contents of each menu in the webpage, it is not necessary to repeatedly load the common part, and only the part of the difference content needs to be replaced. However, because this method destroys the integrity of the webpage, it has a negative impact on the browsing effect of the webpage, and it is rare at present.

The other is to use the iframe function provided by HTML. This method is actually an improved way of frameset. It is not destructive to the browsing effect of web pages, and the implementation method is almost the same as the way of frameset. Usually, it is the common part in design. The content is placed in the main page, and the difference is placed in the iframe. When the user clicks the menu to switch the content, only the iframe content needs to be reloaded. Although this method is very simple and convenient, it can effectively achieve the purpose. However, it is very fatal to the current use of web search engines. The use of iframes seriously affects web search engines. Search. The impact is mainly from two aspects. One is that the user can only enter from the initial page of the website. Therefore, for the search engine, only the click rate of the initial page can be calculated, and the second is that even the search engine can search. This page, but when the user clicks on the link, only the difference content of the page will be loaded, and the other common parts that are attached will not be loaded, which will seriously affect the integrity of the page view.

The third way is to use AJAX technology to load different content. This method is much different from the previous frame, which is more complicated, but it has a more significant improvement on the overall performance and performance of web browsing, but Search engine interference is more than iframe, because the current AJAX loading method only stores the difference as a form of data, rather than the form of a normal web page. In addition, the actual method is complicated, which leads to the development of web developers.

In view of the above, the inventors of the present invention have focused on the prior art and have devoted themselves to the use of academics to solve the above problems, which is the object of research and improvement of the present invention.

The main purpose of the present invention is to provide an operation system for planting a common part of the control webpage based on AJAX technology, and to map common parts of the webpage to simplify the modification of the exhibition maintainer, and to use When the user reorganizes the page, it will stay on the current page instead of returning to the so-called home page; at the same time, it will achieve the purpose of not hindering the search engine work.

In order to achieve the above object, the present invention provides an operating system for planting a common part of a webpage based on AJAX technology, comprising a first common framework comprising a common identification tag for receiving a first common data content; a first constant change frame, comprising a constant change identification tag for receiving a constant change data content; a front end program module; and a second display interface, comprising a second common frame, the front end program module Loading the first common data content according to the common identification tag; and a second constant frame, wherein the front end program module loads at least one constant data content according to the constant change identification tag.

In an embodiment of the invention, the common identification tag further includes at least one JavaScript file, and the front-end program module calls the common data content corresponding to the at least one JavaScript file call.

In a preferred embodiment, the first display interface further includes a plurality of first common frames, and each of the plurality of first common frames includes a corresponding plurality of first common identification tags, and each of the plurality of first common common tags The identification tag corresponds to each plural first common data content.

In an embodiment of the invention, the first common frame comprises a top frame, a one-tail frame or a menu frame.

According to an embodiment of the present invention, the server further includes at least one source code, and the front-end program module calls the at least one source code of the server according to the common identification tag to generate corresponding common content of the data. The second common framework.

In an embodiment of the present invention, the server further includes at least one source code, and the front-end program module calls the at least one source code of the server according to the constant change identification tag to generate the corresponding constant-change data content. Displayed in the second constant frame.

In an embodiment of the invention, the constant change identification tag includes a plurality of network address history records, and each of the source codes corresponding to the network address is used to sequentially display each of the corresponding constant change data. content

The invention also has the following effects, wherein the AJAX processing function in a specific js file only needs to be called by a specific way in principle, and can be used without a developer modification, which is quite convenient and the operation of the web page jump is expensive (including the parsing of the webpage) And the initialization of the various components of the webpage can be omitted, and the responsiveness of the webpage browsing can be improved a lot, the webpage response speed is accelerated and the page does not need to be refreshed.

10‧‧‧Server, server side

101‧‧‧Returned webpage

102‧‧‧Returned web content

11‧‧‧Common component part

12‧‧‧Constant part

20‧‧‧ front-end program module

30‧‧‧web browser

301‧‧‧ current webpage

302‧‧‧ Current web content

40‧‧‧Web server

50‧‧‧Computer host

60‧‧‧Database

710‧‧‧First display interface

711‧‧‧First Common Framework

712‧‧‧ first permanent change framework

720‧‧‧Second display interface

721‧‧‧Second Common Frame

722‧‧‧ second permanent change framework

A1‧‧‧Common identification label

A2‧‧‧First common information content

B1‧‧‧changed identification label

B2‧‧‧changed data content

C‧‧‧ source code

d‧‧‧Network address, network address history

Figure 1A is a schematic diagram showing the pattern of a traditional website application system.

Figure 1B is a schematic diagram of the AJAX website application system.

Figure 2A is a schematic diagram showing the operational system of the present invention.

Figure 2B is a schematic diagram showing the processing of the operating system of the present invention.

The detailed description and technical content of the present invention are set forth in the accompanying drawings.

Based on AJAX webpage technology, the main purpose is to improve the interactivity, usability and performance of the webpage. Since the traditional webpage technology adopts Synchronous, it must wait for the execution of the program on the server side. Before you can display new web pages, a software developer and user interface expert, the key principles to follow to develop a better Ajax web application: 1. Reduce the amount of data transfer: Ajax applications should transfer and receive as little information as possible from the server as much as possible; 2. Do not cause raids: the difference between Ajax applications and traditional web applications is that they are in the public Different user interaction modes, unlike the typical click and wait of traditional websites, some Ajax applications use other user interaction methods, such as: drag and drop the mouse or double click to select. No matter which user interaction mode you choose, you must cooperate with the user's operation to let the user know exactly what the next step will be. 3. Establish the convention: don't waste time inventing new ones, users are not familiar with it. User interaction mode; 4. Don't cause interference: reduce unnecessary webpage elements that can cause interference; 5. Easy to use: Imagine who your primary and secondary users will be, and they will want How to use the Ajax system you wrote. Don't build a car for you, just write the program for yourself. This will make your system be tied to a non-existent user. 6. Avoid downloading the entire webpage: After the first webpage is downloaded, all communication to the server should be done by Ajax. To control; 7. User priority: Try to make common use cases easy to complete, rather than forgetting to add advertising or cool effects.

There are several important key technologies in Ajax web technology, including HTML/XHTML (the main text display language), CSS (the style format for XHTML), and DOM (dynamically modifying a loaded web page file). ), XML (data exchange format), XSLT (convert XML to XHTML), XMLHttp (main communication middle layer), and JavaScript (the language used to write Ajax engine), where XHTML must be used when presenting information DOM is used to dynamically change the content of an existing web page without reloading the entire web page. JavaScript is used to establish a communication between the client and the server. It is also used to manipulate the DOM to change the content of the web page. One should use The application server, whether you choose to write PHP, JavaServlet/JSP, or .NET on the server side, you only need to make sure that the result is passed back to the front-end Ajax engine in the correct data format.

AJAX webpage is a technology that belongs to the client side (display layer). The browser on the client side must use the XMLHttpRequest of JavaScript to send the asynchronous Http Request. At this time, only the specified field data will be transmitted to the server, and the other pages of the webpage. The data will not be postback (PostBack), then the updated execution result will be downloaded to the client's browser through Http Response, and finally the updated execution result will be written back to DHTML or DOM by background execution through JavaScript. Document Object Model) The specified block is updated. The specified block is updated. Since the data is transmitted and received in an asynchronous mode, the user can continue to perform any operation on the page without changing the page. .

As mentioned above, Ajax is essentially a browser-side technology. The first problem that is inevitable is the compatibility of the browser. Different browsers have support for JavaScript/DOM/CSS. Some are not the same or have bugs, and even JavaScript/DOM/CSS support may be partially different between versions of the same browser, which results in most of the time debugging the browser when writing Ajax applications. Capacity rather than the application itself, therefore, most of the current Ajax link libraries or development frameworks mostly exist in the form of JS link libraries. Further, the main purpose of Ajax technology is to locally exchange data between clients and servers. As with the traditional master-slave architecture, it is inevitable that some of the business logic will be implemented on the client side, or partially on the client side, because the business logic may be scattered across the client and server, and The programming language implementation, which leads to the application is not easy to maintain, and further, if there is a user interface or business logic change requirements, plus the previous JavaScr The compatibility problem of ipt/DOM/CSS is more difficult to develop.

Referring to FIG. 2A, the architecture includes a first display interface 710, a front end program module 20, a second display interface 720, and a server 10. The first display interface 710 includes a first common interface having a common identification tag a1. a frame 711, and a first constant frame 712 having a constant change identification tag b1, and The second display interface 720 includes a second common frame 721 and a second constant frame 722. The second common frame 721 loads the first common data content a2 according to the common identification tag a1 via the front end program module 20, and the second common frame The variable frame 722 loads the constant change data content b2 according to the constant change identification tag b1 via the front end program module 20.

Preferably, the plurality of common interfaces of the plurality of display interfaces jointly load the same first common data content a2 according to the common identification tag a1; further, the common identification tag a1 further includes at least one JavaScript file, so that the front end The program module 20 calls the common data content a2 corresponding to the previous display interface according to the JavaScript file. In actual operation, the first display interface 710 can include a plurality of first common frames 711, and the second display interface 720 is corresponding to the first Displaying a plurality of common identification tags a1 of the plurality of first common frames of the interface 710, loading and displaying each of the plurality of common data contents a2 in the plurality of second common frames 721; in detail, the plurality of first in the implementation The common frame 711 is a top frame, a footer frame, and a menu frame, and the first display interface 710 is a web interface. When the web page is loaded into the second display interface 720 again, the top frame, the footer frame, and the menu frame are different. The corresponding common data content a2 is loaded according to each common identification tag a1, for example, the top frame loads the common information content (not shown) of the previous top frame.

More clearly, in FIG. 2A, the server 10 includes at least one original code c, and the front-end program module 20 calls one of the corresponding server original code c according to the common identification tag a1, and accordingly generates corresponding common data. The content a1 is displayed in the second common frame 721; in other words, when the first common frame 711 of the first display interface 710 of a web page is loaded with the common data content a2 and presented in the second common frame 721 of the second display interface 720, Or reorganizing the webpage to load the common data content a2, the front-end program module 20 calls the corresponding original code c of the server 10 according to the common identification label, and is used for displaying the second constant frame 722 of the second display interface 720 in addition to the webpage. In addition to the constant data content b2, the common data content a2 is reloaded by the common identification tag a1 of the webpage; for example, the setting is implemented through a webpage, such as The window.onload processing function, according to the AJAX request, reloads the common data content to the corresponding common framework to present a complete picture. (not shown)

In addition, referring to FIG. 2A, the front end program module 20 calls the original code c of the corresponding server according to the constant change identification tag b1, and the second constant change frame 722 displays the constant change data content generated according to the constant change identification tag b1. Further, the constant identification tag b1 includes a complex network address history record d, and each source code c corresponding to each network address d is used to sequentially display each of the constant data contents b2.

For a detailed description of this embodiment, please refer to FIG. 2B, which illustrates the operation mode of the operating system based on the AJAX technology in the webpage common framework control, and the invention is based on the AJAX technology in the webpage common framework control. The architecture of the server is configured to operate the information transfer between a server terminal 10, a front-end program module 20 and a web browser 30, wherein the web browser 30 provides a user to open a plurality of web pages. The webpage includes a common component part 11 and a constant change component part 12, first confirmed in a plurality of common component parts 11 in each web page of a web browser 30, and a plurality of constant variable component parts 12, and the aforementioned web browser Can be google chrome, Microsoft's IE, Firefox, Baidu, Sina, QQ.., etc., and the common component part 11, for example, including the possibility of placing a title, a list, and placing the address and contact information at the bottom of the page. .. a variety of materials, you can draw a web page frame as drawn in Figure 2B.

The front-end program module 20, which can be JavaScript, reads the webpage content of each common component part 11 through AJAX technology, and the front-end program module 20 is stored in a separate JS file, and provides these through introduction. The initialization function call of the web page is used.

In this embodiment, each of the aforementioned common component parts 11 is written as a separate webpage, and in the foregoing example, header.html, menu.html, footer.html..., and AJAX webpage can be written. The HTML semantic tags of the described page structure include <header>, <section>, <article>, <nav>, <aside>, and <footer> to create an HTML page with self-describing capabilities, making it easy for developers to Quickly access the elements of the specified semantics, put the common parts to be presented, and use The <section> tag with a specific id is framed, which does not affect the effect of the specified page when viewed independently.

The <section> tag of the specific attribute id as described above is placed in each webpage of the developed website, and the content is blank, and a specific js file is added to enable the corresponding common part of the webpage to be loaded through AJAX. The content is injected into the corresponding <section> tag, and the constant variable component part 12 of the webpages is placed with a specific id, such as <section id=content>, to form the webpage framework described in the present case, and the AJAX framework Automatically attach an onclick event handler to the hyperlinks <a> in different websites. It also means that when the user clicks on the webpages in the website, the event handler will be called to determine whether it is If the page in the website is negative, the page is redirected in the traditional way. Otherwise, the target page is loaded through the AJAX call, and the content in the <section> tag with the specific id=content is used. Extracted and loaded into the <section> tag of id=content of the current webpage, and the URL forwarding is rewritten to the URL of the target webpage by history.pushState(), the above history.pushState () method, you can add or modify the history, after using history.pushState (), will change the value of referrer in the HTTP header when XMLHttpRequest. The referrer will be the URL of the current window file (this) when creating the XMLHttpRequest object.

The operation of the AJAX framework described in this embodiment can be roughly divided into a page loading part and a page switching part. The page loading part refers to entering the website for the first time after entering the website, or clicking on the page. Rearranging the page loading work that occurs, at this time, loading and loading a request to the server 10 by the web browser 30, and returning the page source code, in addition to displaying a current webpage content 302 of the current webpage 301. In addition, through the window.onload processing function set in the page, the common part of the page content can be loaded by the AJAX request and returned to the corresponding <section> to present the back page 101. A web page content 102 is returned.

As described above, the page switching part is to request the webpage source code from the server 10 through AJAX, and then intercept the <section> content of id=content, and then assign the content to The contentSection.innerHTML method is injected into the <section> tag, thereby replacing the current webpage content 302 of the current webpage 301, and the effect of switching the page is achieved. Furthermore, the URL in the URL column is rewritten by the history.pushState() function. The user can maintain the current webpage when the page is reorganized, and the page can be correctly displayed according to the user's browsing order when the <previous page> <next page> function is clicked on the webpage.

When using the AJAX framework for the common control of web pages described in this case to apply to the website for development, only the following processes are required:

1. First identify the common component parts of each web page in the website, and distinguish these common components into as many defined parts as necessary.

2. Copy a number of pages of the common part of the preset in the webpage frame (as specified in step 1), and then paste the common parts of the previous definition into the <section> tag. And change its id, try to keep the id and the file name the same, for example, the contents of the header, then the <section> id=header, as shown in the current page 301 in Figure 2B, and save the file name as a header. Html, in order to facilitate the overall use of the website, and the id of each common part of the foregoing needs to be different.

3. Generate a webpage version in the website, which uses the basic layout provided in the webpage framework to add different <section> tags according to the common part of the generated webpage, for example, if the header.html and menu are generated as described above .html..., then add <section id=header> and <section id=menu>....

4. Using the AJAX technology in the front-end program module 20, modify the layout.js to load the settings of the common page, so that the page content generated in the second step can be injected into the <section> tag generated in the third step. Taking header.html as an example, you need to add the following two-pass code in the appropriate location: var headerLoader=new AddInLoader("header.html","headerSection");headerLoader.load,

Composing a plurality of current webpage contents 102 in the website, and placing the plurality of current webpage contents 102 into the <section> tag of id=content, that is, completing the webpage frame application program described in the present case, if it is a newly developed website Need to apply the framework, the process is roughly the same, but the content page part can be directly copied a new one, directly modify the content of the <section> tag of id=content.

In summary, the invention is based on the AJAX technology in the operating system of the common part of the control webpage. By mapping the common part of the webpage, there is only one common part of all the webpages in the website, when the common part needs When modifying, the website maintainer only needs to repair one copy, and the modification method is the same as the convenience of modifying a certain web page. In principle, the AJAX processing function in the specific js file only needs to be called through a specific way, without Developers can use it in a very convenient way, and the calculations required for web page jumps (including the parsing of web pages and the initialization of various components of the web page) can be omitted, and the responsiveness to web browsing can be improved a lot (the response speed is increased, The page does not need to be refreshed. Moreover, when the user reorganizes the page, it will stay on the current page instead of returning to the so-called home page. Moreover, this kind of processing also achieves the goal of not hindering the search engine.

The features and spirits of the present invention are more clearly described in the above detailed description of the preferred embodiments of the present invention, and are not intended to limit the scope of the present invention. It is intended that the various modifications and equivalents are intended to be within the scope of the scope of the invention as claimed herein. Covers all possible changes and arrangements of equality.

10‧‧‧Server, server side

20‧‧‧ front-end program module

710‧‧‧First display interface

711‧‧‧First Common Framework

712‧‧‧ first permanent change framework

720‧‧‧Second display interface

721‧‧‧Second Common Frame

722‧‧‧ second permanent change framework

A1‧‧‧Common identification tag

A2‧‧‧First common information content

B1‧‧‧changed identification label

B2‧‧‧changed data content

C‧‧‧ source code

d‧‧‧Network address, network address history

Claims (7)

An operating system for controlling a common part of a webpage based on AJAX technology, comprising: a first display interface, comprising a first common frame, the first common frame comprising a common identification tag for receiving a first common data content a first constant frame comprising a constant change identification tag for receiving a constant change data content; a front end program module; a second display interface comprising a second common frame, the front end program module being The common identification tag loads the first common data content; and a second constant frame, wherein the front end program module loads at least one constant data content according to the constant change identification tag. The operating system for controlling the common part of the webpage based on the AJAX technology according to the first aspect of the patent application, wherein the common identification label further comprises at least one JavaScript file, and the front end program module corresponds to the at least one JavaScript file call. The common information content. The architecture of the webpage common framework control based on the AJAX technology described in claim 1, wherein the first display interface further comprises a plurality of first common frames, and each of the plurality of first common frames includes a corresponding plural number The first common identification tag, and each of the plurality of first common identification tags corresponds to each of the plurality of first common data contents. The operating system of the common part of the control webpage based on AJAX technology, as described in claim 1, wherein the first common framework comprises a top frame, a one-page frame or a menu frame. For example, the operating system of the common part of the control webpage based on the AJAX technology described in claim 1 further includes a server including at least one source code, and the front end program module The at least one source code of the server is called according to the common identification tag to generate corresponding common content content displayed on the second common frame. The operating system for controlling the common part of the webpage based on the AJAX technology according to the first aspect of the patent application, further comprising a server, comprising at least one source code, the front end program module calling the constant change identification label The at least one source code of the server to generate the corresponding constant change data content is displayed in the second constant frame. The operating system of the common part of the control webpage based on the AJAX technology, as described in claim 6, wherein the constant change identification tag includes a plurality of network address history records, and each of the network addresses corresponds to each The source code is used to sequentially display each of the constant change data contents.