Should You Ajaxify Your Website?

Absolutely loving the way Ajax can transform a web app into something that performs like a desktop application. The concern, however, arises when dealing with high volume sites. Currently working on an intranet-based database app meant for only 2-4 users at a time, I've heavily integrated Ajax into it. This got me thinking - is there such a thing as too much Ajax?

When do the number of hits start to outweigh the advantages provided by Ajax? It might not seem likely because compared to a full page refresh, you are essentially only updating the necessary parts. But is there a breaking point?

Interested to hear from those who have utilized Ajax on high traffic websites. Have you experienced any scalability issues while implementing Ajax in such scenarios?

javascriptajaxasynchronousscaling

Answer №1

While working on my current project, we encountered scalability issues due to our use of Ajax. The project is a J2EE site dedicated to managing employee timekeeping for a large urban city. To address this, we implemented a strategy where the browser side can cache non-changing data throughout a user session. We are transitioning to a setup where a single admin process handles timekeeping for multiple employees, similar to how an ERP or email application operates. This allows us to store a significant amount of data on the browser side without being excessively burdened by high traffic volumes. Our approach involves utilizing an XML data island on the browser side and loading data only when necessary.

If you're interested in learning more about Ajax design patterns, I highly recommend the book Ajax Design Patterns or visiting their website.

Answer №2

Using Ajax can be beneficial for high traffic websites by reducing bandwidth usage since only specific parts are updated. However, a drawback is that the site may become unusable if visitors do not have Javascript enabled. Personally, I find it tedious to cater to non-Javascript users and potentially having to redesign the site for them.

Answer №3

Consider this: AJAX should not be relied upon as the sole option due to potential security risks, but rather as an enhancement layer on top of an existing system to offer improved user experiences in certain aspects. Therefore, it is unlikely for AJAX to generate more requests or require more work than traditional HTML since they both transfer the same data.

One advantage of AJAX is its ability to transmit only the necessary data, which can help reduce bandwidth usage and ease server load by eliminating redundant requests for HTML, images, CSS, and so on with each page reload, resulting in a faster user interface.

While techniques like polling may challenge this principle, it's important to note that this pertains to the method used rather than the technology itself; a similar impact could be achieved with a basic page poll.

It's essential to understand the purpose of AJAX and utilize it accordingly. If implementing AJAX leads to decreased performance, then there may have been errors in its execution.

