What are the top strategies for loading models on a webpage in AJAX systems?

Question

What are the top strategies for loading models on a webpage in AJAX systems?

As we delve into the world of using ExtJS with .NET web services to create ajax applications, a question arises regarding best practices for retrieving the model on the client side. An example scenario is having a form with 10 comboboxes. Should each combobox be loaded individually through separate ajax calls, or should a single web service call return the "model" containing all 10 lists for the dropdowns? How are others approaching this issue?

In the case of individual web services, one potential advantage is reduced payload size and the ability to leverage the multiple threads available within the browser (typically 2-4). Increased concurrency can even be achieved by using different domain names for each request. This approach allows for concurrent fetching of the model. What do you think about this strategy?

javascript ajax

Answer 1

Answer №1

Should I opt for making multiple individual ajax calls, each loading a corresponding combobox as the results come in? Or is it better to make just one web service call that provides the "model" for all 10 lists needed for each dropdown?

Creating a new web service that fetches the model for all 10 lists, along with any additional data required, would be more efficient. It's easier on the server to handle one request than multiple requests, especially when dealing with a large number of users accessing the form. With 100 users simultaneously loading the form, using a single request could save the server from processing over 1,100 requests (counting initial page load and subsequent AJAX calls).

Your web service can easily return a structure like this example for ExtJS:

{
    chk1: true,
    chk2: false,
    chk3: true...
}

Answer 2

Should I opt for making multiple individual ajax calls, each loading a corresponding combobox as the results come in? Or is it better to make just one web service call that provides the "model" for all 10 lists needed for each dropdown?

Creating a new web service that fetches the model for all 10 lists, along with any additional data required, would be more efficient. It's easier on the server to handle one request than multiple requests, especially when dealing with a large number of users accessing the form. With 100 users simultaneously loading the form, using a single request could save the server from processing over 1,100 requests (counting initial page load and subsequent AJAX calls).

Your web service can easily return a structure like this example for ExtJS:

{
    chk1: true,
    chk2: false,
    chk3: true...
}

What are the top strategies for loading models on a webpage in AJAX systems?

Answer №1

Similar questions

Is there a way to retrieve data from two separate calls to MongoDB and then pass it to a child component?

The transition effect of changing opacity from 0 to 1 is not functioning properly in Firefox

Choosing a single item from multiple elements in React using React and typescript

Tips for executing forEach on a promise?

Issue with Yup and Formik not validating checkboxes as expected

Arranging null values and numbers to imitate the behavior of the tabindex HTML attribute

Is there a way in javascript, jquery, and plupload to dynamically pass a parameter to the URL without needing to reload the page or object?

An error was encountered: object does not possess the function 'tooltip'

Break down a data structure into a type that includes multiple options

Using Angular to open a modal by invoking the href function

Identifying and Blocking Users from Accessing External Domains Outside of the Angular Application

Listen to music on an Android device without disturbing anyone using an iPhone

Is it possible for me to make the default export anonymous?

jQuery not refreshing properly

Modifying the HTML content of a span element does not always initialize all of its properties

Error Message: Unable to Modify Headers Once Sent - NodeJS

Issue encountered while requesting data from API in ReactJS

Which approach is more impactful: consistently sending an ajax request or breaking down the result within a function?

"Vue allows developers to define components by providing both template and script through the Vue()

How to mimic a mouse hover effect with JavaScript