The Evolution of Web Applications with AJAX

Introduction:

We have a webapp in classic ASP that is becoming increasingly difficult to maintain as it grows. The complexity of the code and the numerous ASP pages required are hindering our ability to develop new features. I believe it's time we modernize the system, and I would love to hear feedback from the community on how modern webapps operate.

Question:

I understand that modern webapps typically consist of two main components: the front end (user-facing interface) and the back end (server/database). In our current ASP setup, the backend and database requests are intertwined with client-side code. I believe there should be a clear separation between these components, and JSON seems like the ideal solution.

The diagram below illustrates my proposed architecture:

I suggest having front end and back end developers collaborate by defining an "API." For instance, if the business requirement is to display a list of current customers,

Front end developer: I need to show a list of customers to the user.

Back end developer: I need to retrieve a list of customers from the database and send it to the front end developers.

This data could be represented in JSON format like this:

[
    {
        "fname": "John",
        "lname": "Doe",
        "price": "5"
    },
    {
        "fname": "Jane",
        "lname": "Deer",
        "price": "5"
    }
]

Implementation Plan

Front End Code:

Assumptions: Single-page app, All requests directed to one server page, JavaScript with jQuery, Knockout.js

//AJAX request for data using jQuery and GET method
$.getJSON('/index',         //The endpoint for data retrieval
    {"request":"customers"} //JSON indicating the requested data
    , function(data) {      //Callback function
    //Process the retrieved data
    //Integrate into MVVM (Knockout.js)
    someKnockoutMappingFunction();
});

Back End Code:

Assumptions: Java

 String request = req.getParameter("request");
    if (request == null) {
       //Handle error case
    }
    else if(request == "customers")
    {
        //Retrieve and format data from the database
        someDatabaseToJSONFunction();
        //Send the formatted data back to the client
        someSendJSONBackFunction();
    }

Conclusion

Do you think this approach is viable? Has anyone implemented a similar model and can offer insights before I proceed? Any tips on quickly transitioning from ASP?

Thank you in advance!

Answer №1

If you're finding it difficult to move away from ASP Classic but are open to exploring alternatives, there are a few existing frameworks and libraries that can make ASP/VBScript development more manageable.

I currently have links to three options, with a couple more out there that I may not be able to recall at the moment:

Even if you're considering migrating to a different language or framework, these libraries can still be handy in bridging the gap between old and new codebases. For example, ASP-Ajaxed includes a class for emitting JSON data. It's important to proceed with caution when making changes to your codebase, as unexpected consequences could arise from altering old business rules or bug fixes.

There have been many helpful answers on other questions regarding sensible approaches to transitioning your code to a new platform.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update text based on the status of a boolean variable in AngularJS

I am creating a container using ng-repeat, and here is the corresponding HTML code: <div class="mission_box clearfix" ng-repeat="mission in missions"> <img src="images/tick_patch.png" class="expired_img"> <h2>{{mission.name}}< ...

Exploring methods to iterate over JSON data and integrate it with flatpickr.DropDownStyle ThemeData into infinite

I have seen this question asked before, but despite trying various solutions, I am still unable to make it work properly. Within my Symfony 3 project, I am utilizing flatpickr and I need to disable specific dates based on booked holidays. When a particula ...

E/SQLiteLog: (1) table 'kids' not found in the DatabaseHelper

My app is displaying an error message and I'm not sure how to handle the code. package com.own.babyfirstword.database import android.content.Context import android.database.sqlite.SQLiteDatabase import android.database.sqlite.SQLiteOpenHelper import ...

Removing connected entries with pre middleware on mongoose

