Performing asynchronous updates with AJAX in combination with ASP to display updated progress panels can be achieved

I am currently delving into the realm of AJAX alongside Classic ASP for the very first time.

Within my AJAX script, I'm calling an ASP page (process.asp) that contains a simple loop iterating from 1 to 1000. This loop mimics an image processing task on my website, which I plan to enhance with AJAX in the future.

MY AJAX SCRIPT

function processItems()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("notification").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","processItems.asp",true);
xmlhttp.send();
}

THE ASP PAGE

Response.Expires = -1
i = 0
Do Until i = 1000
i = i + 1
Loop
Response.Write "Process complete"

While the current setup works well and displays a "process complete" message upon finishing, I aim to update it to show the user which item is being processed at any given moment e.g., "processing item 17 of 1000".

Research suggests that I need 'Response.Flush' for this purpose, so...

Can I utilize '.flush' within the loop section of my ASP script to output the item number (i)? If so, are there any additional requirements? If not, could someone guide me on what steps I should take to achieve this functionality?

This is my proposed solution:

Response.Buffer = True
Response.Expires = -1
i = 0
total = 1000
Do Until i = total
i = i + 1
Response.Write "Processing Item "&i&" of "&total&""
Response.Flush
Loop

Your assistance is greatly appreciated.

Answer №1

Reaching your desired destination may seem impossible at first. When making an ajax call, the response will only be received once the entire processing is complete. For instance, if you have 10000 files to process, you will receive a response only after all files have been processed.

To tackle this challenge, consider utilizing REVERSE AJAX (comet ajax) or implementing the following approach:

  1. Make an ajax call to determine the number of files that require processing.
  2. Make another ajax call to process each file based on an index.

Answer №2

To avoid seeing the specific "Processing item XX" message and instead display a general "Processing items" message during an ajax call, you can include the following code snippet:

if (xmlhttp.readyState==1)
{
document.getElementById("notification").innerHTML="Processing items";
}

This line of code will trigger before the actual call is made, ensuring that the generic message is shown to users.

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

Guide to simulating Twilio with Jest and TypeScript to perform unit testing

Please assist me in mocking a Twilio service that sends messages using Jest to mock the service. Below is the code I am working with: import { SQSEvent } from "aws-lambda"; import { GetSecretValueResponse } from "aws-sdk/clients/secretsmanag ...

Can you please identify the TypeScript type associated with the return value of the match() method in String prototype?

I need help with creating a Regex in JavaScript const pattern = /S(\d+)E(\d+)/; // identifying characters between "S" and "D" const result = 'SE01E09'.match(pattern); How should I declare the result variable? I have attempted various ...

Transforming three items into an array with multiple dimensions

There are 3 unique objects that hold data regarding SVG icons from FontAwesome. Each object follows the same structure, but the key difference lies in the value of the prefix property. The first object utilizes fab as its prefix, the second uses far, and t ...

Guide on establishing a reference within a wrapped component in React

App.jsx <Provider store={store}> <Main {...this.props} ref={this.props.setRef}> </Provider> In my App.jsx file, I am setting a reference in the Main component. This will allow me to call a method from the Main component within another ...

Discover the potential location of an element using jQuery's animate feature

Struggling to obtain the correct position of an element due to the length of my animation causing $(this).position().top to be calculated prematurely. Is there a way to predict the future position value of an element before it moves to that specific locat ...

Utilizing asynchronous JavaScript and XML (AJAX) technology to verify a specific attribute

I am a beginner with Ruby on Rails and I'm looking for a way to achieve something in Rails that I typically do using PHP. Usually, when validating user input against certain criteria, I make Ajax calls to a PHP script that processes the data and retu ...

emailProtected pre-publish: Running `python build.py && webpack` command

i am currently using scratch-blocks through the Linux terminal I have encountered a problem which involves running the following command: python build.py && webpack [email protected] prepublish: python build.py && webpack Can anyon ...

Is it feasible to utilize Google Calendar API for JavaScript through npm install? Alternatively, can the Google Calendar API be utilized for Node.js in the browser within Next.js?

Looking to integrate the Google Calendar API as a library in your Next.js project without using _document.tsx? I have explored two potential approaches for achieving this: Utilize the google calendar api for JavaScript by installing it via npm Use the goo ...

Integrating individual front end JavaScript files into an Express.js application

I've been working on a JavaScript file that contains over 200 lines of code for the front end logic of my project. It handles interactions like button clicks, image displays, and more, similar to a game. However, I'm struggling to figure out how ...

Retrieving a attribute from an element on a separate webpage

On my website, I have a list of links that use ajax to load new pages. Each of these new pages features a gallery of images with a main image. I am trying to figure out how to extract the source URL from the main image in order to display it as a thumbn ...

Create a custom Android home screen widget using JavaScript or another programming language

I have a project in mind to create an Android App and include a home-screen widget. While I know it can be done with Native Android, my preference is to use JavaScript for development. Would anyone happen to know of any other solutions that allow the use ...

Ways to display a variable prior to making an axios request

I have a get request that saves the result in a variable named name_student. How can I access this variable in other methods? Or how should I declare it? Here is the code snippet: getStudent(){ axios.get('https://backunizoom.herokuapp.com/student/2 ...

Utilizing Async/Await with an Unassigned Object

I'm facing a puzzling issue with an async/await function that refuses to assign to an object. Despite displaying the expected results in the console, when it comes to actually assigning to the object, it fails to do so. Let me elaborate below: Here&a ...

Strategies to avoid red squiggle lines in a contenteditable div that has lost focus

While the div is focused, spell checking is enabled which works well. However, once the focus is removed and there are spelling mistakes, the red squiggle lines for spell checking remain visible. After following the advice provided in this query: spellch ...

Changing the static value in a Flot line chart to be dynamically loaded from an AJAX URL

Currently, I am using a line graph that loads data from a static JavaScript array. Here is the code snippet: d1 = [ [1262304000000, 5], [1264982400000, 200], [1267401600000, 1605], [1270080000000, 1129], [1272672000000, 1163], [1275350400000, 1 ...

Fetch additional data from a table by utilizing Ajax and PHP

I have 7 data entries in my database When attempting to load the data from a table using ajax and php, I encountered an issue. After clicking the "load more" button, the data displays successfully but the "load more" button disappears. Here is my index. ...

Replicate the styling of CSS class A and apply it to class B

Let's take a look at some code: <button id="test" class="ui-state-hover" value="Button"> In Context: I'm utilizing the JQuery UI CSS class ui-state-hover on an HTML button to ensure it always appears as if it's being hovered over. H ...

Setting line chart data for Chart.js

Can you help me troubleshoot an issue I'm facing with creating a dataset for a line chart in Chart.js? Despite having an array of objects, the dataset isn't rendering correctly and I end up with two line charts instead of one. What could be causi ...

Designing a website with a 4x4 layout grid

How can I create a webpage with a 4x4 grid that changes colors in each square when clicked on? Appreciate any advice! ...

What is the best way to create a sleek typewriter effect transition by hovering between tabs?

When hovering over a tab, the content in the main content area's child div should be displayed from a sibling div that holds the content. Initially, the details div style is set to hide the contents but upon hover, it is displayed. The described func ...