TWM511642U - An AJAX web reminder for data updating - Google Patents

Description

AJAX webpage operation reminder

This creation relates to the field of network technology, in particular to an instant reminder for running AJAX webpages, and a specific notification of AJAX operation is presented graphically to remind the user.

AJAX (Asynchronous JavaScript And XML) is a web development technology for creating interactive web applications. For traditional web pages, if some of the content on the page is updated, the user needs to refresh the entire page to see the updated content, and for Ajax webpages, the user can only get updates without refreshing the entire page. Part of the content, which allows the web application to respond to user actions more quickly, and avoids transmitting unchanging information on the network. Moreover, for network-side devices, it can avoid repeatedly transmitting unchanged information, thus It saves network bandwidth resources and reduces the burden on the server; for the user, it can effectively reduce the waiting time in the process of browsing the webpage and improve the user experience.

However, since accessing the webpage through AJAX does not trigger the webpage refreshing action, we need to design some additional methods to notify the user that the related actions have been completed. For example, the login action through AJAX is due to login. After successful, the page will not be switched. Therefore, there are some specific ways to notify the user that the login has been successful to improve the Ajax non-synchronized webpage technology.

In order to effectively solve the problems in the prior art, the present invention discloses an AJAX webpage operation reminder, which is operated in a computer host with a network connection, and the computer host is respectively connected with a display device and a cursor control device, and the cursor control device Providing a displacement signal of the host computer to control a coordinate position displayed by the dynamic cursor in the display device, wherein the user displays a resident message notification at a specified position in one of the currently viewed web pages during the web browsing process, and In the resident message notification, the instant dynamic message notification of at least one web application is displayed in a vertical arrangement, and the designated location is set as a dynamic cursor parking area, wherein the resident message notification type can be a square icon, and the dynamic cursor stops. The resident system changes with the horizontal gap (Δx) and vertical gap (Δy) between the current position of the dynamic cursor (x, y) and the border of a browser page, while the upper, right or lower area of the dynamic cursor is The center of the cursor is the center of a clock pointer, and the upper, right or lower area is defined as clockwise It encompasses any position of 12 to 6 o'clock.

10‧‧‧Resident Information Notice

20‧‧‧Instant dynamic message notification for a web application

21‧‧‧An instant dynamic message notification from another web application

30‧‧‧Browser page border

31‧‧‧Page top border

32‧‧‧Page bottom border

33‧‧‧ page left border

34‧‧‧Page right border

40‧‧‧ dynamic cursor

△x‧‧‧The horizontal difference between the current position of the cursor and the border of the browser page

Δy‧‧‧The vertical gap between the current position of the cursor and the border of the browser page

The first figure is a schematic diagram of the implementation of the AJAX webpage operation reminder of the present creation.

The second picture is a display state diagram of the AJAX webpage operation reminder of the present creation on a webpage.

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. After the new webpage can be displayed, the block that only has the latest news in the webpage needs to be updated, and other parts of the webpage such as menus, advertisements, copyright pages, etc. do not need to be updated, in the traditional dynamic server webpage. It is necessary to post all the pages back to the server, which will increase the network transmission data. Quantity, and the user operation is quite inconvenient, and AJAX webpage technology only needs to update the local webpage, and only the block of the latest message can be updated without changing the page, and the webpage only transmits the latest message block to On the server side, the updated latest news is loaded to the client. Other parts of the webpage such as menus, advertisements, copyright pages, etc. will not be sent back to the server and will not refresh the page.

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. .

Please refer to the figure 1 below, which is a schematic diagram of the implementation of the AJAX webpage operation reminder of the present invention. The reminder device described in the present invention is operated in a computer host of a network, and the computer host is respectively connected with a display device (not shown) And a cursor control device (not shown), and the cursor control device provides a displacement signal (not shown) of the computer to control a coordinate position displayed by the dynamic cursor 40 in the display device, and the cursor control The device can be any one of a wired mouse, a wireless mouse, and a touchpad, and is not limited herein.

In the embodiment of the present invention, the object is marked by an object (Object) in the timed event of the embedded webpage. After the user end opens at least one web application and performs the login of the account identity, the user switches to a different webpage browsing process, and is periodically Sending a notification message carrying the identity of the user to each web server, and each time the web server receives the notification message, storing the user in the database The latest access time of the user in the line record is updated to the current system time, and each web server periodically determines the corresponding recent access time according to each user's online record, and assigns the latest access time to the user within the set time range. Determining to be an online user, and periodically returning each dynamic message in the web application opened by the user to a designated location in the webpage currently browsed by the user, in the designated location to generate a resident message notification 10, and The resident message notification 10 displays the instant message notifications 20, 21., etc. of the plurality of web applications in a vertical arrangement, wherein the resident message notification 10 can be a block graphic type, and the web application system Refers to all applications developed by the interactive web services system platform, such as google mail, yahoo mail..., facebook, twitter... and so on.

