Front-end AJAX transformation method
By saving and defining new AJAX basic objects and encapsulating common steps as interfaces or events, the problem of increased application system transformation workload caused by differences in front-end AJAX class library in the existing technology is solved, and front-end transformation is achieved without affecting application system business, adapting to new requirements and ensuring application stability.
Patent Information
- Application Number
- CN202411765301.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-04
- Publication Date
- 2025-03-14
AI Technical Summary
The lack of unified front-end and back-end methods in the existing technology has led to large differences in front-end AJAX class libraries used in application systems in different periods, increasing the workload of application system transformation.
By saving the original AJAX basic object of the application system and defining the new basic object of the same name according to new business needs, encapsulating the common steps as interfaces or events, and using the new basic object to complete the business logic through Js scripts to ensure that the functions of the application system are not affected.
Without affecting the application system business, reduce the workload of front-end transformation of application systems in different periods, adapt to new needs and ensure stable application.
Smart Images
Figure CN119621058A_ABST
Abstract
Description
Technical Field
[0001] The invention discloses a front-end AJAX transformation method and relates to the technical field of front-end development. Background Art
[0002] In the front-end development of B / S systems, the requirements for interactivity are getting higher and higher. AJAX technology is currently widely used, resulting in a variety of AJAX front-end libraries such as JQuery / Axios and the relatively new Fetch. These libraries are used in different ways. With the rapid iteration of front-end technology and the increasing number of accumulated application systems, the front-end Ajax libraries used by application systems in different periods vary greatly. However, there is currently no unified front-end and back-end method that can reduce the workload of application system transformation at different periods without affecting the business of the application system. Summary of the invention
[0003] In view of the problems of the prior art, the present invention provides a front-end AJAX transformation method for unified front-end and back-end communication, which can reduce the workload of front-end transformation of application systems in different periods without affecting the business of the application systems.
[0004] The specific scheme proposed by the present invention is:
[0005] A front-end AJAX transformation method, comprising:
[0006] Step 1: Save the original AJAX basic object of the application system by variable assignment.
[0007] Step 2: Define a new basic object with the same name according to the original AJAX basic object format based on the new business of the application system.
[0008] Step 3: Define the key members of the new base object: first save the original base object members by defining variables, and then define new base object members with the same name and parameters.
[0009] Step 4: Define common steps for new base object members and encapsulate the common steps as interfaces or events. Activate the interfaces or events when calling new base object members.
[0010] Step 5: Provide a Js script, use the newly defined basic object through the Js script to complete the business logic of the interface or event, and load the Ajax basic object with the same name and the script that implements the business logic to the front end of the application in sequence.
[0011] Furthermore, step 1 of the front-end AJAX transformation method specifically includes:
[0012] Define a variable in JavaScript and assign the original AJAX base object to the variable.
[0013] Select the original AJAX basic objects that need to be saved according to the logic. The original AJAX basic objects include XMLHttpRequest, ActiveXObject ("Microsoft.XMLHTTP"), and fetch.
[0014] Furthermore, in step 2 of the front-end AJAX transformation method, based on JavaScript, the corresponding saved original AJAX basic object is returned in the newly defined basic object, and the newly defined basic object is used through the browser. The newly defined basic object finally returns the original AJAX basic object with the new business requirements added, thereby ensuring that the application system function is not affected.
[0015] Furthermore, the encapsulated events in step 4 of the front-end AJAX transformation method include: request header events, request data modification events, step common events, return code processing events, and return data processing events.
[0016] Call the interface or change the request header in the request header event.
[0017] In the Modify Request Data event, modify the data used in the request.
[0018] In the step common event, the first parameter is the step name, which is mainly used for expansion.
[0019] Process the returned HTTP code in the return code processing event.
[0020] Process the returned data in the returned data processing event.
[0021] The present invention also provides a front-end AJAX transformation device, including a storage module, a transformation management module and a script management module.
[0022] The save module saves the original AJAX basic objects of the application system by assigning variables.
[0023] The transformation management module defines a new basic object with the same name according to the original AJAX basic object format based on the new business of the application system.
[0024] The transformation management module defines the key members of the new basic object: first save the original basic object members by defining variables, and then define new basic object members with the same name and parameters.
[0025] The transformation management module defines the common steps of the new basic object members and encapsulates the common steps into interfaces or events. The interfaces or events are activated when the new basic object members are called.
[0026] The script management module provides Js scripts, which use the newly defined basic objects to complete the business logic of the interface or event, and load the Ajax basic objects with the same name and the scripts that implement the business logic into the front end of the application in sequence.
[0027] Furthermore, the storage module of the front-end AJAX transformation device defines variables in JavaScript and assigns the original AJAX basic object to the variables.
[0028] Select the original AJAX basic objects that need to be saved according to the logic. The original AJAX basic objects include XMLHttpRequest, ActiveXObject ("Microsoft.XMLHTTP"), and fetch.
[0029] Furthermore, a transformation management module of the front-end AJAX transformation device returns the corresponding saved original AJAX basic object in the newly defined basic object based on JavaScript, and uses the newly defined basic object through the browser. The newly defined basic object finally returns the original AJAX basic object with the new business requirements added, thereby ensuring that the application system function is not affected.
[0030] Furthermore, the transformation management module of the front-end AJAX transformation device encapsulates events, including: request header events, request data modification events, step general events, return code processing events, and return data processing events.
[0031] Call the interface or change the request header in the request header event.
[0032] In the Modify Request Data event, modify the data used in the request.
[0033] In the step common event, the first parameter is the step name, which is mainly used for expansion.
[0034] Process the returned HTTP code in the return code processing event.
[0035] Process the returned data in the returned data processing event.
[0036] The benefits of the present invention are:
[0037] Adapting to clear new requirements can reduce the workload of application system transformation at different times without affecting the business of the application system. The development of requirements can be completed with very little workload without modifying the application. This ensures the stability of the original application and reduces the workload of development. BRIEF DESCRIPTION OF THE DRAWINGS
[0038] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.
[0039] Figure 1 It is a schematic diagram of the application process of the method of the present invention.
[0040] Figure 2 This is a schematic diagram of the application's use of Ajax basic objects. DETAILED DESCRIPTION
[0041] The present invention is further described below in conjunction with the accompanying drawings and specific embodiments so that those skilled in the art can better understand the present invention and implement it, but the embodiments are not intended to limit the present invention.
[0042] Example 1
[0043] The present invention provides a front-end AJAX transformation method, comprising:
[0044] Step 1: Save the original AJAX basic objects of the application system by assigning values to variables. Specifically include:
[0045] Define a variable in JavaScript and assign the original AJAX base object to the variable.
[0046] Select the original AJAX basic objects that need to be saved according to the logic. The original AJAX basic objects include (1) XMLHttpRequest, (2) ActiveXObject ("Microsoft.XMLHTTP"), and (3) fetch.
[0047] Among them, (1) and (2) can save one of them according to the logic. It is the basic object of Ajax libraries such as JQuery and Axios. (3) is part of native JavaScript.
[0048] Step 2: Define a new basic object with the same name according to the original AJAX basic object format based on the new business of the application system. Based on JavaScript, return the corresponding saved original AJAX basic object in the newly defined basic object, use the newly defined basic object through the browser, and the newly defined basic object will eventually return the original AJAX basic object with the new business requirements added, ensuring that the application system function is not affected.
[0049] Step 3: Define the key members of the new basic object: First, save the original basic object members by defining variables, and then define new basic object members with the same name and parameters. In the members with the same name, the original members must be called to ensure the integrity of the basic object. At the same time, the application business can be implemented in the newly defined members, such as using the original basic object to call services, add HTTP request headers, or process data.
[0050] Step 4: Define common steps for new base object members and encapsulate the common steps as interfaces or events. The interfaces or events are activated when the new base object members are called.
[0051] When encapsulating events, it includes: request header event, request data modification event, step common event, return code processing event, return data processing event,
[0052] Call the interface or change the request header in the request header event.
[0053] Modify the data used in the request in the Modify Request Data event.
[0054] In the step common event, the first parameter is the step name, which is mainly used for expansion.
[0055] Process the returned HTTP code in the return code processing event. For example, if it is 302, you can use the original request object to call the service specified by the 302 code.
[0056] Process the returned data in the returned data processing event.
[0057] Step 5: Provide a Js script, use the newly defined basic object through the Js script to complete the business logic of the interface or event, and load the Ajax basic object with the same name and the script that implements the business logic to the front end of the application in sequence.
[0058] Load the script. Take Nginx as an example. Create a page to load the script of the common steps and the Js script adapted to the application requirements. Find the location or server of the application in the Nginx configuration and add add_after_body to the current page to load the script.
[0059] Example 2
[0060] The present invention also provides a front-end AJAX transformation device, including a storage module, a transformation management module and a script management module.
[0061] The save module saves the original AJAX basic objects of the application system by assigning variables.
[0062] The transformation management module defines a new basic object with the same name according to the original AJAX basic object format based on the new business of the application system.
[0063] The transformation management module defines the key members of the new basic object: first save the original basic object members by defining variables, and then define new basic object members with the same name and parameters.
[0064] The transformation management module defines the common steps of the new basic object members and encapsulates the common steps into interfaces or events. The interfaces or events are activated when the new basic object members are called.
[0065] The script management module provides Js scripts, which use the newly defined basic objects to complete the business logic of the interface or event, and load the Ajax basic objects with the same name and the scripts that implement the business logic into the front end of the application in sequence.
[0066] As the information interaction and execution process between the modules of the above-mentioned device are based on the same concept as the embodiment of the method of the present invention, the specific contents can be found in the description of the embodiment of the method of the present invention and will not be repeated here.
[0067] Similarly, the device of the present invention adapts to clear new requirements, and can reduce the workload of application system transformation at different times without affecting the business of the application system. The development of the requirements can be completed with very little workload without modifying the application. It not only ensures the stability of the original application but also reduces the workload of development.
[0068] It should be noted that not all steps and modules in the above-mentioned processes and device structures are necessary, and some steps or modules can be ignored according to actual needs. The execution order of each step is not fixed and can be adjusted as needed. The system structure described in the above-mentioned embodiments can be a physical structure or a logical structure, that is, some modules may be implemented by the same physical entity, or some modules may be implemented by multiple physical entities, or some components in multiple independent devices may be implemented together.
[0069] The above-described embodiments are only preferred embodiments for fully illustrating the present invention, and the protection scope of the present invention is not limited thereto. Equivalent substitutions or changes made by those skilled in the art based on the present invention are within the protection scope of the present invention. The protection scope of the present invention shall be subject to the claims.
Claims
1. A front-end AJAX transformation method, characterized by include: Step 1: Save the original AJAX basic object of the application system by variable assignment. Step 2: Define a new basic object with the same name according to the original AJAX basic object format based on the new business of the application system. Step 3: Define the key members of the new base object: first save the original base object members by defining variables, and then define new base object members with the same name and parameters. Step 4: Define common steps for new base object members and encapsulate the common steps as interfaces or events. Activate the interfaces or events when calling new base object members. Step 5: Provide a Js script, use the newly defined basic object through the Js script to complete the business logic of the interface or event, and load the Ajax basic object with the same name and the script that implements the business logic to the front end of the application in sequence.
2. According to the front-end AJAX transformation method of claim 1, it is characterized in that step 1 specifically includes: Define a variable in JavaScript and assign the original AJAX base object to the variable. Select the original AJAX basic objects that need to be saved according to the logic. The original AJAX basic objects include XMLHttpRequest, ActiveXObject ("Microsoft.XMLHTTP"), and fetch.
3. A front-end AJAX transformation method according to claim 1, characterized in that In step 2, based on JavaScript, the corresponding saved original AJAX basic object is returned in the newly defined basic object. The newly defined basic object is used through the browser. The newly defined basic object finally returns the original AJAX basic object with the new business requirements added, ensuring that the application system function is not affected.
4. A front-end AJAX transformation method according to claim 1, characterized in that The encapsulated events in step 4 include: request header event, request data modification event, step common event, return code processing event, and return data processing event. Call the interface or change the request header in the request header event. In the Modify Request Data event, modify the data used in the request. In the step common event, the first parameter is the step name, which is mainly used for expansion. Process the returned HTTP code in the return code processing event. Process the returned data in the returned data processing event.
5. A front-end AJAX transformation device, characterized in that Including saving module, transformation management module and script management module, The save module saves the original AJAX basic objects of the application system by assigning variables. The transformation management module defines a new basic object with the same name according to the original AJAX basic object format based on the new business of the application system. The transformation management module defines the key members of the new basic object: first save the original basic object members by defining variables, and then define new basic object members with the same name and parameters. The transformation management module defines the common steps of the new basic object members and encapsulates the common steps into interfaces or events. The interfaces or events are activated when the new basic object members are called. The script management module provides Js scripts, which use the newly defined basic objects to complete the business logic of the interface or event, and load the Ajax basic objects with the same name and the scripts that implement the business logic into the front end of the application in sequence.
6. A front-end AJAX transformation device according to claim 5, characterized in that Save the variables in the module definition JavaScript and assign the original AJAX base object to the variables. Select the original AJAX basic objects that need to be saved according to the logic. The original AJAX basic objects include XMLHttpRequest, ActiveXObject ("Microsoft.XMLHTTP"), and fetch.
7. A front-end AJAX transformation device according to claim 5, characterized in that The transformation management module returns the corresponding saved original AJAX basic object in the newly defined basic object based on JavaScript. The newly defined basic object is used through the browser. The newly defined basic object finally returns the original AJAX basic object with the new business requirements added, ensuring that the application system function is not affected.
8. A front-end AJAX transformation device according to claim 5, characterized in that The transformation management module encapsulates events, including: request header events, request data modification events, step common events, return code processing events, and return data processing events. Call the interface or change the request header in the request header event. In the Modify Request Data event, modify the data used in the request. In the step common event, the first parameter is the step name, which is mainly used for expansion. Process the returned HTTP code in the return code processing event. Process the returned data in the returned data processing event.