I currently have 3 different schemas: Building const BuildingSchema = mongoose.Schema({ address: { type: String, required: true }, numberOfFloors: { type: Number, default: 0 }, }); Apartment const RoomSchema = mongoose.Schema({ roomNumber: { type: ...

How do you convert a dictionary object into JSON in Django?

I'm facing a simple issue that needs to be resolved: >>> from django.core import serializers >>> serializers.serialize("json", {'a':1}) Traceback (most recent call last): File "<console>", line 1, in <module> ...

Encountering an undefined value when calling a function within the Express render() method

I'm currently learning about Node and Express, but I am facing a challenge in passing data from one function to another as a variable. I suspect that my issue lies in properly handling callbacks and asynchronous operations. Any guidance on this matter ...

Access information from a service

I have developed a new service named servcises/employees.js: angular.module('dashyAppApp') .service('employees', function () { this.getEmployees = function() { return $.get( '/data/employee.json' ); }; }); ...

Firefox consistently reports ajax status as error

One of my ajax requests is causing some confusion. $.ajax({ url: webURL, type: 'post', data: somedata, cache: false, datatype: "json", contentType: "application/json", success: successFunc, ...

What is the best way to create a new row within a Bootstrap table?

Struggling to format an array inside a table with the `.join()` method. The goal is to have each car on a separate row. Attempts using `.join("\r\n")` and `.join("<br />")` have been unsuccessful. What am I overlooking? ...

What is the process for recording information to a designated file?

In my log4j2 logger configuration, I have set up all logging from the root logger to be written to a standard log file using Logger.getRootLogger. However, for certain special events, I would like to log to a different file. How can I configure this speci ...

The JSON Format used in Web APIs

As a newcomer to Web API, I was able to create a successful API without any issues using JSON. However, when working with different JSON formats, I am unsure of how Web API parses JSON so seamlessly. Initially, my JSON format looked like this: [ { " ...

How to ensure proper filename encoding for RestEasy file uploads?

Here is the code I am currently using for uploading files: @Path("/files/") @POST @Consumes(MediaType.MULTIPART_FORM_DATA) public OrderData uploadFile(MultipartFormDataInput input) { List<InputPart> parameterParts = input.getFormDataMap().get("F ...

UPDATE: An issue has been identified with the /login route that is currently causing an unknown error

Hours of coding and suddenly my app is rendering everything twice. Can't figure out why, please help! https://i.sstatic.net/RhMid.png app.js import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import "bootstrap/ ...

How come the Jquery :odd selector picks out the even elements?

<html> <head> <script type="text/javascript" src="jquery-1.7.1.js" ></script> <script type="text/javascript"> $(function() { $("p:odd").html('modified'); }); </script> </head> & ...

What is the best way to incorporate a for loop in order to create animations with anime.js?

I am currently working on implementing a for loop to create a page loader using JQuery along with the animation framework anime.js var testimonialElements = $(".loader-animation"); for(var i=0; i < Elements.length; i++){ var element = ...

Struggles encountered when choosing the initial visible item

I have a set of 3 tabs, each with its own heading and content. However, I only want to display the tabs that the user selects by checking the corresponding checkboxes. There are 3 checkboxes, one for each tab. Below is the code snippet: //Function to ...

Building custom queries in ReactQuery with Typescript is a powerful tool for

Currently, I am in the process of creating a simplified query builder for my react query requests, but I am facing challenges with TypeScript. My proficiency in TS is not great as I am still learning. I am attempting to incorporate the latest insights fro ...

Issue with Ajax functionality not functioning properly in Visual Studio for Windows (Blend)

I am encountering an issue with my ajax login script. When I attempt to call the login function, nothing seems to happen... function login() { var login = new XMLHttpRequest; var e = document.getElementById("email").value; ...

What is the best way to manipulate the positioning and rotation of the main object?

https://i.sstatic.net/HSRZz.png https://i.sstatic.net/1dggf.png After developing a toolbox capable of rotating and repositioning a mesh with an axis in the middle, I ran into an issue where separating rotation and position caused the position to revert to ...

Tips for integrating the daimajia/AndroidImageSlider library with a JSONArray dataset

I am looking to achieve a certain functionality that allows for easy changes in the future. I have read that using JSON can accomplish this. The creator of the library I am using demonstrates this with a specific URL link for images. Here is the LINK to t ...