As I work on designing a web application, I am utilizing AngularJS for the front-end and Java for the back-end. The app is deployed in a war file on a local JBoss server. Currently, a Java class performs calculations and sends data as JSON to the client every 10 seconds. While this setup works, I am looking to incorporate AJAX to update the elements displaying this data.
Within Angular, I have several $resource services consuming a Java RESTful API. The JSON data is then rendered in the view through a single controller. Using ng-repeat, multiple HTML elements with the same classes are created. I aim to use one of these classes to trigger a refresh on all elements periodically. Here's a snippet showcasing the ng-repeat usage:
<div ng-repeat="mq in mqDepth">
<progressbar class="mq" max="max" value="dynamic" ng-init="dynamic=mq.currentDepth" type="info>
<span>
{{dynamic}} / {{max}}
</span>
</progressbar>
</div>
In the above code snippet, the data being updated is referenced by mq.currentDepth.
The following code is utilized for refreshing:
function refreshQueue() {
$('.mq').load('', function() {
$(this).unwrap();
});
}
refreshQueue();
setInterval(function() {
refreshQueue();
}, 10000);
A warning indicates that my current AJAX implementation could potentially harm user experience by breaking the interface after repeated updates.
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.I have a few queries:
- Can you use AJAX to update elements with classes, or does it only apply to IDs?
- Is it advisable to utilize AJAX for page refreshes?
- If not, what would be the appropriate approach within Angular?