As shown above, the specified location of the user currently browsing the webpage is a non-fixed location, which is a dynamic cursor docking area, and the cursor docking area is expressed as follows: 1. Get the current location of the dynamic cursor 40 in the webpage. (x, y); 2. Calculate the horizontal difference (Δx) and vertical gap (Δy) between the current position (x, y) of the dynamic cursor 40 and a browser page border 30 (not shown). 3. If the above horizontal difference (Δx) is smaller than the horizontal length shown in the above block, the block diagram is resident and displayed on the upper, right or lower area of the dynamic cursor 40, and if the above vertical gap (△) y) is smaller than the vertical length of the block diagram shown above, and the block diagram is resident and displayed on the upper or lower area of the dynamic cursor 40. Further, the browser page border 30 is further divided into a page border 31 and a page. The lower border 32, the left border 33 of the page, and the right border 34 of the page. When the dynamic cursor 40 is adjacent to the aforementioned page borders (31~34), the square icon has the following presentation modes: A. When the dynamic cursor 40 is adjacent to When the left border of the page is 33, if the horizontal difference (△x If the horizontal length is smaller than the horizontal length of the block, the block diagram is resident and displayed on the right side of the dynamic cursor 40. Further, when the dynamic cursor 40 is adjacent to the top border 31 of the page, if the vertical gap (Δy) is smaller than The above block diagram For the vertical length, the block diagram is resident and displayed in the lower area of the dynamic cursor 40, or when the dynamic cursor 40 is adjacent to the page bottom frame 32, if the vertical gap (Δy) is smaller than the vertical length of the square icon, The block diagram is resident and displayed in the upper area of the dynamic cursor 40; B. When the dynamic cursor 40 is adjacent to the right border 34 of the page, if the horizontal difference (Δx) is less than the horizontal length of the square icon, the block diagram The display system is resident and displayed on the upper or lower area of the dynamic cursor 40, which is not limited thereto. Further, when the dynamic cursor 40 is adjacent to the upper frame 31 of the page, if the vertical gap (Δy) is smaller than the vertical of the square icon. The length of the block is resident and displayed in the lower area of the dynamic cursor 40, or when the dynamic cursor 40 is adjacent to the bottom border 32 of the page, if the vertical gap (Δy) is smaller than the vertical length of the square icon, The block diagram is resident and displayed in the upper area of the dynamic cursor 40; 4. If the above horizontal difference (Δx) is greater than or equal to the horizontal length of the square icon, the block diagram is resident and displayed in the dynamic The right side region of the label 40, and if the vertical gap (Δy) is greater than or equal to the vertical length of the block diagram, the block diagram is resident and displayed on the right side of the dynamic cursor 40, further illustrating that The upper, right or lower area of the dynamic cursor 40 is centered on the cursor center, and the upper, right or lower area is defined as covering any position 12 to 6 o'clock in a clockwise direction so as not to cover The content of the current position of the cursor is mainly, so it is not limited here, and can effectively achieve the purpose of notifying the user, and can reduce the interference to the user's operation of the webpage. Please refer to the 2 figure, which is to draw the AJAX webpage operation of the creation. The display status map of the reminder on a webpage, which displays various current information of the current status, the instant message of the letter, the facebook instant message and the instant weather information shown in the figure, but does not limit the only information shown in the figure. According to the actual use situation, different instant messages are presented. Only the auxiliary review committee can refer to the implementation method of this creation.

In summary, the AJAX webpage operation reminder of the creation can dynamically notify the dynamic update information of each web application operated by the AJAX webpage by dynamically detecting the location of the dynamic cursor on the currently browsed webpage. The icon is resident and displayed in a designated location adjacent to the dynamic cursor to achieve the user's attention, but does not prevent the user from operating the webpage.

The features and spirit of the present invention are more clearly described in the above detailed description of the preferred embodiments, and the scope of the present invention is not limited by the preferred embodiments disclosed above. It is intended that the various changes and equivalences will be included in the scope of the patent application to which the present invention is intended. Therefore, the scope of the patent application filed by this creation should be interpreted broadly according to the above description, so that It covers all possible changes and arrangements of equality.

10‧‧‧Resident Information Notice

20‧‧‧Instant dynamic message notification for a web application

21‧‧‧An instant dynamic message notification from another web application

30‧‧‧Browser page border

31‧‧‧Page top border

32‧‧‧Page bottom border

33‧‧‧ page left border

34‧‧‧Page right border

40‧‧‧ dynamic cursor

△x‧‧‧The horizontal difference between the current position of the cursor and the border of the browser page

Δy‧‧‧The vertical gap between the current position of the cursor and the border of the browser page

Claims (6)

An AJAX webpage operation reminder, which is operated in a networked computer host, wherein the computer host is respectively connected with a display device and a cursor control device, and the cursor control device provides a displacement signal of the computer host to control a dynamic a cursor position displayed on the display device; wherein, during the web browsing process, the user displays a resident message notification at a specified position in one of the currently viewed web pages, and at least displays the vertical information in the resident message notification An instant dynamic message notification of a web application, the designated location is set as a dynamic cursor docking area, wherein the resident message notification type can be a block diagram, and the dynamic cursor docking area is followed by a dynamic cursor The current position (x, y) varies from the horizontal difference (Δx) and the vertical difference (Δy) between the borders of a browser page. For example, in the AJAX webpage operation reminder described in claim 1, wherein the horizontal difference (Δx) is smaller than the horizontal length of the resident notification, and the resident notification is displayed on the upper, right or lower area of the dynamic cursor. . For example, the AJAX webpage operation reminder described in claim 2, wherein the vertical gap (Δy) is smaller than the vertical length of the resident message notification, and the resident message notification is displayed above or below the dynamic cursor. The AJAX webpage operation reminder according to claim 1, wherein the level difference (Δx) is greater than or equal to the horizontal length of the resident message notification, and the resident message notification is displayed in a right area of the dynamic cursor. For example, in the AJAX webpage operation reminder described in claim 4, wherein the vertical gap (Δy) is greater than or equal to the vertical length of the resident message notification, the resident message notification is displayed in a right area of the dynamic cursor. The AJAX webpage operation reminder according to any one of the claims 2, 3, 4 or 5, wherein the upper, right or lower area of the dynamic cursor is a cursor center, and the cursor center The upper, right or lower regions are defined to cover any position 12 to 6 o'clock in a clockwise direction.