A webpage data acquisition method and device, an electronic device, and a storage medium
By checking the local cache in the webpage data retrieval method and changing the `this` binding of the AJAX asynchronous request, the problem of blank pages caused by frequent requests was solved, resulting in faster loading speeds and a better user experience.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- BEIJING TOPSEC NETWORK SECURITY TECH
- Filing Date
- 2022-07-28
- Publication Date
- 2026-07-24
AI Technical Summary
When sending asynchronous requests frequently, web pages may not receive a response, display a blank page, or fail to load data.
If the response data is stored in the local cache, it is retrieved and displayed directly; otherwise, an AJAX asynchronous request message is constructed and retrieved from the server. The `this` keyword is changed in the request message to store the data in a global variable for local caching.
This reduces the number of AJAX asynchronous requests sent, avoids frequent interactions between the client and server, improves page loading speed and user experience, and reduces server load.
Smart Images
Figure CN115270027B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of communication technology, and more specifically, to a method, apparatus, electronic device, and storage medium for acquiring web page data. Background Technology
[0002] AJAX stands for Asynchronous JavaScript and XML. Using AJAX, web pages can request small amounts of information from the server and quickly display incremental updates on the user interface without reloading (refreshing) the entire page. This allows the program to respond to user actions more quickly, promptly make requests to the server and process responses, achieving a refresh-free effect.
[0003] AJAX requests can be divided into synchronous requests and asynchronous requests. A synchronous request means that after the request is sent, the browser cannot do anything and must wait until the request is completed and the data is returned before executing subsequent code. An asynchronous request means that while the request is being sent, the browser can continue to do anything. Sending an AJAX request will not affect the page loading or user operations.
[0004] The inventors discovered in practice that when the requirement is to frequently send requests to obtain response data, using asynchronous requests can lead to situations where no response is received, the page is blank, and no data is loaded due to the large number of requests. Summary of the Invention
[0005] The purpose of this application is to provide a web page data acquisition method, apparatus, electronic device, and storage medium to avoid the phenomenon that the client and server frequently interact through asynchronous requests, resulting in no response, blank page display, and no data loading.
[0006] This invention is implemented as follows:
[0007] In a first aspect, embodiments of this application provide a webpage data acquisition method, comprising: responding to a user's operation instruction on a webpage interface, determining whether response data corresponding to the operation instruction is stored in a local cache; when the response data is cached locally, acquiring the response data and displaying it; when the response data is not cached locally, constructing an AJAX asynchronous request message to acquire the response data from a server and displaying it.
[0008] In this embodiment, when retrieving response data in response to a user's operation command, the system first checks if the response data is cached locally. If it is, the response data is retrieved directly from the local cache and displayed. If not, an AJAX asynchronous request message is constructed to retrieve the response data from the server and display it. Therefore, storing response data locally reduces the number of AJAX asynchronous request messages sent, thus avoiding frequent client-server interactions that could result in no response, a blank page, or unloaded data. In other words, this method reduces server load, avoids response time delays, improves page loading speed, and enhances the user experience.
[0009] In conjunction with the technical solution provided in the first aspect above, in some possible implementations, the step of constructing an AJAX asynchronous request message to obtain the response data from the server and display it when the response data is not cached locally includes: constructing an AJAX asynchronous request message when the response data is not cached locally; wherein, in the AJAX asynchronous request message, `this` points to `window`; sending the AJAX asynchronous request message to the server so that the server returns the response data; storing the response data in a global variable corresponding to `this` for local caching; and displaying the response data.
[0010] In this embodiment of the application, by changing the `this` reference when constructing the AJAX asynchronous request message, the problem that the data returned by the AJAX asynchronous request cannot be assigned to a global variable can be solved. That is, in this way, the data returned by the AJAX asynchronous request can be effectively stored locally.
[0011] In conjunction with the technical solution provided in the first aspect above, in some possible implementations, the step of constructing an AJAX asynchronous request message when the response data is not cached locally includes: performing strategy matching when the response data is not cached locally; and constructing the AJAX asynchronous request message when the strategy matching determines that the response data is data that needs to be cached locally.
[0012] In this embodiment of the application, before the client constructs an AJAX asynchronous request message that needs to change the 'this' reference, it needs to perform strategy matching to determine whether the response data corresponding to the operation instruction needs to be stored locally. Only when the response data needs to be stored locally will the 'this' reference in the AJAX asynchronous request message be changed. In this way, response data can be stored in the local cache in a targeted manner, such as data that is not frequently updated but is frequently requested.
[0013] In conjunction with the technical solution provided in the first aspect above, in some possible implementations, the response data is in JSON format.
[0014] In conjunction with the technical solution provided in the first aspect above, in some possible implementations, determining whether the local cache stores response data corresponding to the operation instruction includes: traversing the global variables and determining whether the global variables store response data corresponding to the operation instruction; obtaining the response data when the local cache contains the response data includes: when the global variables store the response data, retrieving the response data from the global variables.
[0015] In this embodiment of the application, the data returned by the AJAX asynchronous request is assigned to a global variable so that the returned data can be used globally.
[0016] In conjunction with the technical solution provided in the first aspect above, in some possible implementations, the method further includes: receiving a data update message sent by the server; wherein the data update message indicates that the response data has been updated; and in response to the user's operation instruction on the web page interface, reconstructing the AJAX asynchronous request message to obtain the updated response data from the server and displaying it.
[0017] In this embodiment of the application, after the response data is updated, the server will send a data update message, so that when the response data is needed again, an AJAX asynchronous request message can be directly constructed to obtain the updated response data from the server. It can be seen that the authenticity and reliability of the response data can be guaranteed by this method.
[0018] Secondly, embodiments of this application provide a web page data acquisition device, comprising: a judgment module, configured to, in response to a user's operation command on a web page interface, determine whether response data corresponding to the operation command is stored in a local cache; a local acquisition module, configured to, when the response data is cached locally, acquire the response data and display it; and a remote acquisition module, configured to, when the response data is not cached locally, construct an AJAX asynchronous request message to acquire the response data from a server and display it.
[0019] In conjunction with the technical solution provided in the second aspect above, in some possible implementations, the remote acquisition module is further specifically used to construct an AJAX asynchronous request message when the response data is not cached locally; wherein, in the AJAX asynchronous request message, `this` points to `window`; the AJAX asynchronous request message is sent to the server so that the server returns the response data; the response data is stored in a global variable corresponding to `this` for local caching; and the response data is displayed.
[0020] Thirdly, embodiments of this application provide an electronic device, including: a processor and a memory, the processor and the memory being connected; the memory being used to store a program; the processor being used to invoke the program stored in the memory to execute the method provided by the embodiments of the first aspect described above and / or some possible implementations of the embodiments of the first aspect described above.
[0021] Fourthly, embodiments of this application provide a computer-readable storage medium having a computer program stored thereon, the computer program executing, when run by a processor, the methods provided as described in the first aspect embodiments and / or some possible implementations of the first aspect embodiments. Attached Figure Description
[0022] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments of this application will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.
[0023] Figure 1 This is a module block diagram of an electronic device provided in an embodiment of this application.
[0024] Figure 2 A flowchart illustrating the steps of a webpage data acquisition method provided in this application embodiment.
[0025] Figure 3 This is a schematic diagram of a web interface provided in an embodiment of this application.
[0026] Figure 4 This is a block diagram of a web page data acquisition device provided in an embodiment of this application.
[0027] Icons: 100 - Electronic device; 110 - Processor; 120 - Memory; 200 - Web page data acquisition device; 210 - Judgment module; 220 - Local acquisition module; 230 - Remote acquisition module. Detailed Implementation
[0028] The technical solutions in the embodiments of this application will now be described with reference to the accompanying drawings.
[0029] Please see Figure 1 This application provides a schematic structural block diagram of an electronic device 100 that provides a method and apparatus for acquiring web page data. In this application embodiment, the electronic device 100 may be, but is not limited to, a personal computer (PC), smartphone, tablet computer, personal digital assistant (PDA), mobile internet device (MID), etc. The electronic device 100 may be configured with a client, such as an application, app, or browser.
[0030] Structurally, the electronic device 100 may include a processor 110 and a memory 120.
[0031] The processor 110 is electrically connected directly or indirectly to the memory 120 to enable data transmission or interaction. For example, these components can be electrically connected to each other via one or more communication buses or signal lines. The web page data acquisition device includes at least one software module that can be stored in the memory 120 or embedded in the operating system (OS) of the electronic device 100 in the form of software or firmware. The processor 110 is used to execute the executable modules stored in the memory 120, such as the software function modules and computer programs included in the web page data acquisition device, to implement the web page data acquisition method. The processor 110 can execute the computer program after receiving an execution instruction.
[0032] The processor 110 can be an integrated circuit chip with signal processing capabilities. The processor 110 can also be a general-purpose processor, such as a Central Processing Unit (CPU), a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a discrete gate or transistor logic device, or a discrete hardware component, capable of implementing or executing the methods, steps, and logic block diagrams disclosed in the embodiments of this application. Furthermore, the general-purpose processor can be a microprocessor or any conventional processor.
[0033] The memory 120 may be, but is not limited to, random access memory (RAM), read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), and electrically erasable programmable read-only memory (EEPROM). The memory 120 is used to store programs, which the processor 110 executes upon receiving an execution instruction.
[0034] It should be noted that, Figure 1 The structure shown is for illustrative purposes only. The electronic device 100 provided in this embodiment may also have a structure that is more advanced than the one shown in the diagram. Figure 1 Fewer or more components, or having the same Figure 1 The different configurations shown. Furthermore... Figure 1 The components shown can be implemented through software, hardware, or a combination thereof.
[0035] Please see Figure 2 , Figure 2 This is a flowchart illustrating the steps of a webpage data acquisition method provided in an embodiment of this application. The method is applied to... Figure 1 The electronic device 100 shown. It should be noted that the webpage data acquisition method provided in this application embodiment does not rely on... Figure 2 The following order is a limitation, and the method includes: steps S101-S103.
[0036] Step S101: In response to the user's operation command on the web page interface, determine whether the local cache stores response data corresponding to the operation command.
[0037] User actions on a webpage can be simple clicks, such as clicking a link or a term. Clicking a link or term indicates a desire to retrieve detailed data related to that link or term. Alternatively, user actions can involve moving the mouse to a target location. For example, moving the mouse to address A in the address bar signifies that the user wants to retrieve detailed data related to address A.
[0038] It should be noted that the detailed data in the above examples are the response data corresponding to the operation commands. Of course, the above are merely exemplary application scenarios, and this application does not limit them.
[0039] If the local cache contains response data corresponding to the operation instruction, then step S102 is executed; otherwise, if the local cache does not contain response data corresponding to the operation instruction, then step S103 is executed.
[0040] Step S102: Retrieve response data from the local cache and display it.
[0041] If the response data is stored in the local cache, the data is retrieved directly from the local cache and displayed.
[0042] It should be noted that the locally cached response data is retrieved from the server in advance via an AJAX asynchronous request message. For example, when the response data is retrieved for the first time, it is obtained from the server via an AJAX asynchronous request message, and then cached locally so that the response data can be retrieved directly from the local cache the next time it is triggered.
[0043] Step S103: Construct an AJAX asynchronous request message to obtain response data from the server and display it.
[0044] If the local cache does not contain the response data corresponding to the operation instruction, then an asynchronous request message is constructed, and the response data is obtained from the server through an asynchronous request.
[0045] It should be noted that after obtaining response data from the server via an asynchronous request, it can be stored locally. This way, when the same response data is needed again, it is not necessary to construct an asynchronous request message to obtain the response data from the server again; instead, it can be retrieved directly from the local cache.
[0046] As can be seen, in this embodiment, when retrieving response data in response to a user's operation command, it first determines whether the response data is cached locally. If it is, the response data is directly retrieved from the local cache and displayed. If not, an AJAX asynchronous request message is constructed to retrieve the response data from the server and display it. Therefore, by storing response data locally, the number of AJAX asynchronous request messages can be reduced, thus avoiding frequent client-server interactions that could result in no response, a blank page, or unloaded data. In other words, this method reduces server load, avoids waiting time for response, improves page loading speed, and enhances the user experience.
[0047] In one embodiment, step S103 may specifically include: when no response data is cached locally, constructing an AJAX asynchronous request message; wherein, in the AJAX asynchronous request message, this points to window; sending the AJAX asynchronous request message to the server so that the server returns response data; storing the response data in a global variable corresponding to this point for local caching; and displaying the response data.
[0048] It should be noted that global variables are attached to the window.
[0049] Specifically, define a function for the AJAX asynchronous request message. Within this function, change the `this` binding to `window` (e.g., `var that = this`). When using the global variable `A` within this function, you can write `that.A`. Then, the client sends an AJAX asynchronous request message to the server. After receiving the response, parse the retrieved data in the success callback function. For example, if the required data is `data`, use `that.A = data` to store the data in the global variable `A`, assign a value to `A`, and then return `that.A`. At this point, the global variable `A` contains the required data and is available globally. When the defined AJAX asynchronous request function is called during subsequent page initialization, the global variable `A` still contains the required data and is available globally.
[0050] As can be seen, in this embodiment of the application, by changing the `this` reference when constructing the AJAX asynchronous request message, the problem that the data returned by the AJAX asynchronous request cannot be assigned to a global variable can be solved. That is, in this way, the data returned by the AJAX asynchronous request can be effectively stored locally.
[0051] In one embodiment, the response data is in JSON (JavaScript Object Notation) format.
[0052] Of course, the response data can also be in XML (Extensible Markup Language) format, and this application does not limit it.
[0053] Optionally, before constructing the AJAX asynchronous request message that requires changing the `this` reference, the method further includes: performing strategy matching when no response data is cached locally; and constructing the AJAX asynchronous request message when the strategy matching determines that the response data is data that needs to be cached locally.
[0054] It should be noted that the purpose of strategy matching is to determine which response data needs to be cached locally. For example, data that is not frequently updated but is frequently requested can be cached locally.
[0055] For example, please refer to Figure 3 This application scenario involves displaying detailed information about an address when the user hovers their mouse over it in the address bar. This detailed information consists of data that is not frequently updated but is frequently requested. For example, when the mouse hovers over address 2.2.2.6, it will display the IP (Internet Protocol) address, IP type, MAC (Media Access Control Address), and so on.
[0056] Policy matching can be based on the policy ID (Identity document). For example, if the response data is in JSON format, the policy ID can be used as the key and the specific IP information as the value to form JSON data, which is then assigned to a global variable A for frequent mouse hover switching. The policy ID is a label corresponding to each response data; for example, the policy ID corresponding to address 2.2.2.6 is 123. This will not be discussed further here.
[0057] Suppose the returned data includes data in the following JSON format:
[0058] data:[
[0059] {"IP":1.1.1.1,"type":"ipv4","mac":"aa:bb:cc:dd:ee:ff"},
[0060] {"IP":1001::1002,"type":"ipv6","mac":"bb:aa:cc:dd:ee:ff"}
[0061] {"IP":1.1.1.2,"type":"ipv4","mac":"aa:cc:bb:dd:ee:ff"} ]
[0063] The global variable A after assignment will contain data in the following JSON format:
[0064] A: {
[0065] 1: {"IP":1.1.1.1,"type":"ipv4","mac":"aa:bb:cc:dd:ee:ff"},
[0066] 2: {"IP":1.1.1.2,"type":"ipv4","mac":"aa:cc:bb:dd:ee:ff"}
[0067] }
[0068] In other words, the data corresponding to IP addresses 1.1.1.1 and 1.1.1.2 are the data that needs to be cached locally, as determined by policy matching.
[0069] As can be seen, in this embodiment of the application, before the client constructs an AJAX asynchronous request message that needs to change the 'this' reference, it needs to perform strategy matching to determine whether the response data corresponding to the operation instruction needs to be stored locally. Only when the response data needs to be stored locally will the 'this' reference in the AJAX asynchronous request message be changed. In this way, response data can be stored in the local cache in a targeted manner, such as data that is not frequently updated but is frequently requested.
[0070] When data is stored through global variables, step S101 specifically includes: traversing the global variables and determining whether the global variables store response data corresponding to the operation instruction. Correspondingly, step S102 includes: if the global variables store response data, retrieving the response data from the global variables.
[0071] As can be seen, in this embodiment of the application, the data returned by the AJAX asynchronous request is assigned to a global variable so that the returned data can be used globally.
[0072] Furthermore, this application embodiment also provides a data-triggered update method, that is, the method further includes: receiving a data update message sent by a server; wherein the data update message indicates that the response data has been updated; in response to the user's operation instruction on the web page interface, reconstructing an AJAX asynchronous request message to obtain the updated response data from the server and displaying it.
[0073] It should be noted that when data changes, the server will detect the change and actively send a notification to the relevant modules that reference this information (i.e., the relevant software modules configured on the client). In other words, the server actively sends a notification to the page. This process can be implemented using WebSocket (a bidirectional communication network protocol) or SSE (Server-Sent Events) technology. After receiving the message, the relevant module can send another AJAX asynchronous request to update the locally cached response data.
[0074] In this embodiment of the application, after the response data is updated, the server will send a data update message, so that when the response data is needed again, an AJAX asynchronous request message can be directly constructed to obtain the updated response data from the server. It can be seen that the authenticity and reliability of the response data can be guaranteed by this method.
[0075] Please see Figure 4 Based on the same inventive concept, embodiments of this application also provide a web page data acquisition device 200, which includes:
[0076] The judgment module 210 is used to determine whether the local cache stores response data corresponding to the operation command in response to the user's operation command on the web page interface.
[0077] The local acquisition module 220 is used to acquire the response data when the response data is cached locally, and then display it.
[0078] The remote acquisition module 230 is used to construct an AJAX asynchronous request message to obtain the response data from the server and display it when the response data is not cached locally.
[0079] Optionally, the remote acquisition module 230 is further configured to construct an AJAX asynchronous request message when the response data is not cached locally; wherein, in the AJAX asynchronous request message, this points to window; send the AJAX asynchronous request message to the server so that the server returns the response data; store the response data in a global variable corresponding to this point for local caching; and display the response data.
[0080] Optionally, the remote acquisition module 230 is further configured to perform strategy matching when the response data is not cached locally; and to construct the AJAX asynchronous request message when the strategy matching determines that the response data is data that needs to be cached locally.
[0081] Optionally, the response data is in JSON format.
[0082] Optionally, the judgment module 210 further includes the function of traversing the global variables and determining whether the global variables store response data corresponding to the operation instruction. Correspondingly, the local acquisition module is further specifically used to retrieve the response data from the global variables when the global variables store the response data.
[0083] Optionally, the device also includes an update module.
[0084] An update module is used to receive a data update message sent by the server; wherein the data update message indicates that the response data has been updated; in response to the user's operation instruction on the web page interface, the AJAX asynchronous request message is reconstructed to obtain the updated response data from the server and display it.
[0085] It should be noted that, as those skilled in the art will clearly understand, for the sake of convenience and brevity, the specific working processes of the systems, devices and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.
[0086] Based on the same inventive concept, embodiments of this application also provide a computer-readable storage medium storing a computer program thereon, which executes the methods provided in the above embodiments when the computer program is run.
[0087] The storage medium can be any available medium that a computer can access, or a data storage device such as a server or data center that integrates one or more available media. The available medium can be magnetic media (e.g., floppy disks, hard disks, magnetic tapes), optical media (e.g., DVDs), or semiconductor media (e.g., solid-state drives (SSDs)).
[0088] In the embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. The apparatus embodiments described above are merely illustrative. For example, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. Furthermore, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Additionally, the displayed or discussed mutual couplings, direct couplings, or communication connections may be through some communication interfaces; indirect couplings or communication connections between devices or units may be electrical, mechanical, or other forms.
[0089] Furthermore, the units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.
[0090] Furthermore, the functional modules in the various embodiments of this application can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part.
[0091] In this document, relational terms such as first and second are used only to distinguish one entity or operation from another entity or operation, without necessarily requiring or implying any such actual relationship or order between these entities or operations.
[0092] The above description is merely an embodiment of this application and is not intended to limit the scope of protection of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of protection of this application.
Claims
1. A method for acquiring webpage data, characterized in that, include: In response to a user's operation command on a web page, determine whether the local cache contains response data corresponding to the operation command; When the response data is cached locally, the response data is retrieved and displayed. When the response data is not cached locally, an AJAX asynchronous request message is constructed to retrieve the response data from the server and display it. The step of constructing an AJAX asynchronous request message to retrieve the response data from the server and display it when the response data is not cached locally includes: When the response data is not cached locally, an AJAX asynchronous request message is constructed; wherein, in the AJAX asynchronous request message, this refers to the window; The AJAX asynchronous request message is sent to the server so that the server returns the response data; and the response data is stored in a global variable corresponding to the pointer of this for local caching. The response data will be displayed.
2. The method according to claim 1, characterized in that, When the response data is not cached locally, constructing an AJAX asynchronous request message includes: When the response data is not cached locally, policy matching is performed; When the response data is determined to be data that needs to be cached locally through the strategy matching, the AJAX asynchronous request message is constructed.
3. The method according to claim 1, characterized in that, The response data is in JSON format.
4. The method according to claim 1, characterized in that, The step of determining whether the local cache stores response data corresponding to the operation instruction includes: Iterate through the global variables and determine whether the global variables store response data corresponding to the operation command; When the response data is cached locally, obtaining the response data includes: When the global variable stores the response data, the response data is retrieved from the global variable.
5. The method according to any one of claims 1-4, characterized in that, The method further includes: Receive a data update message sent by the server; wherein the data update message indicates that the response data has been updated; In response to the user's operation instructions on the web page, the AJAX asynchronous request message is reconstructed to obtain updated response data from the server and then displayed.
6. A webpage data acquisition device, characterized in that, include: The judgment module is used to respond to the user's operation command on the web page interface and determine whether the local cache stores response data corresponding to the operation command; The local acquisition module is used to acquire the response data when it is cached locally and then display it. The remote acquisition module is used to construct an AJAX asynchronous request message to retrieve the response data from the server and display it when the response data is not cached locally. The remote acquisition module is further configured to construct an AJAX asynchronous request message when the response data is not cached locally; wherein, in the AJAX asynchronous request message, this points to window; send the AJAX asynchronous request message to the server so that the server returns the response data; store the response data in a global variable corresponding to this point for local caching; and display the response data.
7. An electronic device, characterized in that, include: A processor and a memory, wherein the processor and the memory are connected; The memory is used to store programs; The processor is used to run a program stored in the memory and perform the method as described in any one of claims 1-5.
8. A computer-readable storage medium, characterized in that, It stores a computer program that, when executed by a computer, performs the method as described in any one of claims 1-5.