(For what it's worth, my comparison of profiling AJAX versus simple HTML typically shows around 60% reduction in bandwidth and 80-90% improvement in performance)

Answer №4

One prevalent challenge with AJAX applications is when they are configured to continuously check back with the server to detect any updates in the content without requiring user intervention. It's crucial to understand that having 5 clients checking every 10 seconds does not equate to having 5000 clients doing the same at once.

Answer №5

Utilizing Ajax can help decrease the server workload by only displaying or refreshing a portion of the page at a time, but it can also result in an increase in the number of server hits. The impact of using Ajax really depends on the specific architecture of your web application. If your application requires significant processing for each hit, such as database access, Ajax may end up causing a lot of strain on your server.

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

Use the zoom feature on D3 to enhance two graphs in an HTML document

I have been experimenting with d3 libraries lately and came across http://bl.ocks.org/jroetman/9b4c0599a4996edef0ab. I successfully used it to draw a graph based on data from a tsv file and enable zoom in and out functionality, which worked well for me. Ho ...

javascriptd3.jsgraph

The dynamic duo of ASP.Net's Listview and AJAX Update Panel

I am facing a challenge in creating a listview with thumbnails of some items. When the user clicks on the "more" button, I want the remaining items to be displayed within the same listview without causing a postback. My goal is to achieve this using ASP.Ne ...

asp.netajaxlistviewasp.net-ajaxupdatepanel

Troubleshooting HTML Output Display Issues

I've been trying to post my content exactly as I submit it, but for some reason, it's not working. When I enter two paragraphs in a post, the output doesn't maintain that formatting. Instead, it removes the paragraph breaks and displays the ...

javascriptphpjqueryhtmlcss

Using the Firefox API to determine if a tab is currently active

I remember hearing about a feature that was introduced in some recent versions of Firefox allowing developers to check if a tab is active or not using JavaScript. However, I am having trouble finding more information about it online. Can you share the li ...

javascripthtmlfirefoxbrowser

I'm interested in finding a data binding framework that connects the DOM, JavaScript, and server-side database in a three-way manner for use with AngularJS and

AngularJS enthusiasts often tout the framework's two-way data binding feature, which allows for seamless synchronization between DOM elements and JavaScript data. Currently, I am immersed in learning projects that involve integrating AngularJS with D ...

javascriptpythondjangoangularjsdata-binding

Collapse the accordion item when a different one is selected

Check out this code snippet that's working on jsfiddle I'm attempting to add a function to close any open accordion items when another one is clicked. I've added a class "open", but I'm having trouble removing the class when a differen ...

javascriptjquerycsstoggle

Utilizing arrays in JavaScript alongside jQuery's methods such as $.inArray() and .splice()

I am currently dealing with an array that is limited to containing 12 values, ranging from 1 to 12. These values can be in any order within the array. My task is to iterate through the array and identify the first unused value, assigning it to a variable. ...

javascriptjqueryarrays

What methods can be employed to maintain a consistent width for a multi-line span that aligns with the content?

Inside a div, I have 2 spans. When the content of the first span is short enough to fit on one line, the span's width matches the text content and positions the second span next to it. If the content of the first span is long and causes it to wrap, t ...

javascripthtmlcssflexbox

Discovering the specific value from a fixture file in Cypress

When I receive a JSON Response, how can I extract the "id" value based on a Username search? For instance, how can I retrieve the response with an "id" value of 1 when searching for the name "Leanne Graham"? It is important to note that the response valu ...

javascriptarraysjsoncypress

Sleek transition-ready zoom functionality for THREE JS with clickable controls

Hey there, I've been attempting to animate a transition between scenes in THREE js for quite some time now. I have successfully cleared the scene and recreated the next one, but the transition between them is proving to be quite challenging. I have cr ...

javascriptthree.js

When using Multer for file upload, the req.body returns as an empty object while req.file is undefined

I previously shared a problem I encountered while using multer for file upload in the MERN stack. Despite my attempts, I have not yet been able to resolve it. In my app, I am using both body-parser and multer. Here is the order of code in my index.js file: ...

javascriptnode.jsexpressmultipartform-datamulter

The behavior of Date's constructor differs when applied to trimmed versus untrimmed strings

Although it's commonly advised against creating a date from a string, I stumbled upon an interesting phenomenon: adding a space before or after the date string can impact the resulting date value. console.log([ new Date('2019-03'), ...

javascriptdate

Avoid triggering the API with rapid successive clicks

My project involves creating an Instagram-clone with like and dislike buttons. When a user is logged in and hasn't liked or disliked a post yet, both buttons appear as black. If the user likes a post, the like button turns blue, and if they click disl ...

javascriptreactjsexpressreduxsequelize.js

Experiencing difficulties when attempting to upload image data via ajax POST

Within an existing web application that uses a CGI script for image uploads via form submission, the task at hand is to crop a specific portion of an image and send that part to the server. The cropping process is handled using Canvas APIs. Now, the chall ...

ajaximageupload

Always ensure that only one div is visible at a time

I am currently working on a project where I cannot use ng-cloak due to the way the css files are loaded. I have been exploring alternative solutions and have tried a few different approaches. My main goal is to ensure that two icons are never shown at the ...

javascripthtmlangularjs

A method for automatically refreshing a webpage once it switches between specific resolutions

On my page www.redpeppermedia.in/tc24_beta/, it functions well at a resolution of over 980px. However, when the resolution is brought down to 768px, the CSS and media queries alter the layout. But upon refreshing the page at 768px, everything corrects itse ...

javascriptjqueryhtmlcssparallax

Is there a way to customize the color of the bar displaying my poll results?

My poll features two results bars that are currently both blue. I attempted to change the color of these bars but was unsuccessful. I've searched for solutions on stack overflow, specifically How can I change the color of a progress bar using javascr ...

javascriptphphtmljquerycss

The AJAX button toggle feature functions correctly, albeit only for one use before requiring a page

I've integrated a button on my website that allows users to mark a post as their favorite or unfavorite it. Clicking the button should switch between these two states by either adding or removing the post ID from a user's repeater field. The func ...

phpjqueryajaxwordpress

GUI interface for interactive three.js fragment shaders

I am currently experimenting with the three.js webGL shader example and am attempting to implement a GUI that can dynamically control the parameters of the shader in real time. Is this achievable? It appears that when I place the effectController variable ...

javascriptthree.jsshader

How can you convert a JavaScript object with nested arrays into JSON format?

I have been working with a JavaScript object that contains nested objects with associative arrays. I attempted to use the stringify function from the json2.js library, but the output did not include the arrays inside the nested objects. In my scenario, I b ...

javascriptarraysjsonassociativestringify